createRoot

ใช้สำหรับสร้าง root ของ React application สำหรับ client-side rendering

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

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

hydrateRoot

ใช้สำหรับ "hydrate" เนื้อหาที่ถูก render มาจาก server-side rendering

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

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

ทั้งสอง API นี้เป็นส่วนสำคัญของ React 18 และการใช้งาน Concurrent Mode ผมจะอธิบายเพิ่มเติมเล็กน้อย:

1. createRoot:

   • ใช้แทน ReactDOM.render ในแอปพลิเคชัน React รุ่นใหม่
   • รองรับ Concurrent Mode ซึ่งช่วยให้การ rendering มีความยืดหยุ่นมากขึ้น
   • สามารถใช้ฟีเจอร์ใหม่ๆ เช่น useTransition และ useDeferredValue ได้

2. hydrateRoot:

   • ใช้แทน ReactDOM.hydrate สำหรับแอปพลิเคชันที่ใช้ Server-Side Rendering (SSR)
   • ทำงานโดยการเพิ่ม event listeners และสถานะให้กับ HTML ที่ถูก render มาจาก server
   • ช่วยให้แอปพลิเคชันสามารถโต้ตอบได้หลังจากที่โหลดเนื้อหาเริ่มต้นจาก server

ทั้งสอง API นี้เป็นส่วนสำคัญในการพัฒนา React application สมัยใหม่ โดยเฉพาะอย่างยิ่งเมื่อต้องการใช้ประโยชน์จากฟีเจอร์ใหม่ๆ ของ React 18