React state with next js and chakra

[amazingphilippe]

I'm having difficulties with React's useState and useContext hooks while using Chakra's Slider component. It seems like the state isn't being updated onChange. I wish I could explain it more, but I can't...

I've done a test using Chakra's CRA template, and useSate is behaving as it should. However, the same code running within next-js seem to break the state. See the working example and the broken example. Same useState hook and chakra components, different results...

The issue

Lets say we have two sliders that both control two distinct values in a state object. Whenever the slider is used, values in the state object get reset to their initial values. You can see this in the value outputs in the broken example.

I'm wondering if there's something up with next-js, or if I'm doing something incorrectly while using next-js. Has anybody encountered a similar issue?

Why I want to use next-js

The solution might seem obvious: Just use CRA. I wanted to use next-js to build documentation around my stuff. Have pages for single-page-apps, but also combine it with some documentation, and that seems easier to manage using next and mdx. the documentation I had in mind was a bit more interactive, so I wanted to use the same chakra-ui components in my mdx files. It would also be more flexible than using storybook and CRA.

Anyhow, thank you for reading this. If this doesn't belong here, please point me somewhere else!

[ljosberinn]

Could you please file an issue instead? There's definitely something going on here, this should work just fine in Next.js too.

[amazingphilippe]

I've written up the issue, but I can't seem to create it. The button is disabled. Is there anything I should conform to that I might be unaware of?

[ljosberinn]

this button is disabled? 🤔 I've never seen that behaviour and I don't think we can disable it

[amazingphilippe]

this one 🙂

[amazingphilippe]

I'm so sorry. I forgot to set a title... omg this is embarrassing 🤦

Created issue #2564