Differing values in component

[hammo92]

I'm new to Jotai, apologies if this is a basic question.

When using an atom in a component I'm getting differing values inside and outside of the onChange function. The value outside the function updates with the slider, but inside the function doesn't. This is using Next JS if that makes any difference.

:

[Thisen]

useAtom works similarly to useState. It's asynchronous and therefore state won't be changed until the next render. This means you can't expect to get the state value, right after you've set it.

[hammo92]

wouldn't this still mean that both the console.log inside the onChange function and outside of the onChange function would return the same result? What is confusing is that the value of the atom inside the onChange function never updates.

[Thisen]

wouldn't this still mean that both the console.log inside the onChange function and outside of the onChange function would return the same result?

No, not exactly. setStrokeWidth is asynchronous and the new value will be set on the next render.

What is confusing is that the value of the atom inside the onChange function never updates.

I can't speak to the exact case, since I don't know the <Slider /> component, but I'm assuming it's called multiple times before the render has occurred. Therefore you won't see a different value. As mentioned, the value is updated on render.

[hammo92]

The problem seems to be with the component, as switching it out for a standard range input doesn't have the same issue. Should probably have tested that first! Thanks for the help

[Thisen]

Happy to help 🎉