Module 04 — Hooks Deep Dive

🎯 MỤC TIÊU HỌC TẬP

• Hiểu Rules of Hooks và lý do kỹ thuật đằng sau (linked list, call order)
• Nắm vững cơ chế useState: batching, functional updates, lazy initializer, stale closure trap
• Thành thạo useEffect: dependency comparison (Object.is), cleanup timing, xử lý race condition với AbortController
• Biết khi nào dùng useCallback và useMemo — và quan trọng hơn: khi nào KHÔNG dùng
• Sử dụng useRef cho mutable container, DOM reference, lưu interval ID, previous value
• So sánh useReducer vs useState cho complex state logic
• Hiểu vấn đề re-render của useContext và cách tối ưu bằng context splitting
• Phân biệt useLayoutEffect vs useEffect về timing
• Sử dụng useImperativeHandle + forwardRef để expose custom API
• Tự viết được ít nhất 5 custom hooks từ scratch

📖 HƯỚNG DẪN HỌC

⚡ ÔN NHANH

🧭 Vòng lặp học module này

📚 LÝ THUYẾT CHI TIẾT

1. Rules of Hooks — TẠI SAO phải tuân thủ?

function BadComponent({ showName }) {
  const [age, setAge] = useState(0);

  if (showName) {
    const [name, setName] = useState("React");
  }

  const [color, setColor] = useState("blue");
  return null;
}

function GoodComponent({ showName }) {
  const [age, setAge] = useState(0);
  const [name, setName] = useState("React");
  const [color, setColor] = useState("blue");

  return null;
}

2. useState — Chi tiết cơ chế hoạt động

2.1 Batching

function Counter() {
  const [count, setCount] = useState(0);
  const [flag, setFlag] = useState(false);

  function handleClick() {
    setCount(c => c + 1);
    setFlag(f => !f);
  }

  return (
    <button onClick={handleClick}>
      {count} - {String(flag)}
    </button>
  );
}

Dù gọi 2 setState, React chỉ re-render 1 lần. Trước React 18, batching chỉ hoạt động trong event handlers.

2.2 Functional Updates

setCount(count + 1);
setCount(count + 1);
setCount(count + 1);

Ba dòng trên chỉ tăng count lên 1 (không phải 3) vì cả 3 đều đọc cùng giá trị count từ closure hiện tại.

setCount(prev => prev + 1);
setCount(prev => prev + 1);
setCount(prev => prev + 1);

Functional update nhận prev là giá trị mới nhất trong queue → kết quả đúng: count tăng 3.

2.3 Lazy Initializer

const [data, setData] = useState(() => {
  const saved = localStorage.getItem("form-data");
  return saved ? JSON.parse(saved) : { name: "", email: "" };
});

Nếu viết useState(JSON.parse(localStorage.getItem("form-data"))) thì mỗi lần render đều gọi parse — lãng phí performance. Lazy initializer giải quyết vấn đề này.

2.4 Stale Closure Trap

function StaleClosureDemo() {
  const [count, setCount] = useState(0);

  function handleAlertClick() {
    setTimeout(() => {
      alert("Count: " + count);
    }, 3000);
  }

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(count + 1)}>+1</button>
      <button onClick={handleAlertClick}>Alert</button>
    </div>
  );
}

Nếu click "+1" ba lần rồi click "Alert", sau 3 giây alert sẽ hiện "Count: 3" (giá trị tại thời điểm click Alert). Nếu click "Alert" trước, rồi click "+1" ba lần, alert sẽ hiện "Count: 0" — vì setTimeout capture giá trị count tại thời điểm callback được tạo.

3. useEffect — Cơ chế Dependency & Cleanup

3.1 Dependency Comparison: Object.is

Object.is(3, 3);
Object.is("abc", "abc");
Object.is(NaN, NaN);
Object.is({}, {});

Ba dòng đầu trả về true. Dòng cuối trả về false vì hai object khác reference. Đây là lý do phổ biến khiến useEffect chạy vô hạn khi bạn truyền object/array vào deps.

function BadExample({ userId }) {
  const options = { userId, type: "active" };

  useEffect(() => {
    fetchUser(options);
  }, [options]);
}

Mỗi render tạo object options mới → reference mới → Object.is trả về false → effect chạy mỗi render. Fix: di chuyển object vào trong effect, hoặc dùng primitive deps.

function GoodExample({ userId }) {
  useEffect(() => {
    const options = { userId, type: "active" };
    fetchUser(options);
  }, [userId]);
}

3.2 Cleanup Timing

useEffect(() => {
  const id = setInterval(() => {
    console.log("tick");
  }, 1000);

  return () => {
    clearInterval(id);
  };
}, []);

Cleanup function (return) được gọi khi component unmount HOẶC trước khi effect chạy lại. Nếu không cleanup interval, mỗi lần effect chạy lại sẽ tạo thêm interval mới mà không xoá cái cũ → memory leak.

3.3 Race Condition & AbortController

Cách 1: Boolean flag (đơn giản nhưng không cancel request thật sự)

useEffect(() => {
  let cancelled = false;

  async function fetchData() {
    const response = await fetch(`/api/search?q=${query}`);
    const data = await response.json();
    if (!cancelled) {
      setResults(data);
    }
  }

  fetchData();

  return () => {
    cancelled = true;
  };
}, [query]);

Cách 2: AbortController (tốt hơn — thật sự cancel network request)

useEffect(() => {
  const controller = new AbortController();

  async function fetchData() {
    try {
      const response = await fetch(`/api/search?q=${query}`, {
        signal: controller.signal,
      });
      const data = await response.json();
      setResults(data);
    } catch (error) {
      if (error.name !== "AbortError") {
        setError(error);
      }
    }
  }

  fetchData();

  return () => {
    controller.abort();
  };
}, [query]);

AbortController thực sự huỷ HTTP request ở tầng network, tiết kiệm bandwidth. Luôn check error.name !== "AbortError" để không xử lý abort như error thật.

3.4 Stale Closure trong useEffect — 3 cách fix

function Timer() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const id = setInterval(() => {
      setCount(count + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <p>{count}</p>;
}

Bug: count luôn là 0 trong closure (deps là [] nên effect không bao giờ chạy lại). Kết quả: count luôn hiện 1.

Fix 1: Functional update

useEffect(() => {
  const id = setInterval(() => {
    setCount(prev => prev + 1);
  }, 1000);
  return () => clearInterval(id);
}, []);

Không cần đọc count từ closure — functional update luôn nhận giá trị mới nhất.

Fix 2: Thêm dependency

useEffect(() => {
  const id = setInterval(() => {
    setCount(count + 1);
  }, 1000);
  return () => clearInterval(id);
}, [count]);

Mỗi lần count thay đổi, interval cũ bị clear và interval mới được tạo. Hoạt động đúng nhưng không tối ưu (tạo/xoá interval liên tục).

Fix 3: useRef để lưu latest value

function Timer() {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const id = setInterval(() => {
      setCount(countRef.current + 1);
    }, 1000);
    return () => clearInterval(id);
  }, []);

  return <p>{count}</p>;
}

Ref luôn giữ giá trị mới nhất vì nó mutable và không bị closure "đóng băng".

4. useCallback — Khi nào CẦN, khi nào KHÔNG

Khi nào CẦN useCallback

const MemoChild = React.memo(function Child({ onClick }) {
  console.log("Child rendered");
  return <button onClick={onClick}>Click</button>;
});

function Parent() {
  const [count, setCount] = useState(0);

  const handleClick = useCallback(() => {
    console.log("clicked");
  }, []);

  return (
    <div>
      <p>{count}</p>
      <button onClick={() => setCount(c => c + 1)}>+1</button>
      <MemoChild onClick={handleClick} />
    </div>
  );
}

Không có useCallback, mỗi lần Parent re-render tạo handleClick mới → React.memo thấy prop khác → Child re-render. Có useCallback, handleClick giữ reference cũ → Child skip re-render.

Khi nào KHÔNG cần useCallback

5. useMemo — Expensive Computation & Stable Reference

Use case 1: Expensive computation

function FilteredList({ items, filter }) {
  const filtered = useMemo(() => {
    return items.filter(item =>
      item.name.toLowerCase().includes(filter.toLowerCase())
    );
  }, [items, filter]);

  return (
    <ul>
      {filtered.map(item => (
        <li key={item.id}>{item.name}</li>
      ))}
    </ul>
  );
}

Nếu items có 10.000 phần tử, filter mỗi render rất tốn. useMemo đảm bảo chỉ filter lại khi items hoặc filter thay đổi.

Use case 2: Stable reference cho dependency

function Chart({ data, config }) {
  const chartOptions = useMemo(() => ({
    labels: data.map(d => d.label),
    datasets: [{ values: data.map(d => d.value), color: config.color }],
  }), [data, config]);

  useEffect(() => {
    renderChart(chartOptions);
  }, [chartOptions]);
}

Không có useMemo, chartOptions mới mỗi render → useEffect chạy lại liên tục → chart re-render vô hạn.

6. useRef — Mutable Container

Use case 1: DOM Reference

function TextInput() {
  const inputRef = useRef<HTMLInputElement>(null);

  function focusInput() {
    inputRef.current?.focus();
  }

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Focus</button>
    </div>
  );
}

Use case 2: Lưu Interval ID

function Stopwatch() {
  const [seconds, setSeconds] = useState(0);
  const intervalRef = useRef<number | null>(null);

  function start() {
    if (intervalRef.current !== null) return;
    intervalRef.current = window.setInterval(() => {
      setSeconds(s => s + 1);
    }, 1000);
  }

  function stop() {
    if (intervalRef.current !== null) {
      clearInterval(intervalRef.current);
      intervalRef.current = null;
    }
  }

  useEffect(() => {
    return () => stop();
  }, []);

  return (
    <div>
      <p>{seconds}s</p>
      <button onClick={start}>Start</button>
      <button onClick={stop}>Stop</button>
    </div>
  );
}

Dùng ref để lưu interval ID vì: (1) không cần re-render khi ID thay đổi, (2) cần persist giá trị giữa các render.

Use case 3: Previous Value

function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T | undefined>(undefined);

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

function Counter() {
  const [count, setCount] = useState(0);
  const prevCount = usePrevious(count);

  return (
    <p>
      Now: {count}, Before: {prevCount}
    </p>
  );
}

Trick: useEffect chạy SAU render. Trong render hiện tại, ref.current vẫn là giá trị cũ. Sau render, effect cập nhật ref thành giá trị mới → sẵn sàng cho render tiếp theo.

Use case 4: Latest Value (tránh stale closure)

function useLatest<T>(value: T) {
  const ref = useRef(value);
  ref.current = value;
  return ref;
}

Pattern này dùng khi bạn cần đọc giá trị mới nhất trong callback/timeout mà không muốn thêm dependency. Gán trực tiếp (không qua useEffect) để đảm bảo ref luôn cập nhật trước khi bất kỳ effect nào chạy.

7. useReducer — Complex State Logic

interface State {
  count: number;
  step: number;
}

type Action =
  | { type: "increment" }
  | { type: "decrement" }
  | { type: "setStep"; payload: number }
  | { type: "reset" };

const initialState: State = { count: 0, step: 1 };

function reducer(state: State, action: Action): State {
  switch (action.type) {
    case "increment":
      return { ...state, count: state.count + state.step };
    case "decrement":
      return { ...state, count: state.count - state.step };
    case "setStep":
      return { ...state, step: action.payload };
    case "reset":
      return initialState;
    default:
      return state;
  }
}

function Counter() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <p>Count: {state.count} (step: {state.step})</p>
      <button onClick={() => dispatch({ type: "increment" })}>+</button>
      <button onClick={() => dispatch({ type: "decrement" })}>-</button>
      <input
        type="number"
        value={state.step}
        onChange={e => dispatch({ type: "setStep", payload: Number(e.target.value) })}
      />
      <button onClick={() => dispatch({ type: "reset" })}>Reset</button>
    </div>
  );
}

8. useContext — Re-render Problem & Context Splitting

const AppContext = React.createContext<{
  theme: string;
  locale: string;
  user: { name: string };
}>({
  theme: "light",
  locale: "vi",
  user: { name: "" },
});

function App() {
  const [theme, setTheme] = useState("light");
  const [locale, setLocale] = useState("vi");
  const [user, setUser] = useState({ name: "Linh" });

  const value = { theme, locale, user };

  return (
    <AppContext.Provider value={value}>
      <Header />
      <Content />
    </AppContext.Provider>
  );
}

Vấn đề: Khi chỉ theme thay đổi, value object mới được tạo → TẤT CẢ component dùng useContext(AppContext) re-render, kể cả những component chỉ dùng locale hay user.

Giải pháp: Split Contexts

const ThemeContext = React.createContext("light");
const LocaleContext = React.createContext("vi");
const UserContext = React.createContext({ name: "" });

function App() {
  const [theme, setTheme] = useState("light");
  const [locale, setLocale] = useState("vi");
  const [user, setUser] = useState({ name: "Linh" });

  return (
    <ThemeContext.Provider value={theme}>
      <LocaleContext.Provider value={locale}>
        <UserContext.Provider value={user}>
          <Header />
          <Content />
        </UserContext.Provider>
      </LocaleContext.Provider>
    </ThemeContext.Provider>
  );
}

Giờ khi theme thay đổi, chỉ component dùng useContext(ThemeContext) re-render. Component dùng UserContext không bị ảnh hưởng.

9. useLayoutEffect — Synchronous after DOM, before Paint

function Tooltip({ targetRef, content }) {
  const tooltipRef = useRef<HTMLDivElement>(null);
  const [position, setPosition] = useState({ top: 0, left: 0 });

  useLayoutEffect(() => {
    if (!targetRef.current || !tooltipRef.current) return;

    const targetRect = targetRef.current.getBoundingClientRect();
    const tooltipRect = tooltipRef.current.getBoundingClientRect();

    setPosition({
      top: targetRect.top - tooltipRect.height - 8,
      left: targetRect.left + (targetRect.width - tooltipRect.width) / 2,
    });
  }, [targetRef, content]);

  return (
    <div
      ref={tooltipRef}
      style={{ position: "fixed", top: position.top, left: position.left }}
    >
      {content}
    </div>
  );
}

Dùng useLayoutEffect ở đây vì cần đo DOM rồi set position TRƯỚC khi user thấy tooltip. Nếu dùng useEffect, tooltip sẽ flash ở vị trí (0,0) trước khi nhảy đến đúng vị trí → nhấp nháy (flicker).

10. useImperativeHandle + forwardRef

interface VideoPlayerHandle {
  play: () => void;
  pause: () => void;
  seekTo: (time: number) => void;
}

const VideoPlayer = React.forwardRef<VideoPlayerHandle, { src: string }>(
  function VideoPlayer({ src }, ref) {
    const videoRef = useRef<HTMLVideoElement>(null);

    useImperativeHandle(ref, () => ({
      play() {
        videoRef.current?.play();
      },
      pause() {
        videoRef.current?.pause();
      },
      seekTo(time: number) {
        if (videoRef.current) {
          videoRef.current.currentTime = time;
        }
      },
    }), []);

    return <video ref={videoRef} src={src} />;
  }
);

function App() {
  const playerRef = useRef<VideoPlayerHandle>(null);

  return (
    <div>
      <VideoPlayer ref={playerRef} src="/video.mp4" />
      <button onClick={() => playerRef.current?.play()}>Play</button>
      <button onClick={() => playerRef.current?.pause()}>Pause</button>
      <button onClick={() => playerRef.current?.seekTo(30)}>Go to 0:30</button>
    </div>
  );
}

Lợi ích: Parent chỉ có thể gọi play, pause, seekTo — không thể truy cập trực tiếp DOM element. Encapsulation tốt hơn.

11. Custom Hooks — 5 Hooks mẫu

11.1 useDebounce

function useDebounce<T>(value: T, delay: number): T {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => {
      setDebouncedValue(value);
    }, delay);

    return () => {
      clearTimeout(timer);
    };
  }, [value, delay]);

  return debouncedValue;
}

Cách dùng: truyền giá trị thay đổi liên tục (search input), nhận lại giá trị chỉ cập nhật sau khi user ngừng gõ delay ms.

function SearchPage() {
  const [query, setQuery] = useState("");
  const debouncedQuery = useDebounce(query, 300);

  useEffect(() => {
    if (debouncedQuery) {
      fetchResults(debouncedQuery);
    }
  }, [debouncedQuery]);

  return <input value={query} onChange={e => setQuery(e.target.value)} />;
}

11.2 useToggle

function useToggle(initialValue: boolean = false): [boolean, () => void] {
  const [value, setValue] = useState(initialValue);

  const toggle = useCallback(() => {
    setValue(v => !v);
  }, []);

  return [value, toggle];
}

Cách dùng:

function Modal() {
  const [isOpen, toggleOpen] = useToggle(false);

  return (
    <div>
      <button onClick={toggleOpen}>Toggle Modal</button>
      {isOpen && <div className="modal">Content</div>}
    </div>
  );
}

11.3 usePrevious

function usePrevious<T>(value: T): T | undefined {
  const ref = useRef<T | undefined>(undefined);

  useEffect(() => {
    ref.current = value;
  });

  return ref.current;
}

Trả về giá trị của value từ render trước. Hữu ích khi cần so sánh old vs new (ví dụ: animate khi số tăng/giảm).

11.4 useFetch

interface FetchState<T> {
  data: T | null;
  loading: boolean;
  error: Error | null;
}

function useFetch<T>(url: string): FetchState<T> {
  const [state, setState] = useState<FetchState<T>>({
    data: null,
    loading: true,
    error: null,
  });

  useEffect(() => {
    const controller = new AbortController();

    setState({ data: null, loading: true, error: null });

    fetch(url, { signal: controller.signal })
      .then(res => {
        if (!res.ok) throw new Error(`HTTP ${res.status}`);
        return res.json();
      })
      .then(data => {
        setState({ data, loading: false, error: null });
      })
      .catch(error => {
        if (error.name !== "AbortError") {
          setState({ data: null, loading: false, error });
        }
      });

    return () => {
      controller.abort();
    };
  }, [url]);

  return state;
}

Cách dùng:

function UserProfile({ userId }: { userId: string }) {
  const { data, loading, error } = useFetch<User>(`/api/users/${userId}`);

  if (loading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;
  return <p>{data?.name}</p>;
}

11.5 useLocalStorage

function useLocalStorage<T>(
  key: string,
  initialValue: T
): [T, (value: T | ((prev: T) => T)) => void] {
  const [storedValue, setStoredValue] = useState<T>(() => {
    try {
      const item = localStorage.getItem(key);
      return item ? (JSON.parse(item) as T) : initialValue;
    } catch {
      return initialValue;
    }
  });

  const setValue = useCallback(
    (value: T | ((prev: T) => T)) => {
      setStoredValue(prev => {
        const nextValue = value instanceof Function ? value(prev) : value;
        localStorage.setItem(key, JSON.stringify(nextValue));
        return nextValue;
      });
    },
    [key]
  );

  return [storedValue, setValue];
}

Cách dùng:

function Settings() {
  const [theme, setTheme] = useLocalStorage("theme", "light");

  return (
    <button onClick={() => setTheme(t => t === "light" ? "dark" : "light")}>
      Current: {theme}
    </button>
  );
}

State tự động sync với localStorage. Refresh trang vẫn giữ giá trị.

❓ CÂU HỎI PHỎNG VẤN + ĐÁP ÁN

🏋️ BÀI TẬP

🧩 MINI EXERCISE THỰC TẾ REACT NATIVE

⚠️ LỖI THƯỜNG GẶP

🏢 CASE ĐI LÀM THẬT

🧠 GHI NHỚ NHANH

❔ CÂU HỎI TỰ KIỂM TRA

✅ CHECKLIST TỰ ĐÁNH GIÁ

📎 TÀI NGUYÊN