createPortal

สร้าง portal เพื่อ render คอมโพเนนต์ใน DOM node ที่อยู่นอก hierarchy ของ parent component เช่น สำหรับ modal หรือ tooltip

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    <div className="modal">{children}</div>,
    document.getElementById('modal-root')
  );
}

function App() {
  return (
    <div>
      <Modal>Modal Content</Modal>
    </div>
  );
}

flushSync

บังคับให้ React อัปเดต DOM แบบ synchronous ทันที ใช้เมื่อต้องการให้การอัปเดต state หรือ DOM เสร็จสมบูรณ์ก่อนดำเนินการต่อ

import { useState } from 'react';
import { flushSync } from 'react-dom';

function MyComponent() {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    flushSync(() => {
      setCount(count + 1);
    });
    console.log(document.getElementById('count').textContent); // Reflects updated DOM
  };

  return (
    <div>
      <div id="count">{count}</div>
      <button onClick={handleClick}>Increment</button>
    </div>
  );
}

preconnect

(React 19) สร้างการเชื่อมต่อล่วงหน้ากับเซิร์ฟเวอร์เพื่อลด latency ในการโหลดทรัพยากร เช่น API หรือ CDN

import { preconnect } from 'react-dom';

function App() {
  preconnect('https://api.example.com');
  return <div>Ready to fetch from API</div>;
}

prefetchDNS

(React 19) ทำ DNS resolution ล่วงหน้าสำหรับ URL ที่อาจใช้ในอนาคต เพื่อลดเวลาในการเชื่อมต่อเมื่อมีการร้องขอจริง

import { prefetchDNS } from 'react-dom';

function App() {
  prefetchDNS('https://api.example.com');
  return <div>Pre-resolved DNS</div>;
}

preinit

(React 19) โหลดและเริ่มต้นทรัพยากร เช่น stylesheet หรือ script ทันทีเมื่อ render เหมาะสำหรับทรัพยากรที่สำคัญต่อการแสดงผล

import { preinit } from 'react-dom';

function App() {
  preinit('https://example.com/style.css', { as: 'style' });
  return <div>Stylesheet preloaded</div>;
}

preinitModule

(React 19) เริ่มต้น ES Module ล่วงหน้าเพื่อให้พร้อมใช้งานทันทีเมื่อต้องการ เหมาะสำหรับ JavaScript modules ที่สำคัญ

import { preinitModule } from 'react-dom';

function App() {
  preinitModule('https://example.com/module.js');
  return <div>Module preinitialized</div>;
}

preload

(React 19) โหลดทรัพยากรล่วงหน้า เช่น รูปภาพหรือไฟล์อื่น ๆ โดยไม่เริ่มต้นใช้งานทันที ช่วยลดเวลาโหลดเมื่อใช้งานจริง

import { preload } from 'react-dom';

function App() {
  preload('https://example.com/image.jpg', { as: 'image' });
  return <img src="https://example.com/image.jpg" alt="Preloaded" />;
}

preloadModule

(React 19) โหลด ES Module ล่วงหน้าโดยไม่เริ่มต้นใช้งาน ช่วยให้ module พร้อมเมื่อมีการ import ในภายหลัง

import { preloadModule } from 'react-dom';

function App() {
  preloadModule('https://example.com/module.js');
  return <div>Module preloaded</div>;
}