React component does not update using preact/signals-react

Question

I am using @preact/signals-react version 2.0.0, implementing a simple counter app:

import { signal } from "@preact/signals-react";

const counter = signal(0);

function App() {
  return (
    <div className="App">
      <header className="App-header">
        <p>
          Count: {counter.value}
        </p>
        <button onClick={() => {
          counter.value += 1;
        }}>
          Click me
        </button>
      </header>
    </div>
  );
}

export default App;

The problem is that, the counter does not update when button is clicked. However, if I rewrite the counter display:

<p>
  Count: {counter}
</p>

The component re-rendered and the counter value display as expected.

I was thinking counter.value is the right approach to access the signal value. What is the reason behind of this?

Why you want to use preact/signals-react package you can achieve same result using setState hook ? — Bharti Sharma
– Bharti Sharma, Commented Feb 28, 2024 at 18:41

rschristian · Accepted Answer · 2024-02-29 00:27:38Z

2

Because you haven't followed the instructions: https://github.com/preactjs/signals/tree/main/packages/react#react-integration

You need to use the Babel plugin or the useSignals() hook.

I was thinking counter.value is the right approach to access the signal value.

Again, the docs are your friend here: https://github.com/preactjs/signals/tree/main/packages/react#rendering-optimizations

.value does indeed access the signal value, but if you use counter by itself, this can bypass rerenders.

edited Feb 29, 2024 at 0:27

answered Feb 28, 2024 at 22:48

rschristian

3,1701 gold badge12 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

React component does not update using preact/signals-react

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related