React Life Cycle (Hooks era)

Sơ đồ trực quan vòng đời function component thời hooks. Mũi tên thể hiện thứ tự React thực thi giữa các pha.

Render phase có thể bị React tạm dừng / huỷ / chạy lại. Vì vậy:

• Render phải pure — không side-effect (đừng fetch hay setState trong body).
• Chỉ commit phase mới chắc chắn chạy 1 lần và đồng bộ.
• useTransition/useDeferredValue đánh dấu update có thể bị gián đoạn.

Sơ đồ tĩnh cho class component với cùng style 3 cột để bạn so sánh trực tiếp với diagram hooks ở trên.

Component dưới đây log từng giai đoạn ra console — chạy thử để thấy thứ tự thực thi thực tế giữa render, commit, useLayoutEffect và useEffect.

tsx
function Counter({ step }: { step: number }) {
  const [count, setCount] = useState(0);
  console.log('1. Render', { count, step });

  useLayoutEffect(() => {
    console.log('3. useLayoutEffect (sync, trước paint)');
    return () => console.log('   ↳ cleanup useLayoutEffect');
  }, [count]);

  useEffect(() => {
    console.log('4. useEffect (async, sau paint)');
    const id = setInterval(() => setCount((c) => c + step), 1000);
    return () => {
      console.log('   ↳ cleanup useEffect (interval)');
      clearInterval(id);
    };
  }, [step]);

  // 2. React commit DOM ở đây (giữa render và effect)
  return <p>Count: {count}</p>;
}

useEffect chạy sau khi browser paint nên user có thể nhìn thấy 1 frame "trung gian" trước khi effect cập nhật DOM. useLayoutEffect chạy đồng bộ trước paint → tránh nhấp nháy nhưng chặn render.

tsx
// Tooltip cần đo kích thước rồi tự định vị — useEffect sẽ nhấp nháy
function Tooltip({ targetRect, children }: Props) {
  const ref = useRef<HTMLDivElement>(null);
  const [top, setTop] = useState(0);

  useLayoutEffect(() => {
    const { height } = ref.current!.getBoundingClientRect();
    setTop(targetRect.top - height - 8);   // sync trước paint → 0 nhấp nháy
  }, [targetRect]);

  return <div ref={ref} style={{ top }}>{children}</div>;
}

Trong dev, React cố tình mount → unmount → mount lại 1 lần để buộc bạn viết cleanup đúng. Production KHÔNG bị.

tsx
useEffect(() => {
  console.log('connect');
  const conn = chat.connect();
  return () => {
    console.log('disconnect');
    conn.disconnect();
  };
}, []);

// Dev console:
// connect
// disconnect    ← React unmount giả lập
// connect       ← mount lại
// → nếu thiếu cleanup, bạn sẽ có 2 connection sống song song

• use(promise) — đọc Promise/Context trong render, tích hợp Suspense. Thay nhiều case useEffect + setState để fetch.
• useActionState(action, initial) — quản lý state cho form action async, kèm pending.
• useFormStatus() — đọc trạng thái pending của form cha trong button submit.
• useOptimistic(state, reducer) — UI lạc quan trong khi action đang chạy.
• Auto memoization (React Compiler) — sẽ giảm nhu cầu useMemo/useCallback.

tsx
useEffect(() => {
  // Mount + mỗi khi deps thay đổi (Update)
  const id = setInterval(tick, 1000);
  return () => clearInterval(id);   // Cleanup: chạy khi Unmount HOẶC trước lần effect mới
}, [deps]);

Mount:
  1. Khởi tạo state (useState/useReducer)
  2. Render JSX
  3. Commit vào DOM
  4. useLayoutEffect (sync)
  5. Paint
  6. useEffect (async)

Update:
  1. State/props thay đổi → re-render
  2. Diff & commit
  3. Cleanup effect cũ → useEffect mới (nếu deps đổi)

Unmount:
  1. Cleanup tất cả effect (child trước, parent sau)

tsx
useState(initial)         // state đơn giản
useReducer(reducer, init) // state phức tạp / nhiều action
useRef(initial)           // box giá trị, không re-render
useMemo(fn, [deps])       // cache compute đắt
useCallback(fn, [deps])   // cache function reference
useTransition()           // đánh dấu update không cấp bách
useDeferredValue(value)   // hoãn 1 giá trị tới khi rảnh
useId()                   // id ổn định cho a11y
useSyncExternalStore()    // đăng ký store ngoài React