Thư Viện Câu Hỏi Phỏng Vấn

React Compiler cung cấp tính năng ghi nhớ tự động (automatic memoization), giúp loại bỏ hoàn toàn nhu cầu sử dụng thủ công các hook như useMemo, useCallback, hoặc React.memo.

Server Actions cho phép gọi các hàm phía máy chủ (server function) trực tiếp từ các component.

Automatic Batching

Gộp nhiều cập nhật state lại với nhau (ngay cả trong mã lệnh bất đồng bộ) để giảm thiểu số lần render lại.

useOptimistic Hook

Thực hiện cập nhật giao diện người dùng theo hướng lạc quan:

use() Hook

Đọc các tài nguyên (Promise, Context) bên trong hàm render:

2. State Storage

3. Actions & Form Actions

1. Automatic Batching

Server Components trong React 19 được thực thi hoàn toàn trên server trước khi gửi HTML về client. Điều này giúp giảm thiểu đáng kể JavaScript bundle size vì các thư viện nặng chỉ dùng ở server sẽ không được gửi xuống trình duyệt. Ngược lại, Client Components vẫn yêu cầu hydrate và thực thi trên trình duyệt. Sự khác biệt cốt lõi là Server Components không thể sử dụng các hooks như useState hay useEffect, nhưng có khả năng truy cập trực tiếp vào database hoặc file system. Khi truyền dữ liệu từ Server Component sang Client Component, dữ liệu đó phải được serialize thành JSON, do đó các hàm (functions) không thể truyền trực tiếp qua props.

Server Actions cho phép gọi trực tiếp các hàm phía server từ components mà không cần tạo các API endpoints trung gian. Về bảo mật, React 19 tự động tạo ra các secure tokens để ngăn chặn CSRF attacks. Thay vì viết fetch request thủ công, bạn chỉ cần đánh dấu hàm với 'use server'. Ví dụ: async function submitForm(formData) { 'use server'; await db.save(formData); }. Điều này giúp giảm boilerplate code, đảm bảo tính nhất quán giữa client và server, và cho phép thực hiện validation ngay tại server một cách tập trung.

Hook useOptimistic cho phép hiển thị trạng thái dự kiến của giao diện trước khi server phản hồi kết quả. Khi người dùng thực hiện hành động, bạn cập nhật trạng thái optimistic ngay lập tức. Nếu server trả về lỗi, React sẽ tự động revert về trạng thái trước đó. Ví dụ: const [optimisticState, addOptimistic] = useOptimistic(state, (currentState, newValue) => newValue);. Điều này tạo cảm giác ứng dụng phản hồi tức thì (instant feedback), giúp tăng trải nghiệm người dùng trong các hệ thống có độ trễ mạng cao.

Server Components giúp giảm thiểu số lượng component cần hydrate trên client. Khi một phần lớn giao diện được render ở server, trình duyệt không cần tải và thực thi code của các component đó, dẫn đến thời gian Time to Interactive (TTI) nhanh hơn. Ngoài ra, nó loại bỏ hiện tượng waterfall network requests vì các dữ liệu cần thiết đã được fetch trực tiếp tại server trước khi component được render, giúp tối ưu hóa băng thông và tài nguyên CPU trên phía client.

Server Actions nên được ưu tiên khi thực hiện các thao tác thay đổi dữ liệu (mutations) như tạo, cập nhật hoặc xóa dữ liệu trực tiếp từ form. Trong khi React Query/SWR mạnh mẽ trong việc caching và đồng bộ dữ liệu từ API endpoints, Server Actions đơn giản hóa luồng dữ liệu bằng cách loại bỏ nhu cầu quản lý các API route riêng biệt. Nếu ứng dụng của bạn dựa nhiều vào kiến trúc Server-Side Rendering (SSR) hoặc Next.js, Server Actions giúp code gọn gàng hơn và tận dụng được cơ chế revalidation tự động của framework.

Progressive Enhancement là khả năng ứng dụng vẫn hoạt động ngay cả khi JavaScript trên trình duyệt bị tắt hoặc chưa tải xong. Với Server Actions, bạn có thể sử dụng thẻ

Thách thức lớn nhất là việc duy trì kết nối với database hoặc các dịch vụ bên ngoài trong quá trình render. Vì Server Components render trên mỗi request, việc khởi tạo kết nối liên tục có thể gây quá tải. Cần sử dụng các kỹ thuật như connection pooling hoặc singleton pattern để tái sử dụng kết nối. Ngoài ra, cần cẩn trọng với việc truyền dữ liệu quá lớn từ server xuống client thông qua props, vì dữ liệu này sẽ được serialize và làm tăng kích thước payload, ảnh hưởng đến hiệu năng mạng.