React Fiber Architecture là gì và cơ chế Concurrent Rendering trong React 18 giải quyết bài toán UI blocking như thế nào?

Question

**React Fiber** là kiến trúc Reconciler mới được viết lại của React. Ở bản cũ (Stack Reconciler), công việc reconciliation diễn ra đồng bộ và không thể bị ngắt (recursive), gây khựng UI (jank) khi render cây component lớn.

Fiber chia công việc render thành các đơn vị nhỏ (Fiber units of work) có th

Accepted Answer

**React Fiber** là kiến trúc Reconciler mới được viết lại của React. Ở bản cũ (Stack Reconciler), công việc reconciliation diễn ra đồng bộ và không thể bị ngắt (recursive), gây khựng UI (jank) khi render cây component lớn.

Fiber chia công việc render thành các đơn vị nhỏ (Fiber units of work) có thể tạm dừng, ưu tiên hoặc hủy bỏ (Interruptible Rendering).

**Concurrent Rendering trong React 18**:
- Cho phép React chuẩn bị nhiều phiên bản UI đồng thời ở background mà không làm đóng băng UI thread.
- **useTransition**: Đánh dấu cập nhật state nào có độ ưu tiên thấp (Non-urgent update), giữ cho input/typing mượt mà.
- **useDeferredValue**: Trì hoãn việc render lại một giá trị biến đổi cho tới khi luồng chính rảnh rỗi.

React Fiber Architecture là gì và cơ chế Concurrent Rendering trong React 18 giải quyết bài toán UI blocking như thế nào?

📌 Nội Dung Câu Hỏi

Đáp Án Chi Tiết Đã Bị Khóa

Câu Hỏi React Liên Quan

Khi nào nên sử dụng useMemo, useCallback và React.memo để tối ưu hiệu năng React?

Virtual DOM và thuật toán Diffing trong React hoạt động như thế nào?