Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – Unable to use object in react with useSignal

I’m using @preact/signals-react to manage state, but I’m having trouble getting the component to re-render when I update an object’s property. I can see the changes when I log the value, but the component doesn’t reflect these changes.

import { useSignal } from '@preact/signals-react'

function App() {
    const ob = useSignal({ x: 0 })

    setInterval(() => {
        ob.value.x = Math.random()
        console.log(ob.value)
    }, 1000)

    return <>x : {ob.value.x}</>
}

export default App

What’s wrong?

Tags:

2

Answers


  1. 0

    If you haven’t read the instructions, you need to use the Babel plugin or add the useSignals() hook into every component. As you haven’t mentioned the Babel plugin, you’re probably missing it.

    Edit: You also cannot assign to properties, you must assign to ob.value alone. @preact/signals-react does not, out of the box, provide deep reactivity.

    ob.value = { ...ob.value, x: Math.random() };
    Login or Signup to reply.
  2. 0

    To trigger re-rendering with signals you need to update the value of the signal and not the property of the value.

    ob.value = { ...ob.value, x: Math.random() }
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search