[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)