createRoot

(React 18) สร้าง root สำหรับการ render แอปพลิเคชัน React ใน DOM ใช้แทน ReactDOM.render เพื่อรองรับคุณสมบัติใหม่ เช่น Concurrent Rendering

import { createRoot } from 'react-dom/client';
import App from './App';

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

hydrateRoot

(React 18) ใช้สำหรับ hydrate เนื้อหา HTML ที่ถูก render ฝั่งเซิร์ฟเวอร์ (SSR) หรือ static site generation (SSG) เพื่อเพิ่มการโต้ตอบของ React ในฝั่งไคลเอนต์

import { hydrateRoot } from 'react-dom/client';
import App from './App';

const root = hydrateRoot(document.getElementById('root'), <App />);