#9: Opt in to automatic batching with createRoot, 2021
When we update to the new root API (
createRoot), we get performance improvements out-of-the-box.
Automatic batching is a performance improvement that reduces
Imagine an event handler that updates two pieces of state,
These state updates are batched and result in one re-render. But that changes if we call those updater functions outside of this function (think asynchronous
When we call updater functions outside of handler functions, we lose batching. Look at this slight alteration below where we wrap updater functions in a setTimeout.
These updates will not be batched.
This is both a permormance issue and and expectation problem.
Fortunately, React 18 fixes this. Now,
useState updater functions are automatically batched — no matter where they are called.
Because React 18 automatically batches all updates, you can safely remove
unstable_batchedUpdates. With the new root API, this function is a no-op.