Performance Issue : ReactDom.render vs ReactDOM.createRoot

Issue không nêu tệp tài liệu, test hoặc entry point nào. Trước tiên, hãy xác định ReactDOM.render và ReactDOM.createRoot nên được ghi tài liệu ở đâu, sau đó xác nhận phạm vi dự kiến và các tiêu chí nghiệm thu trước khi thực hiện thay đổi.

The conventional technique for rendering a React component to a particular DOM element. The root of the app is
ReactDOM.render. Consider this:

ReactDOM.render(<App />, document.getElementById('root'));

In this instance, the component is being rendered to the

element on the page.

createRoot : In order to render components in a new way with better performance and better support for concurrent mode, React 17 introduced a new method called createRoot. The fundamental operation of createRoot is similar to that of ReactDOM.render, except that it creates a new root container and returns a reference to it rather than rendering to a particular DOM node. Then, you can render your components to the root container using the returned reference. For instance:

const root = ReactDOM.createRoot(document.getElementById('root')); root.render(<App />);

In conclusion, the primary distinction between createRoot and ReactDOM.render is that createRoot generates a new root container for rendering components, whereas ReactDOM.render renders components directly to a given DOM element.