Những Câu Hỏi Phỏng Vấn Frontend 2026

Dưới đây là danh sách tổng hợp các câu hỏi phỏng vấn Frontend tiêu chuẩn năm 2026, được phân loại theo các nhóm kiến thức từ nền tảng đến các tình huống xử lý thực tế chuyên sâu.

Event Loop & Task Prioritization: Giải thích sự khác biệt về mức độ ưu tiên giữa Microtask queue (Promise, async/await) và Macrotask queue (setTimeout, I/O). Tại sao một vòng lặp vi tác vụ vô hạn có thể khiến trình duyệt ngừng phản hồi hoàn toàn?
Memory Management: Cơ chế dọn rác "Mark-and-Sweep" hoạt động như thế nào? Làm thế nào để phát hiện rò rỉ bộ nhớ (memory leaks) trong các ứng dụng SPA phức tạp và vai trò của WeakMap/WeakSet trong việc ngăn chặn điều này?
Object Copying Mechanics: Phân biệt giữa sao chép nông (shallow copy) và sao chép sâu (deep copy). So sánh hiệu suất và hạn chế của structuredClone(), JSON.parse(JSON.stringify()) và lodash.cloneDeep.
Reference Logic: Nếu biến a là một object và ta thực hiện gán b = a, việc thay đổi thuộc tính của b ảnh hưởng thế nào đến a? Thuật toán nào thường được các thư viện sử dụng để sao chép các object lồng nhau (nested objects)?
Khi nào nên sử dụng Promise.all thay vì các lệnh await tuần tự để tối ưu hóa thời gian phản hồi của mạng? Giải thích kịch bản mà Promise.allSettled mang lại sự ổn định hơn cho hệ thống khi xử lý một danh sách request không đồng nhất.
Conditional Performance: Phân biệt cơ chế thực thi của switch và if-else. Tại sao switch thường nhanh hơn khi có số lượng điều kiện lớn và khái niệm "jump table" trong trình biên dịch là gì?
TypeScript Evolution: Tại sao xu hướng năm 2026 ưu tiên sử dụng "String Literal Unions" kết hợp với as const hơn là Enum truyền thống? Phân tích về tác động đến kích thước bundle và tính an toàn kiểu dữ liệu.
Advanced Typing: Giải thích cách hoạt động của từ khóa infer trong kiểu dữ liệu điều kiện (conditional types) và lợi ích của toán tử satisfies so với việc ép kiểu bằng as.
Memoization Logic: Hook useMemo có thể ghi nhớ được một định nghĩa hàm không?
useCallback Nuances: Ngoài việc tối ưu hiệu suất re-render, useCallback còn có những trường hợp sử dụng quan trọng nào khác liên quan đến tính ổn định tham chiếu (referential stability)?
Internal Hook Storage: Các giá trị được ghi nhớ (memoized values) thực chất được lưu trữ tại đâu trong cấu trúc dữ liệu Fiber của React? Tại sao thứ tự gọi Hook lại được coi là "linh thiêng" (sacred)?
useMemo vs useEffect: Hãy đưa ra một ví dụ về việc sử dụng useMemo và useEffect với cùng một logic bên trong nhưng lại mang lại kết quả khác nhau về mặt trải nghiệm người dùng hoặc thời điểm thực thi.
DOM Synchronization: Sự khác biệt về thời điểm chạy và mục đích sử dụng giữa useEffect và useLayoutEffect là gì? Khi nào việc dùng sai Hook sẽ gây ra hiện tượng nhấp nháy UI (flickering)?
Function Component Lifecycle: Hãy mô tả chi tiết vòng đời của một function component có sử dụng useEffect. Clean-up function sẽ được thực thi chính xác vào lúc nào?
Rules of Hooks: Tại sao Hook không thể gọi trong vòng lặp, câu lệnh điều kiện hoặc các hàm lồng nhau?
useRef Mechanics: useRef hoạt động như thế nào bên dưới lớp vỏ Fiber? Tại sao React 19 loại bỏ forwardRef và cơ chế mới để truyền ref là gì?
Context API Optimization: Các chiến lược tối ưu hóa để ngăn chặn việc toàn bộ cây component con bị re-render khi chỉ có một phần giá trị trong Context thay đổi?
New React 19 Hooks: Giải thích cách thức vận hành và bài toán mà các hook useActionState, useOptimistic và hàm use() giải quyết.
React Compiler (React Forget): Trình biên dịch tự động tối ưu hóa code như thế nào và những quy tắc "Rules of React" nào lập trình viên vẫn phải tuân thủ để Compiler hoạt động chính xác?

Hydration Mechanism: Làm thế nào Next.js có thể thêm được các sự kiện (event listeners) vào một trang web được trả về dưới dạng HTML tĩnh từ server? Giải thích vai trò của dữ liệu khởi tạo trong quá trình này.
Rendering Comparison: Phân biệt chi tiết các chiến lược kết xuất: SSG, SSR, ISR và PPR (Partial Prerendering). PPR giải quyết vấn đề "Network Waterfall" như thế nào?
Làm thế nào để truyền dữ liệu từ một Server Component vào một Client Component mà không vi phạm quy tắc serialization? Tại sao không được phép truyền các hàm (functions) hoặc class instances trực tiếp qua ranh giới này?
Caching Architecture: Cách sử dụng các API mới như revalidateTag(), updateTag() và directive use cache (Next.js 16) để kiểm soát dữ liệu tươi mới một cách tường minh.

Tailwind v4 Oxide Engine: Khi xây dựng ứng dụng, Tailwind v4 sẽ gộp toàn bộ thư viện CSS vào gói build hay chỉ những class thực sự được sử dụng? Giải thích cơ chế "Source Detection".
Critical Rendering Paths (CRP) Deep Dive: Trình duyệt sẽ xử lý như thế nào khi gặp một thẻ <script> không có thuộc tính async hoặc defer trong quá trình phân tích HTML?
Sự khác biệt giữa Layout (Reflow) và Painting là gì? Tại sao việc sử dụng các thuộc tính như transform hoặc opacity lại hiệu quả hơn việc thay đổi top/left về mặt hiệu suất render?
Ngoài e.preventDefault(), có những kỹ thuật nào khác để kiểm soát hoặc ngăn chặn các hành vi mặc định của trình duyệt (ví dụ: passive listeners)?
Phân tích sự khác biệt về dung lượng, thời gian sống và cơ chế truy cập server giữa Local Storage, Session Storage và Cookies. Khi nào nên dùng loại nào để đảm bảo tối ưu giữa hiệu suất và bảo mật?
Làm thế nào để bảo vệ ứng dụng khỏi tấn công XSS khi sử dụng Local Storage và tấn công CSRF khi sử dụng Cookies? Giải thích vai trò của các cờ HttpOnly, Secure và SameSite.
Thiết kế cơ chế Refresh Token Rotation trong Next.js 16 sử dụng lớp Proxy. Làm thế nào để xử lý Race Condition khi có nhiều request API đồng thời cùng lúc Access Token hết hạn?
Hãy đề xuất một kiến trúc phân quyền tập trung (Centralized Policy Engine) cho ứng dụng React 19 sử dụng Server Components để đảm bảo người dùng không thể can thiệp vào logic hiển thị từ phía client.
Hãy thiết kế một giải pháp cho phép người dùng nhập liệu vào một form có 10.000 trường thông tin mà không được dùng bất kỳ bộ nhớ nào tại client (Local Storage/DB), không cần đăng nhập, và đảm bảo họ có thể quay lại tiếp tục nhập bất cứ lúc nào.
Giả sử bạn có 3 Tab (A, B, C) với hàng nghìn component con lồng nhau. Khi bấm chuyển tab, giao diện bị lag 1-2 giây mới phản hồi. Bạn sẽ áp dụng những kỹ thuật nào trong React 19 để giải quyết vấn đề này?
Khi người dùng bấm chuyển trang liên tục (ví dụ trang 1 -> 2 -> 3) trong thời gian cực ngắn, làm thế nào để đảm bảo dữ liệu hiển thị cuối cùng là của trang 3 thay vì bị dữ liệu trang 2 (về sau) đè lên?