useState causing refresh
Unanswered
mattbrailsford posted this in #help-forum
Hey folks,
I have an async app route defined that when hit, fetches a cart and passes it to a child component that is flagged as
If I push this functionality into a component deeper it doesn't seem to have this issue and it works as expected.
Anyone know what could be going on? Am I not understanding something?
I have an async app route defined that when hit, fetches a cart and passes it to a child component that is flagged as
use client because I need to use useState to capture form input and then use that to update the cart. The problem I have is that if I use useState in this component and then have for example an input field with onChange={(e) setMyState(e.target.value)} whenever I change the input, it actually causes the whole screen to flash and the current route to seemingly refresh.If I push this functionality into a component deeper it doesn't seem to have this issue and it works as expected.
Anyone know what could be going on? Am I not understanding something?
4 Replies
Looking in my root layout, I have a
<Suspense> tag and it appears that it is this that is causing the "flash" as it switches to the fallback state. But I'm unsure why the useState in the child component is causing this? 🤔Spectacled bear
This would require some code in order to be evident what the issue is
European sprat
Need code but it sounds like if you're updating the cart on change with a fetch, isn't the suspense fallback expected?
I’m not currently at the stage of updating the cart yet. I’m just capturing the updates in a state until all the details have been captured then I’ll post them in one go. Right now with an onChange on an input updating the state, any change in the field (every keypress) is causing a refresh.
I’ll have to try and break it down into a minimal example tomorrow.
I’ll have to try and break it down into a minimal example tomorrow.