Câu hỏi & gợi ý trả lời
Q1. Virtual DOM là gì và nó giúp ích gì cho performance?
Virtual DOM là một bản copy của Real DOM lưu trên bộ nhớ (memory). Khi state thay đổi, React dùng thuật toán 'diffing' để so sánh cây Virtual DOM mới và cũ, sau đó chỉ cập nhật những thay đổi vào Real DOM thật (thay vì re-render lại toàn bộ). Điều này giảm chi phí thao tác DOM vốn rất đắt đỏ.
Q2. Tại sao cần dùng 'key' khi render list trong React?
Key giúp React định danh duy nhất (unique identity) cho các element trong list. Trong quá trình reconciliation, React dùng key để xác định phần tử nào đã thay đổi, thêm hoặc xóa, giúp việc cập nhật DOM chính xác và hiệu quả hơn. Tuyệt đối không dùng index làm key nếu danh sách có thể thay đổi thứ tự.
Q3. Sự khác biệt chính giữa State và Props là gì?
Props là dữ liệu truyền từ component cha xuống con, nó mang tính 'read-only' (immutable). State là dữ liệu nội bộ được quản lý bên trong component, có thể thay đổi thông qua hàm setter (như useState), và mỗi khi state thay đổi sẽ trigger re-render component đó.
Q4. Giải thích cơ chế hoạt động của useEffect hook?
useEffect xử lý các side effects (như gọi API, subscription, DOM manipulation). Nó chạy sau khi component render. Dependency array (tham số thứ 2) giúp kiểm soát thời điểm chạy: truyền mảng rỗng [] thì chỉ chạy khi mount, truyền biến thì chạy mỗi khi biến đó thay đổi, không truyền thì chạy sau mọi lần render.
Q5. Controlled Component khác gì Uncontrolled Component?
Controlled Component quản lý dữ liệu form thông qua React State (value gắn với state, onChange cập nhật state). Uncontrolled Component để DOM tự quản lý (dùng 'ref' để lấy giá trị trực tiếp từ DOM khi cần), thường dùng cho các form đơn giản hoặc cần tích hợp thư viện DOM ngoài.
Q6. Lợi ích của React Hooks so với Class Components là gì?
Hooks giúp Functional Components có thể quản lý state và lifecycle dễ dàng hơn mà không cần viết Class. Hooks giúp code gọn gàng, dễ tái sử dụng logic thông qua Custom Hooks, và tránh được các vấn đề phức tạp với từ khóa 'this' trong JS.
Q7. Phân biệt useMemo và useCallback?
Cả hai đều dùng để tối ưu hóa performance (memoization). useMemo dùng để lưu trữ kết quả của một phép tính toán tốn kém (return value). useCallback dùng để lưu trữ tham chiếu của chính function đó (tránh re-render component con khi truyền function vào props).
Q8. Context API dùng để làm gì và khi nào nên dùng?
Context API giải quyết vấn đề 'prop drilling' (phải truyền props qua nhiều cấp component trung gian). Nên dùng cho các dữ liệu toàn cục, ít thay đổi như: theme, user authentication, ngôn ngữ (i18n). Không nên lạm dụng Context cho state thay đổi liên tục vì sẽ gây re-render không cần thiết.
Q9. React.memo là gì?
React.memo là một Higher-Order Component (HOC) giúp component chỉ re-render nếu props của nó thay đổi (shallow comparison). Nó giúp tối ưu hiệu năng cho các component con không cần thiết phải render lại khi component cha re-render.
Q10. Sự khác biệt giữa useState và useRef?
useState dùng để lưu trữ giá trị ảnh hưởng đến UI; khi giá trị thay đổi, component sẽ re-render. useRef dùng để lưu trữ giá trị không ảnh hưởng đến UI (như ref vào DOM element, timer ID, giá trị previous state), khi thay đổi sẽ không trigger re-render.
Q11. Higher-Order Component (HOC) là gì?
HOC là một pattern (function) nhận vào một component và trả về một component mới đã được bổ sung thêm tính năng hoặc dữ liệu. HOC dùng để tách biệt logic dùng chung (cross-cutting concerns) như authentication, logging, hoặc data fetching.
Q12. Fragment trong React là gì?
Fragment (`<React.Fragment>` hoặc `<>`) cho phép nhóm danh sách các element con mà không cần thêm một thẻ HTML wrapper (như div) dư thừa vào DOM, giúp cấu trúc DOM sạch và dễ quản lý CSS hơn.
Q13. Tại sao không nên thay đổi state trực tiếp (mutation)?
React theo dõi sự thay đổi state thông qua shallow comparison. Nếu thay đổi trực tiếp (vd: obj.prop = 'new'), React không nhận diện được sự thay đổi để trigger re-render. Luôn phải dùng hàm setter để tạo ra tham chiếu mới (immutable) cho dữ liệu.
Q14. StrictMode có tác dụng gì?
StrictMode là một wrapper component chỉ hoạt động ở môi trường development. Nó giúp phát hiện các vấn đề tiềm ẩn trong app: cảnh báo các lifecycle không an toàn, phát hiện side effects không mong muốn trong useEffect, và cảnh báo về các API đã deprecated.
Q15. State Management (như Redux) khi nào là cần thiết?
Khi ứng dụng có cấu trúc component phức tạp, nhiều component con ở các nhánh cây khác nhau cùng chia sẻ dữ liệu chung, hoặc khi state cần quản lý có luồng cập nhật phức tạp, khó đoán nếu chỉ dùng props/context thông thường.