Question 1

Sự khác biệt chính giữa let và var là gì?

Accepted Answer

let khai báo một biến có phạm vi khối, nghĩa là nó chỉ tồn tại trong khối nơi nó được định nghĩa (giữa các dấu ngoặc nhọn). var có phạm vi hàm, điều này có thể gây ra lỗi không mong muốn vì biến có thể truy cập trong toàn bộ hàm. Sử dụng let mặc định giúp tránh các vấn đề hoisting và rò rỉ biến trong vòng lặp hoặc câu lệnh điều kiện.

Question 2

JSX trong React là gì?

Accepted Answer

JSX là một phần mở rộng cú pháp của JavaScript cho phép viết markup giống HTML trực tiếp trong mã JavaScript. Nó được Babel chuyển đổi thành các lệnh gọi hàm React.createElement trong quá trình biên dịch. Sử dụng JSX giúp mã dễ đọc hơn và cho phép phát hiện lỗi tại thời điểm biên dịch thông qua typing, đồng thời kết hợp sức mạnh của JavaScript với cú pháp quen thuộc.

Question 3

Hook useState trong React là gì?

Accepted Answer

useState là một React hook quản lý state cục bộ trong một component hàm. Khác với các biến JavaScript thông thường bị đặt lại ở mỗi lần render, useState bảo tồn giá trị state giữa các lần render liên tiếp. Hook này trả về một mảng chứa giá trị state hiện tại và một hàm để cập nhật nó, tự động kích hoạt re-render component khi state thay đổi.

Question 4

Mounting trong React component là gì?

Accepted Answer

Mounting là giai đoạn mà một component được tạo ra và chèn vào DOM lần đầu tiên. Trong giai đoạn này, React khởi tạo state, thực thi code khởi tạo và thực hiện lần render đầu tiên. Đây là thời điểm lý tưởng để gọi API hoặc khởi tạo subscription thông qua useEffect.

Question 5

CSS Module trong React là gì?

Accepted Answer

CSS Modules tự động tạo tên class duy nhất bằng cách thêm hash vào tên class, giúp ngăn ngừa xung đột style giữa các component. Mỗi file CSS Module có scope cục bộ riêng, không giống như các stylesheet toàn cục truyền thống. Cách tiếp cận này cho phép viết các style module hóa mà không có nguy cơ ghi đè ngẫu nhiên trong các component khác.

Question 6

App Router trong Next.js là gì?

Accepted Answer

App Router là hệ thống định tuyến mới trong Next.js 13+ dựa trên thư mục app/. Nó thay thế Pages Router và giới thiệu Server Components theo mặc định, layout dùng chung, và mô hình định tuyến linh hoạt hơn với các quy ước file như page.tsx, layout.tsx và loading.tsx.

Question 7

Cú pháp đúng để định kiểu props của component React là gì?

Accepted Answer

Interface Props theo sau là việc định kiểu hàm với Props làm tham số là cú pháp chuẩn được khuyến nghị. Cách tiếp cận này cung cấp suy luận kiểu xuất sắc và cho phép tái sử dụng dễ dàng kiểu Props ở các nơi khác trong code. Nó rõ ràng hơn React.FC và cho phép kiểm soát tốt hơn việc định kiểu children.

Question 8

Vai trò chính của React.memo là gì?

Accepted Answer

React.memo là một Higher-Order Component giúp ghi nhớ kết quả render của một component. Nó thực hiện so sánh nông các props và bỏ qua việc re-render nếu props không thay đổi. Đặc biệt hữu ích để tối ưu các component con tốn kém mà thường xuyên nhận cùng các props.

Question 9

Error Boundary trong React là gì?

Accepted Answer

Error Boundary là một class component trong React giúp bắt các lỗi JavaScript xảy ra trong cây component con của nó, hiển thị giao diện dự phòng (fallback UI) và ngăn toàn bộ ứng dụng bị crash. Nó sử dụng các phương thức componentDidCatch() và getDerivedStateFromError() để chặn và xử lý lỗi rendering.

Question 10

Mẫu Compound Components là gì?

Accepted Answer

Mẫu Compound Components cho phép tạo các component chia sẻ trạng thái ngầm định qua React Context mà không cần truyền props trực tiếp. Mẫu này được dùng trong các thư viện như Radix UI và Headless UI để cung cấp API linh hoạt và có thể kết hợp. Các component con có thể tự động truy cập trạng thái chia sẻ, cho phép tùy chỉnh cấu trúc mà không mất logic chung.

Câu hỏi phỏng vấn React / Next.js

Sẵn sàng cho phỏng vấn React / Next.js?

Khám phá tất cả chủ đề React / Next.js

Nền tảng JavaScript

Nền tảng React

React Hooks

Vòng đời component

React Router

Quản lý state với Context

Biểu mẫu và Controlled Components

Lấy dữ liệu & API

React Query (TanStack Query)

Styling & CSS-in-JS

Nền tảng Next.js

TypeScript với React

Data Fetching trong Next.js

Server Actions trong Next.js

Định tuyến & Điều hướng trong Next.js

API Routes trong Next.js

Metadata & SEO trong Next.js

Middleware & Auth trong Next.js

Kiểm thử React

Zustand State Management

Tối ưu hiệu năng React

Error Boundaries & Error Handling

Advanced React Patterns

Tính năng nâng cao của Next.js

Triển khai & Môi trường Production với Next.js

Architecture & Design Patterns

React Server Components

Quốc tế hóa Next.js

React Bảo mật & Thực hành tốt nhất

Nắm vững React / Next.js cho lần phỏng vấn tiếp theo