Gradual Adoption Strategy of React 18

Update React Dependencies with the @next Version Tag

Replace Legacy Root API with New Root API

Use React 18's New Root API Alongside the Legacy Root API

Replace Legacy Root API's Callback Argument

Conditionally Render with Legacy Root API or New Root API

Opt-in to Automatic Batching with createRoot

Remove unstable_batchedUpdates Calls

Opt-out of Automatic Batching with ReactDOM.flushSync

Handle Class Component setState edge-case with ReactDOM.flushSync

Stay up-to-date on React 18 progress with the React Working Group

Migrate a Client-Side Application to React 18 Beta

React's legacy root API (`render`) took a callback function. React called this function once the post-render. With new streaming capabilities scheduled for React 18, this feature becomes unpredictable. Replace it with a ref callback — or one of these other strategies.

https://app.egghead.io/api/v1/lessons/react-replace-legacy-root-api-s-callback-argument/subtitles

Instructor: [0:01] ReactDOM's legacy root API allowed us to pass in a callback function that would get called as soon as React rendered. It would get passed in something like console.log("React rendered")

[0:12] If we try that with the new createRoot API, we get an error, "Warning -- Render does not support the second callback argument. To execute a site effect after rendering, declare it in a component body with useEffect()."

[0:26] There's several recommendations for how to solve this, but let's follow this warning first. Let's take out the second argument and move it into our apps component body with a useEffect(). Paste it in, and our error goes away. We also see this rendered out to the console.

[0:47] With a legacy root API, this only rendered the first time. To get parity with that, we would need to add an empty array to this useEffect(). Doesn't change the result except for the fact that it will only render on that first render.

[1:01] Of course, there's another option if you don't want to modify this component. Let's copy this, comment that out. We can use setTimeout() or requestIdleCallback() right after calling ReactDOM.createRoot(). window.setTimeout() -- handy little autocomplete there -- you change this to zero and paste in our function. Clear this that we don't need.

[1:27] What this does is a little bit different. Get the same result in this simplified app, but this version isn't precisely coordinated with React rendering. It will simply render as soon as React yields two low-priority updates.

[1:42] There's a third option that might come in handy to you if you need a ref to the DOM node that React rendered to. Here, we can provide a callback as a prop, take the ref as an argument, and log it out, ref.tagName.

[2:00] On the component side, we take that callback as a prop and use ref on this React element. Save, refresh, and we have access to that DOM element that React rendered.

Replace Legacy Root API's Callback Argument

Share this video with your friends

Course

Migrate a Client-Side Application to React 18 Beta