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

Trong script setup, các side effects nên được quản lý thông qua watchEffect hoặc watch với tùy chọn flush: 'post'. Sử dụng 'post' giúp đảm bảo code chạy sau khi DOM đã được cập nhật, tránh việc truy cập vào các phần tử DOM chưa sẵn sàng. Ngoài ra, cần tận dụng onScopeDispose để dọn dẹp các timer hoặc event listeners, tránh rò rỉ bộ nhớ (memory leaks) trong các ứng dụng SPA phức tạp.

Đối với dự án lớn, nên chia nhỏ store theo từng domain nghiệp vụ thay vì một store tổng. Sử dụng Setup Stores thay vì Options Stores để tận dụng khả năng inject các composables khác. Cần chú ý đến việc sử dụng storeToRefs khi destructuring để giữ tính phản ứng. Trong kiến trúc Micro-frontends, cần thiết lập cơ chế chia sẻ state thông qua một layer trung gian hoặc event bus nếu các ứng dụng cần giao tiếp với nhau.

Effect Scope (effectScope) cho phép gom nhóm các hiệu ứng phản ứng (computed, watch) vào một phạm vi duy nhất. Khi scope này bị hủy (stop), tất cả các effect bên trong sẽ tự động dừng lại. Đây là kỹ thuật quan trọng để tạo các composables có thể tái sử dụng mà không gây rò rỉ bộ nhớ khi được gọi bên ngoài vòng đời của một component Vue.

Khi truyền props vào một hàm composable, nếu truyền trực tiếp, tính phản ứng sẽ bị mất nếu props đó được destructure. toRefs chuyển đổi một reactive object thành một object chứa các refs tương ứng, đảm bảo rằng khi props thay đổi từ component cha, giá trị bên trong composable vẫn được cập nhật đồng bộ. Đây là best practice để đảm bảo tính toàn vẹn của dữ liệu trong các logic phức tạp.

Để tránh tình trạng state của test này ảnh hưởng đến test khác, cần reset store sau mỗi test case. Sử dụng hàm $reset() của Pinia hoặc tạo một instance Pinia mới cho mỗi test bằng cách sử dụng createPinia() và setActivePinia(). Việc cô lập môi trường test là bắt buộc để đảm bảo tính chính xác của các kịch bản kiểm thử tự động.

computed() là cơ chế lazy evaluation, chỉ tính toán lại khi các dependency thay đổi và kết quả được cache. watch() là cơ chế thực thi side effects khi dữ liệu thay đổi. Trong Enterprise, ưu tiên dùng computed() cho các logic biến đổi dữ liệu để tận dụng caching, chỉ dùng watch() khi cần thực hiện các tác vụ bất đồng bộ hoặc tương tác với DOM/API bên ngoài.

Để an toàn với TypeScript, cần định nghĩa các InjectionKey. Điều này giúp định nghĩa kiểu dữ liệu của giá trị được inject ngay tại thời điểm compile, tránh lỗi runtime. Ví dụ: const UserKey: InjectionKey = Symbol(). Khi sử dụng, việc kiểm tra giá trị null/undefined là bắt buộc để đảm bảo ứng dụng không bị crash khi component cha chưa cung cấp giá trị.

defineModel giúp đơn giản hóa việc tạo two-way binding giữa component cha và con. Nó loại bỏ boilerplate code (props + emit update:modelValue). Nên sử dụng defineModel khi component con đóng vai trò là một input control hoặc một UI component cần đồng bộ state trực tiếp với cha. Điều này giúp code sạch hơn, dễ bảo trì hơn trong các hệ thống Design System phức tạp.

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.