bug: signal.value in JSX does not trigger rerender using @preact/signals-react ^1.2.0

[izznat]

Starting from @preact/[email protected], accessing signal value via signal.value in JSX does not trigger rerender when signal value is changed.

Reproduction: Stackblitz

[izznat]

If I change @vitejs/plugin-react jsxRuntime setting to classic and consequentially adding import * as React from 'react', it works as expected. But, React Refresh needs the jsxRuntime to be automatic. Doing this also fix #269, so these two issues might be related.

[XantreDev]

It works fine with @vitejs/plugin-react-swc, btw

[spa5k]

Any update on it? sadly i can't use the swc plugin of vite due to a bug in other lib

[sbesh91]

This isn't an error with Signals exactly. The line of code signal.value++ does not trigger the setter. Try updating that to be signal.value += 1 and you'll see things work properly.

[XantreDev]

@sbesh91 Its not true. And i dont know any reason why ++ shouldn't trigger setter

https://stackblitz.com/edit/vitejs-vite-vtubyq?file=src/App.tsx

[sbesh91]

@XantreGodlike well that's quite strange. I went ahead and forked that repro as well. It looks like the only difference here is on the button render. <button onClick={() => (count.value += 1)}>count is {count}</button> Tell you the truth, I'm not sure why binding it up like this forces a re-render and binding it up like your example <button onClick={() => (count.value += 1)}>count is {count.value}</button> doesn't trigger it.

You're also right that the ++ operator does fire the setter. Sorry for jumping to conclusions here.

https://stackblitz.com/edit/vitejs-vite-kbch31?file=src%2Fmain.tsx,src%2FApp.tsx

[luisherranz]

I've just noticed the same thing.

This is my reproduction: https://stackblitz.com/edit/vitejs-vite-csqbr6?file=src%2FApp.jsx

---

EDIT: I confirm that switching to jsxRuntime: 'classic' fixes the issue.

export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'classic',
    }),
  ],
});