Example code not working

[thegregthomp]

I couldn't get rerenders working on a test scenario I created so I re-read the docs and found the signals demo. That also doesn't appear to work/re-render. Anyone know what's going on? https://preactjs.com/repl?example=todo-list-signals

[thegregthomp]

Further exploration leads me to see that using the signal variable it's self works and updates but using signal.value doesn't update. See example below:

Works:

const counter = signal(1);

//In component
{counter}

Doesn't work:

const counter = signal(1);

//In component
{counter.value}

in the above use-case, this is fine but for objects I don't really see a way around not using value and thus why I think the example is failing.

[rschristian]

For the REPL not working, see: preactjs/preact-www#978. It's a recent bug in the REPL, it'll (hopefully) get fixed shortly.

Are you using React or Preact? Might be a duplicate of #298 if the former.

[thegregthomp]

@rschristian thanks for the response. I am using react and I hadn't seen that bug previously and made the changes to test. I still can not get a signal with an object to re-render. In the below example the incrementation will happen but wont show until I cause a rerender by other means.

const complexSignal = signal({ a: 1, b: 2, c: {d: 3, e:4, f: {g:5}} });

export default function Counter() {
  
  return (
    <div>
      <h1>Counter</h1>
      <button onClick={()=>complexSignal.value.a++}> UPDATE A: {complexSignal.value.a}</button>
    </div>
  );
}

[thegregthomp]

It may be of value to know that this is a vite project using the react-swc-ts template. I'm noticing issues with HMR and signals (which is a know issue here), not sure if it's related.

[thegregthomp]

Here's an update example (https://codesandbox.io/s/react-playground-forked-8d9yi5?file=/index.js) if you increment counter it works. If you increment the complexSignal it works without re-render. Then go increment counter again and you'll see on re-render the incremented complexSignal is correct

[Kanaye]

In your example you aren't updating the signal, but a property of the object of the signal.
This means the signal doesn't "know" that an update occurred and therefore can't trigger an update.

You will also need to make sure that your newValue != oldValue, otherwise signals won't trigger an update.

I updated your example to work with these limitations: https://codesandbox.io/s/react-playground-forked-hmbk8t?file=/index.js

[thegregthomp]

@Kanaye thanks so much. I just found this chain of comments as well that help: #120 (comment)

[rschristian]

Going to close this out then, you can subscribe to the linked issues to get updates on them.

Feel free to ping if you run into any other issues.