No component rerendering with @preact/signal-react

[roo7690]

Hello, I'm having a problem with @preact/signal-react. Using this code provided by the documentation,

import { useSignal, useComputed, effect } from "@preact/signals-react";

export default function () {
    const count = useSignal(0);
    const double = useComputed(() => count.value * 2);

    effect(()=>{
        console.log(count.value,double.value)
    })

    return (
        <button onClick={() => count.value++}>
            Value: {count.value}, value x 2 = {double.value}
        </button>
    );
}

there is a subscription of the console.log() that re-executes with each change but no rerendering of the component

[XantreDev]

In which environment do you using signals? Webpack? Vite? Next.js?

[jesseagleboy]

Just as speculation from my time working with Preact Signals, the issue could be because the count.value and double.value in your JSX are not being used in the proper way. Any signal or computed value within the JSX should be inserted without explicitly saying .value. Preact Signals handles the rendering behind the scenes. But as @XantreGodlike asked above, I've noticed Vite and Webpack can have different results at times.

[rschristian]

Any signal or computed value within the JSX should be inserted without explicitly saying .value.

Not quite, no. Using .value just opts you out of the direct text node binding, you absolutely can do it though. Just need a full rerender of the component to update.

[XantreDev]

Just as speculation from my time working with Preact Signals, the issue could be because the count.value and double.value in your JSX are not being used in the proper way. Any signal or computed value within the JSX should be inserted without explicitly saying .value. Preact Signals handles the rendering behind the scenes. But as @XantreGodlike asked above, I've noticed Vite and Webpack can have different results at times.

Omitting .value is fully optional performance optimization. It should work any way - it will rerender SignalValue or the parent component

[roo7690]

@XantreGodlike Oops, I should have mentioned. It's on Nextjs; through this increment, we can see that there is an omission.

"use client"
import { effect, signal } from "@preact/signals-react";

const i=signal(0)
setInterval(()=>i.value++,1000)

effect(()=>{
    console.log(i.value)
})

export default function Page () {

    return i
}

[XantreDev]

@roo7690 use can try my @preact-signals/safe-react with manual subscribing components to signals via HOC. It's not so cool as automatic tracking, but for now I don't know better options for next.js. For now I researching opportunity to migrate babel plugin to swc to make it working with next.js https://github.com/XantreGodlike/preact-signals/issues/43

[Dylan-yoon-mp]

first of all, I appreciate about your work I also facing same problem. I did integrate @preact-signals/safe-react into my React native project it seems can subscribe signals but the component not re-render

in case I declare temporary state and update state from useSignalEffect to force re-render, it's working but I don't think this is working well as intended

[XantreDev]

@Dylan-yoon-mp Did you run yarn start --reset-cache?

[Dylan-yoon-mp]

@XantreGodlike yes many times but i didn't work I want share my env just in case

react-native: 0.71.12 react-navigation: 0.6.x @preact-signals/safe-react: 0.3.1

[XantreDev]

Did you change babel config?

[Dylan-yoon-mp]

yes I did

[kerituni12]

same issue with "vite": "^4.5.0" and "@preact/signals-react": "^2.0.0"

[Loque18]

same issue

[sellwawy]

Same issue in Next.js and Vite.

[XantreDev]

@rschristian Should we add Troubleshooting section to readme? I can provide PR

[rschristian]

What would that entail (especially in relation to this issue)?

[XantreDev]

What would that entail (especially in relation to this issue)?

Components don't track signals or Components do not update if signal value changes or Lack of component reactivity

[ReevMich]

For me, the simple vite react typescript template doesnt work with @preact/signal-react 2.0.0 using the .value, but when I switch to 1.3.8 it works as id expect. I have also tried the same thing in a create react app webpack environment. The switch to version 1.38 does resolve the issue. https://stackblitz.com/edit/vitejs-vite-pj3xda?file=package.json,src%2FApp.tsx&terminal=dev

[rschristian]

For me, the simple vite react typescript template doesnt work with @preact/signal-react 2.0.0 using the .value

You haven't followed the v2 usage instructions

[ReevMich]

For me, the simple vite react typescript template doesnt work with @preact/signal-react 2.0.0 using the .value

You haven't followed the v2 usage instructions

Your right, I missed the babel stuff. Thanks.

[PivaRos]

Quick solution:

This is probably because you didn't set the babel config.

Solution 1: Setting the babel config should fix the issue

Solution 2: Adding the hook useSignals() in the top of the file

[rschristian]

Closing as answered.