Learn React 18 Beta - 1

learned from egghead.io/courses/migrate-a-client-side-ap..

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.