Login

Phỏng vấn React: hooks, state, props và cách React render lại

  • author-image

    Nguyễn Đình Cường

  • blog-tag
  • blog-comment 0 comment
  • created-date 09 Nov, 2026
blog-thumbnail

React gần như là kỹ năng mặc định cho vị trí frontend. Khi phỏng vấn, bạn không chỉ được hỏi cú pháp mà còn được hỏi vì sao component render lại, hook hoạt động thế nào và khi nào cần tối ưu. Dưới đây là những câu hỏi thường gặp kèm hướng trả lời.

State và props khác nhau thế nào?

Props là dữ liệu component cha truyền xuống con, con chỉ đọc chứ không tự sửa. State là dữ liệu nội bộ của component, thay đổi theo thời gian và khi thay đổi sẽ khiến component render lại. Dòng dữ liệu trong React đi một chiều từ trên xuống.

Virtual DOM là gì?

Virtual DOM là bản mô tả giao diện dưới dạng đối tượng JavaScript. Khi state thay đổi, React tạo cây mới, so sánh với cây cũ (quá trình reconciliation) rồi chỉ cập nhật phần DOM thật sự khác. Điều này giúp tránh thao tác DOM không cần thiết, nhưng không có nghĩa React luôn nhanh hơn mọi cách khác; hiệu năng còn phụ thuộc cách bạn viết component.

useState hoạt động ra sao?

import { useState } from 'react';function Counter() {  const [count, setCount] = useState(0);  function addTwo() {    setCount((c) => c + 1);    setCount((c) => c + 1);  }  return <button onClick={addTwo}>{count}</button>;}

Khi giá trị mới phụ thuộc giá trị cũ, hãy dùng dạng hàm setCount(c => c + 1). Nếu viết setCount(count + 1) hai lần liên tiếp trong cùng một lần xử lý, bạn chỉ tăng thêm một vì cả hai lần cùng đọc giá trị count của lần render hiện tại. Đồng thời, không bao giờ sửa trực tiếp state kiểu arr.push(x); hãy tạo bản sao mới: setArr([...arr, x]).

useEffect dùng để làm gì?

useEffect chạy các tác dụng phụ (side effect) sau khi render, như gọi API, đăng ký sự kiện, cập nhật tiêu đề trang. Mảng phụ thuộc quyết định khi nào effect chạy lại.

useEffect(() => {  const id = setInterval(() => console.log('tick'), 1000);  return () => clearInterval(id); // dọn dẹp}, []);
  • Mảng rỗng []: chạy một lần sau lần render đầu.
  • Có biến trong mảng: chạy lại khi các biến đó thay đổi.
  • Không có mảng: chạy sau mỗi lần render.
  • Hàm trả về trong effect dùng để dọn dẹp, tránh rò rỉ bộ nhớ.

Vì sao cần thuộc tính key trong danh sách?

key giúp React xác định phần tử nào được thêm, xóa hay di chuyển khi danh sách thay đổi. Nên dùng một định danh ổn định và duy nhất như id từ dữ liệu. Dùng chỉ số mảng làm key có thể gây lỗi hiển thị khi danh sách đổi thứ tự hoặc có phần tử bị xóa.

Khi nào component render lại?

  1. State của chính nó thay đổi.
  2. Component cha render lại (mặc định kéo theo con).
  3. Giá trị context mà nó dùng thay đổi.

Để giảm render thừa, bạn có thể dùng React.memo cho component, useMemo cho giá trị tính toán nặng và useCallback cho hàm truyền xuống con. Tuy nhiên đừng tối ưu sớm; hãy đo bằng công cụ profiler trước khi quyết định.

Controlled và uncontrolled component

Controlled component có giá trị ô nhập do state của React quản lý (value và onChange). Uncontrolled component để DOM giữ giá trị, bạn đọc qua ref khi cần. Biểu mẫu thông thường nên dùng controlled để dễ kiểm tra dữ liệu.

Một số câu hỏi ngắn khác

  • Lifting state up: đưa state lên component cha chung khi nhiều con cần chia sẻ.
  • Context: truyền dữ liệu sâu mà không cần truyền props qua từng tầng.
  • Quy tắc của hooks: chỉ gọi ở cấp cao nhất của component hoặc custom hook, không gọi trong vòng lặp hay điều kiện.

Ví dụ gọi API đúng cách trong component

function UserList() {  const [users, setUsers] = useState([]);  const [loading, setLoading] = useState(true);  const [error, setError] = useState(null);  useEffect(() => {    let cancelled = false;    fetch('/api/users')      .then((r) => r.json())      .then((data) => { if (!cancelled) setUsers(data); })      .catch((e) => { if (!cancelled) setError(e); })      .finally(() => { if (!cancelled) setLoading(false); });    return () => { cancelled = true; };  }, []);  if (loading) return <p>Đang tải...</p>;  if (error) return <p>Có lỗi xảy ra</p>;  return <ul>{users.map((u) => <li key={u.id}>{u.name}</li>)}</ul>;}

Đoạn code trên xử lý đủ ba trạng thái tải, lỗi, thành công và dùng biến cancelled để tránh cập nhật state khi component đã bị gỡ khỏi màn hình. Khi phỏng vấn, chỉ cần bạn nhắc được những chi tiết này đã cho thấy bạn từng làm việc thật. Bạn cũng có thể nói thêm rằng trong dự án lớn nên dùng thư viện quản lý dữ liệu từ máy chủ để xử lý bộ nhớ đệm và thử lại tự động.

Kết luận

Để trả lời tốt, hãy luôn gắn lý thuyết với ví dụ nhỏ bạn từng viết. Tự xây một ứng dụng vừa phải, rồi giải thích lại từng quyết định về state, effect và cấu trúc component là cách ôn luyện hiệu quả nhất.

Nếu muốn học React từ nền tảng đến dự án hoàn chỉnh, bạn có thể tìm các khóa học web trên codebem.com.

author_photo
Nguyễn Đình Cường

0 comment