Nếu Virtual DOM là bản vẽ kiến trúc, thì Fiber chính là người kỹ sư điều phối công việc thi công.
1. Vấn đề của Stack Reconciler (React < 16)
Trong các phiên bản cũ, React sử dụng thuật toán duyệt cây theo kiểu ngăn xếp (Stack). Khi bắt đầu render, nó sẽ chạy một lèo từ root đến leaf mà không dừng lại.
- Hệ quả: Nếu cây component quá lớn (ví dụ list 10,000 dòng), trình duyệt sẽ bị Main Thread Block. Người dùng không thể click, không thể gõ phím vì trình duyệt đang bận "vẽ" UI. Đây là hiện tượng "Jank" (giật lag).
2. Fiber là gì? (Bộ máy điều phối)
Fiber là một kiến trúc Scheduling (Lập lịch). Thay vì render một khối khổng lồ, React chia nhỏ quá trình render thành các đơn vị công việc cực nhỏ gọi là Fibers.
Mỗi Fiber là một object JavaScript chứa thông tin về một component, input của nó và output của nó. Fiber cho phép React thực hiện Time Slicing (Cắt lát thời gian):
- Tạm dừng công việc đang làm nếu có tác vụ quan trọng hơn.
- Tiếp tục công việc đó sau khi tác vụ ưu tiên đã xong.
- Bỏ qua công việc cũ nếu dữ liệu đã thay đổi mới hơn.
3. Hoạt động theo 2 Giai đoạn (The 2 Phases)
Đây là bản chất cốt lõi mà mọi Senior cần biết để tránh lỗi side-effect:
Phase 1: Render / Reconciliation (Asynchronous)
- Nhiệm vụ: React đi qua cây Fiber, so sánh cũ/mới và đánh dấu các thay đổi (Insert, Update, Delete).
- Tính chất: Có thể bị ngắt quãng (Interruptible). React có thể dừng render giữa chừng nếu người dùng gõ phím.
- Lưu ý: Vì phase này có thể chạy nhiều lần, bạn không bao giờ được viết side-effect (gọi API, đổi biến global) trong body của function component.
Phase 2: Commit (Synchronous)
- Nhiệm vụ: React áp dụng tất cả các "bản vá" đã tính toán ở Phase 1 vào Real DOM.
- Tính chất: Không thể bị ngắt quãng (Uninterruptible). UI phải được cập nhật đồng nhất một lúc để tránh bị "rách" giao diện.
- Thời điểm: Đây là lúc
useEffectvàuseLayoutEffectđược kích hoạt.
4. Nhìn thấu useTransition và useDeferredValue
Nhờ Fiber, React 18 giới thiệu Concurrent Features.
const [isPending, startTransition] = useTransition();
// Khi dùng startTransition, bạn đang nói với Fiber:
// "Nhiệm vụ này có độ ưu tiên thấp (Low Priority),
// hãy render nó khi trình duyệt rảnh, đừng block input của user."
startTransition(() => {
setListData(bigData);
});Kết luận
Bản chất của React từ v16 trở đi không còn là một thư viện render thuần túy, mà là một Hệ điều hành cho UI. Nó quản lý tài nguyên (CPU thời gian) để đảm bảo tác vụ của người dùng (gõ phím, click) luôn được ưu tiên hàng đầu, mang lại cảm giác ứng dụng cực kỳ nhạy (Highly Responsive).