learned from https://egghead.io/courses/migrate-a-client-side-application-to-react-18-beta-9379f0d1
Install #
npm install react@rc react-dom@rc
The new way to create Dom
const root = document.getElementById("root")
ReactDOM.createRoot(root).render(<App />)
React use ReactDOM.createRoot(root).render(<App />) instead of ReactDOM.render(<App />, root)
New Improvement
Opt-in to Automatic Batching with createRoot
Less render times while it has two useStates need to update especially using setTimeOut and fetch. Here is the example:
If it uses React 17, it will render twice while landing this page or clicking the button.
If it uses React 18, it will only render once while landing this page or clicking the button.
React 18 provide a way to force re-rendering the page first -- ReactDOM.flushSync(). You will see the next picture is render twice while clicking the button.
