act

ฟังก์ชันสำหรับ unit testing เพื่อจำลองการอัปเดต UI และรอให้ React อัปเดต DOM เสร็จสิ้น ใช้กับ React Testing Library เพื่อทดสอบคอมโพเนนต์ให้เหมือนการทำงานจริง

import { act } from 'react-dom/test-utils';
import { render, screen } from '@testing-library/react';
test('renders component', () => {
  act(() => {
    render(<MyComponent />);
  });
  expect(screen.getByText('Hello')).toBeInTheDocument();
});

cache

(React 18 experimental) ใช้แคชข้อมูลใน Server Components เพื่อลดการเรียกข้อมูลซ้ำ ป้องกันการ fetch ข้อมูลที่ไม่จำเป็นในระหว่างการ render

import { cache } from 'react';

const getData = cache(async (id) => {
  const res = await fetch(`https://api.example.com/data/${id}`);
  return res.json();
});

export async function MyComponent({ id }) {
  const data = await getData(id);
  return <div>{data.name}</div>;
}

captureOwnerStack

(API ภายใน, ไม่ใช่ public API) เก็บ stack trace ของคอมโพเนนต์ที่เป็นเจ้าของเพื่อ debug ข้อผิดพลาด ไม่แนะนำให้ใช้ในแอปทั่วไป

createContext

สร้าง Context object เพื่อแชร์ข้อมูลระหว่างคอมโพเนนต์โดยไม่ต้องส่ง props ผ่านทุกชั้น ใช้กับ Provider และ Consumer หรือ Hook useContext

import React, { createContext, useContext } from 'react';

const ThemeContext = createContext('light');

function App() {
  return (
    <ThemeContext.Provider value="dark">
      <MyComponent />
    </ThemeContext.Provider>
  );
}

function MyComponent() {
  const theme = useContext(ThemeContext);
  return <div>Theme: {theme}</div>;
}

lazy

ใช้สำหรับ lazy loading คอมโพเนนต์เพื่อโหลดโค้ดเฉพาะเมื่อจำเป็น ช่วยลดเวลาโหลดเริ่มต้น ใช้คู่กับ Suspense

import React, { lazy, Suspense } from 'react';

const LazyComponent = lazy(() => import('./LazyComponent'));

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <LazyComponent />
    </Suspense>
  );
}

memo

ป้องกันการ re-render คอมโพเนนต์ถ้า props ไม่เปลี่ยนแปลง ใช้เพื่อเพิ่มประสิทธิภาพในคอมโพเนนต์ที่ render บ่อย

import React, { memo } from 'react';

const MyComponent = memo(({ name }) => {
  console.log('Rendered');
  return <div>Hello, {name}</div>;
});

startTransition

(React 18) กำหนดการอัปเดตที่ไม่เร่งด่วนเพื่อให้ UI ตอบสนองได้ดีในระหว่างการอัปเดตหนัก เช่น การกรองข้อมูลขนาดใหญ่

import React, { useState, useTransition } from 'react';

function App() {
  const [query, setQuery] = useState('');
  const [isPending, startTransition] = useTransition();

  const handleChange = (e) => {
    startTransition(() => {
      setQuery(e.target.value);
    });
  };

  return (
    <div>
      <input onChange={handleChange} />
      {isPending ? 'Loading...' : <Results query={query} />}
    </div>
  );
}

use

(React 19 experimental) Hook สำหรับจัดการทรัพยากร เช่น Promises หรือ Context ใน Server Components ช่วยให้โค้ดสะอาดขึ้นเมื่อทำงานกับ asynchronous data

import { use } from 'react';

async function fetchData(id) {
  const res = await fetch(`https://api.example.com/data/${id}`);
  return res.json();
}

function MyComponent({ id }) {
  const data = use(fetchData(id));
  return <div>{data.name}</div>;
}