Class component và function component khác nhau thế nào? Lifecycle tương ứng với hooks ra sao?
Function component dùng hooks, ngắn gọn và dễ tái sử dụng logic; class dùng `this` và lifecycle method. `componentDidMount/DidUpdate/WillUnmount` đều quy về `useEffect` (cleanup tương ứng unmount). Class vẫn cần cho Error Boundary.
Conditional rendering và render danh sách trong React: các cách và lỗi hay gặp?
Dùng `if`/early return, toán tử ba ngôi hoặc `&&` để render có điều kiện; dùng `map` kèm `key` ổn định cho danh sách. Cẩn thận `0 && <X />` sẽ render ra số 0, hãy ép về boolean hoặc dùng ba ngôi.
Controlled và uncontrolled component khác nhau thế nào?
Controlled: giá trị input nằm trong React state (`value` + `onChange`), React là nguồn sự thật. Uncontrolled: DOM tự giữ giá trị, bạn đọc qua `ref` hoặc `FormData` khi cần (`defaultValue` đặt giá trị ban đầu).
JSX là gì và được biên dịch ra sao?
JSX là cú pháp mở rộng của JavaScript, không phải HTML. Compiler (Babel/SWC/TypeScript) biến mỗi thẻ JSX thành lời gọi hàm tạo element: `React.createElement` (cũ) hoặc `jsx()` từ `react/jsx-runtime` (React 17+ không cần import React).
State và props khác nhau thế nào?
Props là dữ liệu cha truyền xuống (chỉ đọc); state là dữ liệu nội bộ component tự quản lý và thay đổi bằng setter, thay đổi sẽ gây re-render.
useEffect chạy khi nào? Mảng dependency để làm gì?
useEffect chạy sau khi render. Mảng deps quyết định khi nào chạy lại: không có deps = mỗi render, [] = chỉ lần mount, [a] = khi a đổi. Hàm return dùng để cleanup.
useRef khác useState thế nào? Khi nào dùng ref?
useState giữ giá trị giữa các lần render và đổi nó thì trigger re-render. useRef giữ một object mutable ref.current tồn tại suốt vòng đời, đổi ref.current không gây render. Dùng ref cho DOM node, timer id, giá trị không ảnh hưởng UI.
Vì sao list trong React cần `key`? Có nên dùng index làm key?
key giúp React nhận diện phần tử nào thêm/xóa/đổi chỗ khi reconcile. Không nên dùng index nếu list có thể thay đổi thứ tự vì state và DOM sẽ bị gán nhầm item.
Virtual DOM là gì và vì sao React dùng nó?
Virtual DOM là cây object JS mô tả UI. Khi state đổi, React render cây mới, so sánh (diff) với cây cũ rồi chỉ áp dụng phần thay đổi tối thiểu vào DOM thật. Lợi ích chính là mô hình khai báo, không phải luôn nhanh hơn thao tác DOM thủ công.
Batching state update trong React 18 (automatic batching) là gì?
Batching gộp nhiều lần setState thành một lần render. Từ React 18 với createRoot, việc gộp diễn ra ở mọi nơi (event handler, setTimeout, promise), không chỉ trong event handler của React. Dùng flushSync để ép render ngay.
Custom hook là gì? So với HOC và render props thì sao?
Custom hook là hàm bắt đầu bằng use, gọi các hook khác để tái sử dụng logic có state; mỗi lần gọi có state riêng. So với HOC và render props, hook không thêm tầng component (wrapper hell), dễ compose và dễ type hơn.
Error Boundary và Portal trong React dùng khi nào?
Error Boundary là class component có getDerivedStateFromError/componentDidCatch, bắt lỗi render của cây con và hiển thị fallback, không bắt lỗi event handler hay code async. Portal render con vào DOM node khác (modal, tooltip) nhưng vẫn nằm trong cây React.
Khi nào component re-render? Dùng memo, useMemo, useCallback ra sao?
Component re-render khi state/props đổi hoặc cha re-render. memo bỏ qua render nếu props không đổi (so sánh nông); useMemo/useCallback giữ ổn định giá trị/hàm để memo hiệu quả.
Lifting state up và prop drilling: khi nào nâng state, khi nào dùng composition hoặc Context?
Khi hai component anh em cần chung dữ liệu, nâng state lên ancestor gần nhất rồi truyền xuống bằng props. Nếu props phải qua nhiều tầng trung gian (prop drilling), thử composition (truyền JSX qua `children`/slot) trước, rồi mới dùng Context.
React Router v6: nested route, Outlet và loader/action (data router)?
Route lồng nhau render qua `<Outlet />` của route cha. Với data router (`createBrowserRouter`, v6.4+), `loader` lấy dữ liệu trước khi render route, `action` xử lý form submit; đọc bằng `useLoaderData`, tránh waterfall useEffect-fetch.
React Testing Library: nguyên tắc, thứ tự ưu tiên query và userEvent?
RTL test hành vi người dùng thấy thay vì chi tiết cài đặt. Ưu tiên query theo accessibility: `getByRole` (kèm name) > `getByLabelText` > `getByText` > ... > `getByTestId` là cuối cùng. Dùng `userEvent` (async) thay `fireEvent`, và `findBy*` cho nội dung bất đồng bộ.
Stale closure trong React hooks là gì và xử lý ra sao?
Mỗi lần render tạo ra closure riêng, nắm giá trị state/props của lần render đó. Callback dài hạn (setInterval, listener) với deps rỗng sẽ đọc giá trị cũ. Sửa bằng updater function, khai báo đủ deps, hoặc giữ giá trị mới nhất trong ref.
Suspense, React.lazy và code-splitting dùng thế nào?
React.lazy tải component bằng dynamic import khi cần render lần đầu, tách ra bundle riêng. Suspense hiển thị fallback trong lúc chờ. Nên chia theo route hoặc component nặng ít dùng để giảm bundle ban đầu.
TanStack Query: staleTime, gcTime, invalidate và vì sao khác tự gọi fetch trong useEffect?
TanStack Query quản lý server state: cache theo `queryKey`, dedupe request, retry, refetch nền. `staleTime` là thời gian dữ liệu coi là tươi (mặc định 0); `gcTime` (v5; trước là cacheTime, mặc định 5 phút) là thời gian giữ cache khi không còn observer. Sau mutation dùng `invalidateQueries`.
useLayoutEffect khác useEffect thế nào?
useLayoutEffect chạy đồng bộ sau khi DOM cập nhật nhưng trước khi trình duyệt paint, nên đo layout và chỉnh DOM không bị nhấp nháy. useEffect chạy sau paint, không chặn việc vẽ. Mặc định dùng useEffect.
useReducer và Context: vấn đề re-render và cách khắc phục?
Khi value của Context đổi (so sánh Object.is), mọi component dùng context đó đều re-render, kể cả khi chỉ cần một phần dữ liệu. Giảm bằng cách tách context (state/dispatch), memo hóa value, hoặc dùng store có selector.
Xử lý form phức tạp trong React: vì sao dùng react-hook-form (kèm Zod)?
react-hook-form dựa chủ yếu vào uncontrolled input + ref, nên hầu như không re-render theo từng phím; validation khai báo qua `register` hoặc schema (Zod/Yup qua resolver). Dùng `Controller` để bọc component controlled như Select của UI library.
Chọn state management: useState, Context, Redux, Zustand, React Query?
Phân loại state trước: UI cục bộ dùng useState; server state (cache, refetch, đồng bộ) dùng React Query/SWR; client state toàn cục dùng Zustand (gọn) hoặc Redux Toolkit (app lớn, cần devtools, quy ước chặt). Context hợp cho giá trị ít đổi như theme.
Compound component và composition: thiết kế API component linh hoạt?
Compound component là nhóm component cùng làm việc qua Context ngầm (như `Tabs`, `Tabs.Tab`), cho người dùng tự sắp xếp JSX thay vì truyền hàng chục props. Ưu tiên composition (`children`, slot) hơn prop cấu hình và hơn kế thừa.
Concurrent rendering: useTransition và useDeferredValue khác nhau thế nào?
Concurrent rendering cho phép React ngắt render ưu tiên thấp để xử lý tương tác khẩn cấp. useTransition đánh dấu một lần cập nhật state là non-urgent (có isPending); useDeferredValue tạo bản sao trễ của một giá trị khi bạn không kiểm soát được nơi set state.
Race condition khi fetch trong useEffect và cách xử lý bằng AbortController?
Khi dependency đổi nhanh, response cũ có thể về sau response mới và ghi đè state sai. Cách xử lý: cleanup của effect gọi `controller.abort()` (hoặc cờ `ignore`), bỏ qua `AbortError`. Tốt hơn nữa là dùng thư viện (TanStack Query/SWR) hoặc Suspense.
React 19 có gì mới: use, Actions, useOptimistic?
React 19 thêm Actions (hàm async trong form action/transition, tự quản lý pending, lỗi), useActionState, useFormStatus, useOptimistic cho UI lạc quan, và hook use đọc Promise/Context trong render (kể cả có điều kiện). ref giờ là prop thường.
Reconciliation và Fiber trong React hoạt động thế nào?
Reconciliation so sánh cây element mới với cây cũ để tính phần DOM cần đổi, dựa trên 2 heuristic: khác type thì remount, cùng vị trí/key thì update. Fiber là cấu trúc dữ liệu cho phép chia render thành các đơn vị nhỏ, tạm dừng và ưu tiên được.
Render danh sách hàng chục nghìn item: virtualization hoạt động thế nào?
Virtualization (windowing) chỉ render các item nằm trong viewport cộng một vùng đệm (overscan), phần còn lại thay bằng khoảng trống có chiều cao tính sẵn. Dùng TanStack Virtual, react-window hoặc react-virtuoso; DOM nhỏ nên render và scroll mượt.
StrictMode render hai lần để làm gì? Component pure nghĩa là gì?
Ở dev, StrictMode gọi render (và updater, reducer, useMemo) hai lần để lộ side effect trong lúc render, và từ React 18 còn mount, unmount, mount lại effect để kiểm tra cleanup. Chỉ chạy ở development, không ảnh hưởng production.