Custom Hook là một hàm JavaScript thông thường, nhưng tên của nó bắt đầu bằng use và bên trong có thể gọi các Hook khác của React (như useState, useEffect, useContext, v.v.).
Tại sao nên sử dụng Custom Hook?
- Tái sử dụng Logic: Tách được logic có trạng thái (stateful logic) từ một component để có thể dùng lại ở nhiều component, mỗi nơi giữ state riêng.
- Giữ cho Component sạch sẽ: Component chỉ nên tập trung vào việc render UI. Tách logic phức tạp vào Custom Hook giúp code dễ đọc và dễ bảo trì hơn.
- Kiểm thử dễ dàng hơn: Logic được đóng gói trong một hàm độc lập (hook) nên test riêng được.
Ví dụ: Thay vì viết logic fetch API lặp đi lặp lại ở nhiều nơi, bạn có thể tạo một hook useFetch(url) trả về { data, loading, error }.