Hook trong Next.js
AI bổ sungNó là gì?
Các hàm đặc biệt của React (useState, useEffect...) cho phép dùng state và lifecycle trong functional component; Next.js mở rộng thêm các hook riêng (useRouter, usePathname, useSearchParams...) để tương tác với routing và rendering.
Dùng để làm gì?
Quản lý trạng thái cục bộ, hiệu ứng phụ (fetch data, subscription), truy cập thông tin route, điều hướng client-side, tối ưu hiệu năng (useMemo, useCallback).
Chạy ở đâu?
Chạy trong trình duyệt (Client Component). Không chạy ở Server Component trừ khi là hook chuẩn của React không dùng browser API.
Nó thường đi với gì?
React, Next.js App Router, Client Components ('use client'), TanStack Query/SWR (fetch data).
App của mình khi nào cần?
Cần state/interactivity trên client (form, modal, tab), đọc/ghi URL, gọi API từ browser, tối ưu render.
Khi nào không cần?
Chỉ hiển thị dữ liệu tĩnh, logic chạy hoàn toàn trên server (Server Component), không cần tương tác người dùng.
Từ khóa lỗi thường gặp
"Hooks can only be called inside the body of a function component", "useSearchParams() should be wrapped in Suspense", "NextRouter was not mounted".
Một câu để nhớ
Hook = 'Cây cắm' nối component vào state, effect và router của Next/React — chỉ hoạt động ở Client Component.