#12: What have we learned this week?, 2021

This week we’ve learned a how to migrate client-side apps to React 18. We used the new root API, replaced the legacy root callback two ways, opted in to batched state updates, and opted out of batching where necessary.

I’d like to test your knowledge with a few questions:

1. In React 17 some state updates are batched while others weren’t. Describe — in your own words — when you can’t assume batching to happen
2. What unstable API was used in React 17 to ensure that all state updates are batched?
3. What new ReactDOM API is used to opt out of automatic batching in React 18?
4. What is one of the two recommended ways to run a function after React has rendered?

If you feel like you didn’t retain everything, check out my egghead video course: Migrate a Client-Side App to React 18 beta.
We cover everything we’ve covered with some additional tips on class components.

🐦 chantastic

P.S.
Let me know how you’re holding up!
Hit reply to this email and let me know what you think so far.

Answers:

1. In React 17, state updaters called directly in an event handler will always be batched. State updaters called outside of event handlers will not be batched. This can happen with async functions like fetch and setTimeout.
2. unstable_batchedUpdates
3. ReactDOM.flushSync
4. setTimeout/requestIdleCallback or callback prop