How does this example from React documentation work?
Hello guys, I'm reading the new React documentation but I don't understand a little thing. In the step 5 in this page https://react.dev/learn/reacting-to-input-with-state the
handleSubmit function updates the status state 2 times (one at the top level and one inside try/catch). How is that possible? Shouldn't state be updated with just the last value?
I tried to add a new counter state and increment it by 1 every time that setStatus is called, and it actually gets incremented only by one per submit, as I expected... so why is setStatus different?Reacting to Input with State – React
The library for web and native user interfaces
3 Replies
We're talking about https://react.dev/learn/reacting-to-input-with-state#step-5-connect-the-event-handlers-to-set-state ?
There's an
await between the first update of status = 'submitting' and the second of status = 'success'.
That await will release control of execution and allow other processes to run, including, potentially, a rerender of the component with status = 'submitting'.so there's a chance that the
submitting status is never committed to React?It will be written to the state.
If the
await is short enough, it may never be rendered in the browser.