React HooksExplained

24 of 24 rows

Hook↕	Công dụng↕	Dùng cho↕
State
⤢useState	Giữ một giá trị duy nhất mà khi thay đổi sẽ kích hoạt render lại.	State cục bộ của component: trường form, công tắc bật/tắt, bộ đếm.
⤢useReducer	Giữ state được điều khiển bởi một action reducer, giống như một store nhỏ.	State có nhiều trường liên quan với nhau hoặc các chuyển đổi phức tạp.
⤢useRef	Giữ một giá trị có thể thay đổi mà KHÔNG kích hoạt render lại.	Bộ chứa mutable, timer, và truy cập DOM trực tiếp qua .current.
Effects
⤢useEffect	Chạy một side effect sau render, kèm hàm cleanup tùy chọn.	Lấy dữ liệu, đăng ký subscription và đồng bộ với hệ thống bên ngoài.
⤢Effect cleanup	Hàm mà effect trả về sẽ chạy trước effect tiếp theo và chạy lần nữa khi unmount.	Hủy subscription và timer, hoặc hủy một fetch đang thực thi.
⤢useLayoutEffect	Giống useEffect nhưng kích hoạt đồng bộ sau khi DOM thay đổi.	Đọc hoặc ghi layout trước khi trình duyệt vẽ (toast, tooltip).
⤢useEffect vs handlers	Event handler chạy để phản hồi hành động của người dùng; effect chạy sau render để đồng bộ.	Logic do người dùng gây ra thuộc về handler, logic do render gây ra thuộc về effect.
⤢StrictMode	Trong môi trường phát triển, mount component hai lần để effect chạy, dọn dẹp rồi chạy lại.	Phát hiện subscription trùng lặp và thiếu cleanup trước khi lên production.
Hiệu năng
⤢useMemo	Cache giá trị đã tính toán cho đến khi dependency thay đổi.	Tránh tính toán lại tốn kém giữa các lần render; cố ý thay đổi một giá trị trong deps khi muốn phá cache.
⤢useCallback	Cache tham chiếu hàm cho đến khi dependency thay đổi.	Callback ổn định được truyền cho component con đã memo hoặc dùng làm dependency.
⤢React.memo	Bỏ qua render lại của component có props không đổi.	Component con nặng; truyền hàm so sánh làm đối số thứ hai khi so sánh nông chưa đủ (là HOC, không phải hook).
Context và handle bên ngoài
⤢useContext	Đọc giá trị context mà không cần prop drilling.	Theme, locale hoặc người dùng đã xác thực, dùng chung trong cả cây.
⤢useImperativeHandle	Tùy chỉnh instance mà component cha nhìn thấy qua ref.	Mở một API thu hẹp từ component con qua forwardRef.
Concurrency và các hook khác
⤢useTransition	Đánh dấu một cập nhật state là không khẩn cấp để giao diện vẫn phản hồi nhanh.	Giữ input mượt mà trong khi danh sách nặng render lại.
⤢useDeferredValue	Trì hoãn một giá trị để các cập nhật có thể bị gián đoạn.	Debounce render tốn kém mà không cần timer.
⤢useId	Sinh id duy nhất và ổn định cho các thuộc tính accessibility.	Nối label với input giữa render server và render client.
⤢use()	Đọc promise hoặc context trong lúc render; là hook duy nhất có thể gọi có điều kiện.	Mở promise bằng Suspense, hoặc đọc context bên trong early return.
⤢useActionState	Giữ state được điều khiển bởi form action, kèm cờ pending.	Các lần submit form trả về lỗi hoặc state cập nhật để hiển thị trực tiếp.
⤢useOptimistic	Render ngay một giá trị lạc quan, rồi quay về state thật khi action hoàn tất.	Hiển thị lượt thích hoặc tin nhắn đã gửi trong khi request tới server đang thực thi.
⤢useFormStatus	Đọc trạng thái pending của <form> bao quanh, không cần props.	Nút submit tự vô hiệu hóa khi form cha đang submit.
⤢useSyncExternalStore	Đăng ký với store ngoài React và đọc một snapshot nhất quán.	API trình duyệt như trạng thái online, hoặc state store của bên thứ ba.
⤢useInsertionEffect	Chạy trước layout effect, dành riêng cho việc chèn quy tắc CSS-in-JS.	Thư viện style phải chèn quy tắc trước khi layout được đọc.
⤢useDebugValue	Hiển thị nhãn tùy chỉnh cho state nội bộ của hook trong React DevTools.	Gắn nhãn cho những gì custom hook đang giữ khi debug.
⤢Custom hooks (use*)	Hook do bạn tự viết, kết hợp các hook có sẵn để chia sẻ logic.	Hành vi có state và tái sử dụng được, như useFetch hoặc useMediaQuery.