Custom Hook là gì? Hãy nêu quy tắc đặt tên, cách chia sẻ logic giữa các component và phân tích một tình huống thực tế mà Junior hay mắc lỗi khi viết Custom Hook.

Question

Accepted Answer

Bản chất vấn đề
Custom Hook là một hàm JavaScript có tên bắt đầu bằng từ khóa use và có thể gọi các Hook khác bên trong nó. Mục đích chính của Custom Hook là trích xuất và tái sử dụng logic trạng thái (stateful logic) giữa các component khác nhau, tách biệt hoàn toàn phần UI và phần xử lý logic.
Lỗi phổ biến của lập trình viên Junior
Nhiều Junior hiểu lầm rằng Custom Hook chia sẻ dữ liệu giữa các component, giống như Redux hoặc Context. Thực tế, Custom Hook chỉ chia sẻ logic. Mỗi lần một component gọi Custom Hook, tất cả state và effect bên trong hook đó được nhân bản độc lập hoàn toàn (isolated).
Ví dụ Custom Hook thực tế
Dưới đây là Custom Hook quản lý trạng thái gọi API bất đồng bộ kèm trạng thái loading và error:
import { useState, useEffect } from 'react';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

useEffect(() => {
    let isMounted = true;
    setLoading(true);

fetch(url)
      .then((res) => {
        if (!res.ok) throw new Error('Không thể tải dữ liệu');
        return res.json();
      },
      (err) => {
        if (isMounted) setError(err.message);
      })
      .then((result) => {
        if (isMounted && result) {
          setData(result);
        }
      })
      .catch((err) => {
        if (isMounted) setError(err.message);
      })
      .finally(() => {
        if (isMounted) setLoading(false);
      });

return () => {
      isMounted = false;
    };
  }, [url]);

return { data, loading, error };
}

export default useFetch;
Kinh nghiệm thực chiến
Khi thiết kế Custom Hook cho dự án Enterprise, hãy luôn trả về một đối tượng chứa các thuộc tính tường minh thay vì trả về mảng (ví dụ trả về { data, loading } thay vì [data, loading]). Điều này giúp việc destructuring ở component sử dụng dễ dàng mở rộng thêm các thuộc tính mới trong tương lai mà không làm hỏng thứ tự gọi ở các component hiện tại.

Custom Hook là gì? Hãy nêu quy tắc đặt tên, cách chia sẻ logic giữa các component và phân tích một tình huống thực tế mà Junior hay mắc lỗi khi viết Custom Hook.

Bản chất vấn đề

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi React liên quan cùng chủ đề

Custom Hook là gì? Hãy nêu quy tắc đặt tên, cách chia sẻ logic giữa các component và phân tích một tình huống thực tế mà Junior hay mắc lỗi khi viết Custom Hook.

Bản chất vấn đề

Đăng nhập để xem câu trả lời

Mở Khóa Full Câu Trả Lời & Code Chuẩn Senior

Làm Chủ Phỏng Vấn & Nâng Cao Trình Độ Chuyên Nghiệp

Tải Tuyển Tập 100+ Câu Hỏi Phỏng Vấn Chuyên Sâu (PDF)

Cần Mentor Phỏng Vấn Thử 1-1 & Tối Ưu CV?

Kiểm Tra CV Chuẩn ATS Miễn Phí

Câu hỏi React liên quan cùng chủ đề