Skip to content
Props — dữ liệu từ bên ngoài truyền vào, component cha kiểm soát, không thay đổi được từ bên trongState — dữ liệu nội bộ, component tự quản lý, có thể thay đổi bằng setter
Key phải unique trong cùng một list, không cần unique toàn appDùng id từ data là tốt nhất — tránh dùng index của array vì khi list thay đổi thứ tự, index thay đổi theo và React sẽ re-render sai
50 câu hỏi phỏng vấn React (p2)
Và gợi ý trả lời cập nhật 5/2026.
Câu 17: Props trong React là gì?
Props (viết tắt của properties) là cơ chế truyền dữ liệu từ component cha xuống component con. Props là read-only — component con không được phép tự thay đổi props mà nó nhận vào.
Props có thể là bất kỳ kiểu dữ liệu nào: string, number, object, array, hay thậm chí là một function (dùng để con giao tiếp ngược lại với cha — còn gọi là callback props).
Câu 18: Arrow function trong React dùng để làm gì?
Arrow function được dùng phổ biến trong React vì nó không tạo ra this riêng — giúp tránh các lỗi liên quan đến context của this khi truyền function làm event handler hoặc callback.
Với functional component (chuẩn hiện nay), vấn đề this gần như không còn xuất hiện.
Arrow function vẫn được dùng rộng rãi vì cú pháp ngắn gọn, đặc biệt khi viết inline handler hoặc các hàm trong array method như .map(), .filter().
Câu 19: Hai loại component trong React là gì?
React có hai loại component:
1. Function Component (được khuyến nghị dùng hiện nay)
2. Class Component (cú pháp cũ, vẫn hoạt động nhưng ít dùng)
Kể từ khi Hooks ra đời (React 16.8), Function Component có thể làm được mọi thứ mà Class Component làm được — nên cộng đồng React gần như đã chuyển hoàn toàn sang Function Component.
Câu 20: Synthetic Event trong React là gì?
Synthetic Event là lớp bọc (wrapper) mà React tạo ra xung quanh native event của trình duyệt. Mục đích là chuẩn hóa hành vi event trên tất cả các trình duyệt khác nhau — giúp bạn viết code một lần mà chạy nhất quán ở mọi nơi.
Synthetic Event có cùng interface với native event (e.target, e.preventDefault(), e.stopPropagation()…) nên bạn dùng hoàn toàn bình thường mà không cần lo về sự khác biệt giữa các trình duyệt.
Câu 21: State trong React là gì?
State là dữ liệu nội bộ của một component — dữ liệu có thể thay đổi theo thời gian và mỗi khi thay đổi, React sẽ tự động re-render lại component đó.
State khác Props ở chỗ: state do component tự quản lý và có thể tự thay đổi, còn props là dữ liệu được truyền từ bên ngoài vào và không được phép thay đổi.
Câu 22: Cách update state trong React như thế nào?
Với functional component, dùng hàm setter từ useState:
Cách 2 (prev =>) là best practice khi state mới tính toán dựa trên state cũ, vì tránh được lỗi stale closure — trường hợp hàm đọc phải giá trị state cũ do bị “đóng băng” trong closure.
Không bao giờ mutate state trực tiếp như count = count + 1 — React sẽ không biết để re-render.
Câu 23: Sự khác biệt giữa Props và State là gì?
Props
State
Nguồn gốc
Truyền từ component cha
Do component tự quản lý
Có thể thay đổi không?
❌ Không (read-only)
✅ Có (qua setter)
Ai kiểm soát?
Component cha
Chính component đó
Khi thay đổi → re-render?
✅ Có
✅ Có
There are no rows in this table
Nói ngắn gọn: Props là dữ liệu được nhận vào, State là dữ liệu được tự quản lý. Component con không được sửa props — nếu cần thay đổi dữ liệu đó, phải thông báo ngược lên cha qua callback.
Câu 24: Pure Component trong React là gì?
Pure Component là component chỉ re-render khi props hoặc state thực sự thay đổi — nó tự động so sánh (shallow comparison) props/state mới và cũ trước khi quyết định có render lại hay không.
Với class component, dùng React.PureComponent thay vì React.Component. Với functional component, dùng React.memo:
Pure Component giúp tránh re-render không cần thiết, cải thiện hiệu suất trong các danh sách dài hoặc component phức tạp.
Lưu ý: So sánh là shallow — nếu props là object hoặc array, React chỉ so sánh reference, không đi sâu vào từng phần tử bên trong.
Câu 25: Hai loại thông tin điều khiển một component trong React là gì?
Hai loại đó là Props và State — đã giải thích chi tiết ở câu 23 và 24. Tóm lại:
Kết hợp Props và State, bạn kiểm soát được toàn bộ hành vi và giao diện của mọi component trong ứng dụng.
Câu 26: Mounting và Unmounting là gì?
Mounting là quá trình React tạo component lần đầu và chèn nó vào DOM — component “được sinh ra”.
Unmounting là quá trình React gỡ component ra khỏi DOM — component “bị xóa”.
Với functional component, bạn dùng useEffect để chạy code tại các thời điểm này:
Cleanup function (hàm return trong useEffect) quan trọng để tránh memory leak — ví dụ: hủy event listener, clear interval, hoặc cancel API request khi component bị gỡ.
Câu 27: create-react-app là gì? Có còn dùng không?
create-react-app (CRA) là công cụ CLI giúp tạo nhanh một project React với cấu hình sẵn (Webpack, Babel, ESLint…) mà không cần setup thủ công. Đây từng là cách khởi tạo dự án React phổ biến nhất trong nhiều năm.
Tuy nhiên, CRA đã không còn được duy trì tích cực từ năm 2023 và hiện bị coi là lỗi thời. Cộng đồng React hiện khuyến nghị:
(Còn tiếp — câu 28 đến 50)
Câu 28: key trong React list dùng để làm gì?
key là một prop đặc biệt giúp React nhận diện từng phần tử trong một danh sách — React dùng nó để biết phần tử nào được thêm, xóa, hoặc di chuyển khi danh sách thay đổi, từ đó chỉ cập nhật đúng phần tử cần thiết thay vì render lại cả list.
Lưu ý quan trọng:
Câu 29: Children prop là gì?
children là một prop đặc biệt, tự động nhận nội dung nằm giữa thẻ mở và thẻ đóng của component — giúp component trở nên linh hoạt hơn, có thể “bọc” bất kỳ nội dung gì bên trong.
children có thể là text, JSX, một component khác, hoặc thậm chí là một function (pattern render props).
Câu 30: Error Boundary là gì?
Error Boundary là component dùng để bắt lỗi JavaScript xảy ra trong cây component con — thay vì crash toàn bộ app, nó hiển thị một fallback UI và ghi log lỗi.
Lưu ý: Error Boundary hiện vẫn phải viết dưới dạng class component — chưa có hook tương đương chính thức. Ngoài ra, nó không bắt được lỗi trong event handler, async code, hay SSR.
Câu 31: Fragment (<>) trong React là gì?
Fragment cho phép bạn nhóm nhiều element lại mà không tạo thêm node thừa trong DOM. Trong JSX, mỗi component chỉ được trả về một root element — Fragment là cách giải quyết mà không cần bọc thêm <div>.
Cú pháp <>...</> là shorthand của <React.Fragment>...</React.Fragment>. Nếu cần truyền key (ví dụ trong list), phải dùng cú pháp đầy đủ: <React.Fragment key={id}>.
Câu 32: StrictMode trong React là gì?
<React.StrictMode> là một wrapper component giúp phát hiện các vấn đề tiềm ẩn trong quá trình development — không ảnh hưởng gì đến production build.
StrictMode giúp phát hiện các vấn đề như: dùng API đã deprecated, side effects không thuần túy trong render, component không cleanup effect đúng cách…
Một điểm hay gây bỡ ngỡ: trong development với StrictMode, React cố tình render component hai lần để phát hiện side effects không mong muốn — đây là hành vi có chủ đích, không phải bug.
Câu 33: React Portal là gì?
Portal cho phép render component con vào một DOM node nằm ngoài cây DOM của component cha — trong khi vẫn giữ nguyên vị trí trong cây component React (để event bubbling vẫn hoạt động bình thường).
Portal thường dùng cho modal, tooltip, dropdown, notification — những thứ cần thoát khỏi overflow: hidden hoặc z-index của component cha.
Câu 34: Context trong React là gì?
Context cho phép truyền dữ liệu xuống sâu trong cây component mà không cần truyền props qua từng tầng trung gian (prop drilling).
Context phù hợp cho dữ liệu “global” như theme, ngôn ngữ, thông tin user đang đăng nhập. Tuy nhiên, không nên lạm dụng Context cho mọi state — với state phức tạp hơn, hãy cân nhắc Zustand hoặc Redux.
Đọc tiếp .
Want to print your doc?
This is not the way.
This is not the way.
Try clicking the ··· in the right corner or using a keyboard shortcut (
CtrlP
) instead.