[Reac] React 18

Replace Legacy Root API with New Root API

ReactDOM.createRoot(document.getElementById("root")).render(<App />);

 

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

Behavior of each type of API for React 17 and 18:

let root1 = document.getElementById("root");
let root2 = document.getElementById("root-2");

ReactDOM.createRoot(root1).render(<App root="18" />);
ReactDOM.render(<App root="17" />, root2)

 

Replace Legacy Root API's Callback Argument

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.

There are several ways to fix the previous warning. First one is by using useEffect

function App() {
   React.useEffect(() => console.log("React rendered"), [])
   return <div> Hello, React! </div>
}

we can also use callback function:

ReactDOM.createRoot(root).render(
   <App callback={(ref) => console.log(ref.tagName)} />
   );

function App({ callback }) {
   return <div ref={callback}> Hello, React! </div>
}

 

Conditionally Render with Legacy Root API or New Root API

const REACT_18 = true; 

if (REACT_18) {
   ReactDOM.createRoot(root).render(<App />);
} else {
   ReactDOM.render(<App />, root);
}

 

Opt-in to Automatic Batching with createRoot

In previous versions of React, state update batching only happened inside of event handlers. In React 18, all updates are batched, regardless of when or where they are called. Opt into automatic batching with createRoot.

function App() {
    let [count, updateCount] = React.useState(1);
    let [isOdd, updateIsOdd] = React.useState(true);

    function handleClick() {
        setTimeout(() => {
            updateCount((count) => count + 1);
            updateIsOdd((oddness) => !oddness);
        }, 0);
    }

    console.count("re-rendered");

    return (
        <div>
            <button type="button" onClick={handleClick}>
                {count} {isOdd.toString()}
            </button>
        </div>
    );
}

In v17, each time button was clicked, will console log two times. This is because we call the update function in setTimeout.

If we did following, then it only log once

    function handleClick() {
       updateCount((count) => count + 1);
       updateIsOdd((oddness) => !oddness);
    }

But in v18 the problem was solved.

 

Remove unstable_batchedUpdates Calls

React 17 exposes an undocumented API named unstable_batchedUpdates. It batches multiple useState update calls — inside of asynchronous callbacks — and reduces extraneous renders.

In React 18, all useState updates are batched, making unstable_batchedUpdates inert. Remove all uses of unstable_batchedUpdates.

 

Opt-out of Automatic Batching with ReactDOM.flushSync

In React 18, useState update calls are batched for improved performance. A new API — ReactDOM.flushSync — lets us selectively escape batching. This option is useful when reading the DOM after state changes. Use ReactDOM.flushSync to exempt specific state updates from batching.

ReactDOM.flushSync(() => {
    updateCount((count) => count + 1)
});
updateIsOdd((oddness) =>!oddness)