useState race condition
Hello, I have run across an issue related to updates to useState where updates to the state are not reflected in the SSR result seemingly if there is a navigation event straight after. This presumably is present in other situations too as it seems to be a race condition to do with settlement of the state updates.
I have created a simple playground demonstrating the issue. https://codesandbox.io/p/devbox/agitated-butterfly-s78k7s?file=/pages/finish.vue:4,11
If you navigate to the /start page it will redirect you to /finish and you will see the state is "not set". However I have put in a
callOnce (just to ensure it is only called once on SSR) an update of this string to another value. This is not serialised into the loaded /finish page. Adding a nextTick wait after the update sorts this on this simple reproduction but on a larger application it seems to be delayed further by something. I'm not sure if it is an issue or there is something more appropriate for us to wait against for this state to be settled before performing the navigation?1 Reply
Ah good idea. I'll give that a go. Thank you
Might it be worth an issue to look into a way to await settlement of the state value?
I'm not really saying it isnt doing its job but this scenario is an issue as you cannot mutate a state variable and know when you can perform an action such as a navigation as the state change is lost. I accept its not a typical scenario but an edge case that feels like there must be a possiblilty of detecting settlement of the state before performing some operations like this