createPortal

ใช้สำหรับ render children ไปยัง DOM node ที่อยู่นอก hierarchy ของ parent component

import { createPortal } from 'react-dom';

function Modal({ children }) {
  return createPortal(
    children,
    document.getElementById('modal-root')
  );
}

flushSync

ใช้สำหรับบังคับให้ React ทำการ flush การเปลี่ยนแปลงและอัปเดต DOM ทันที

import { flushSync } from 'react-dom';

flushSync(() => {
  setCount(count => count + 1);
});

preconnect

ใช้สำหรับเริ่มการเชื่อมต่อไปยัง domain ก่อนที่จะมีการร้องขอจริง

import { preconnect } from 'react-dom';

preconnect("https://example.com", { crossOrigin: "anonymous" });

prefetchDNS

ใช้สำหรับทำ DNS lookup ล่วงหน้าสำหรับ domain ที่ระบุ

import { prefetchDNS } from 'react-dom';

prefetchDNS("https://example.com");

preinit

ใช้สำหรับโหลดและ initialize ทรัพยากรล่วงหน้า

import { preinit } from 'react-dom';

preinit("https://example.com/style.css", { as: "style" });

preinitModule

ใช้สำหรับโหลดและ initialize module script ล่วงหน้า

import { preinitModule } from 'react-dom';

preinitModule("https://example.com/module.js");

preload

ใช้สำหรับโหลดทรัพยากรล่วงหน้าโดยไม่ execute

import { preload } from 'react-dom';

preload("https://example.com/font.woff2", { as: "font" });

preloadModule

ใช้สำหรับโหลด module script ล่วงหน้าโดยไม่ execute

import { preloadModule } from 'react-dom';

preloadModule("https://example.com/module.js");