We Don’t Know How React State Hooks Work - Adam Klein, React Advanced 2021

React

Here is the meta description: Uncover the intricacies of React state updates, including the linked list of hooks, asynchronous behavior, and batching of event handlers, to ensure predictable and performant state management.

Key takeaways

React’s state update queue is a linked list of hooks.
When calling useState, React runs the updater function and only caches the results inside the update queue.
Every update to a hook will be queued.
State updates may be asynchronous.
React performs event handlers in a batch, which means a single event handler may trigger multiple re-renders.
When calling useState during render, React checks if there are any actions in the queue, and if there are, it will update the state before triggering a re-render.
The state update queue is not guarantee to be processed immediately, and React may delay the rendering of our components in favor of a more prioritized task.
React’s batch function internally executes the queued updates and event handlers in a single pass, which may occur asynchronously.
We should focus on learning about state updates and their queue, and how to work with them effectively.
Upgrading to new React versions is recommended to ensure better support for state updates and batching.
State updates can be predictable and performant if we understand how they work under the hood.
React’s useState is not truly asynchronous in terms of the event loop, but it’s deferred.
When using useState, React assumes that the next time it will return a new value.
We should focus on learning how to debug and identify issues with state updates.
React’s state updates are not truly asynchronous, but they are deferred.

We Don’t Know How React State Hooks Work - Adam Klein, React Advanced 2021

More talks