Câu hỏi: FER202 Phát triển web Front-End với React – Bộ ôn tập cuối kỳ số 3

Đáp án đúng: "lazy() API and Suspense components". Code splitting (tách mã) là chia bundle thành nhiều phần để chỉ tải phần cần dùng; React hỗ trợ điều này trực tiếp bằng hàm lazy, nhận một hàm gọi import động và trả về component chỉ tải mã khi được render lần đầu, cùng component Suspense hiển thị giao diện fallback trong lúc phần mã đó đang tải, nhờ vậy việc tách mã được tích hợp trọn vào cây component. "useState() and useEffect()" sai vì hai hook này quản lý state và side effect, không liên quan đến việc tải mã theo yêu cầu. "React.memo() and useCallback()" sai vì đây là công cụ tối ưu hiệu năng render, giúp bỏ qua lần render lại hoặc giữ nguyên tham chiếu hàm, không chia nhỏ bundle. "ReactDOM.createRoot() and BrowserRouter." sai vì createRoot là API khởi tạo gốc ứng dụng của React 18 còn BrowserRouter là component của React Router; dù hay dùng chung với lazy theo từng route, chúng không tự tách mã.

Đáp án đúng: "To allow reusing the same code across multiple components". Component tái sử dụng (reusable component) là component được viết tổng quát, nhận dữ liệu khác nhau qua props, như một Button hay Card dùng ở nhiều trang; lợi ích chính là viết logic và giao diện một lần rồi dùng lại ở nhiều nơi, giảm lặp mã, và sửa một chỗ thì mọi nơi dùng nó đều đổi theo. Phương án "To make code easier to debug" là lợi ích phụ có thật khi mã gọn và ít lặp, nhưng không phải mục đích chính của việc tách component dùng lại. Phương án "To increase the performance of the app" sai vì tái sử dụng không tự làm ứng dụng nhanh hơn; hiệu năng phụ thuộc số lần render và các kỹ thuật như memo. Phương án "To handle state management in a centralized manner" là việc của Redux hay Context, không phải của component tái sử dụng.

Đáp án đúng: "It improves initial load performance by deferring non-critical component loading.". React.lazy kết hợp lệnh import() động khiến bundler tách component thành một tệp (chunk) riêng chỉ tải khi component đó được render lần đầu, nhờ vậy gói JavaScript ban đầu nhỏ hơn và trang hiện nhanh hơn. "It reduces the overall bundle size of an application by removing unused code." gần nhưng sai cơ chế: lazy không loại bỏ mã thừa, đó là việc của tree shaking; mã vẫn còn nguyên, chỉ dời sang tải sau, nên tổng kích thước ứng dụng không giảm. "It enhances the user experience by providing a visual fallback while components are being loaded." mô tả việc của Suspense qua prop fallback, không phải lợi ích của bản thân lazy. "It simplifies the process of fetching data from an API." không liên quan, vì lazy chỉ nạp mã component chứ không gọi API lấy dữ liệu.

Đáp án đúng: "use setItems([...items, 'new'])". State trong React phải được coi là bất biến (immutable): items.push('new') sửa trực tiếp mảng cũ, rồi setItems(items) truyền lại chính tham chiếu đó, React so sánh bằng Object.is thấy giá trị không đổi nên bỏ qua lần render lại và giao diện không hiện mục mới. Cách đúng là tạo mảng mới bằng toán tử spread (trải mảng) gồm các phần tử cũ cộng thêm 'new', tham chiếu khác đi nên component render lại. "useState should be useReducer" không đúng vì useReducer chỉ là lựa chọn khác cho state phức tạp, nó cũng đòi trả về state mới và không tự sửa được lỗi đột biến mảng. "push is not a valid method" sai vì push là phương thức hợp lệ của Array, vấn đề là nó đột biến mảng chứ không phải không tồn tại. "setItems must take a string" sai vì hàm cập nhật nhận giá trị thuộc kiểu bất kỳ hoặc một hàm cập nhật, ở đây state là mảng nên truyền mảng là đúng.

Đáp án đúng: "File-system routing, where routes are determined by the structure of files". Next.js định tuyến theo hệ thống tệp (file-system routing): với Pages Router, tệp pages/about.js trở thành đường dẫn /about; với App Router, mỗi thư mục trong app có tệp page.js là một route, thư mục đặt tên trong ngoặc vuông như [id] là đoạn động. "Explicit configuration in a central routes.json file." sai vì Next.js không đọc một tệp cấu hình tuyến trung tâm nào; muốn thêm trang chỉ cần thêm tệp. "Dynamic route declarations using React Router" là cách của ứng dụng React thuần dùng React Router, còn Next.js có bộ định tuyến riêng và tuyến động khai báo bằng tên tệp hoặc thư mục. "Server-side API endpoints only" sai vì API route chỉ là một loại route; các trang giao diện mới là phần chính, và cả hai đều được xác định bằng cấu trúc tệp.

Đáp án đúng: "To make HTTP requests to APIs". Axios là thư viện HTTP client (máy khách HTTP) dựa trên Promise, chạy được cả trong trình duyệt lẫn Node.js; trong React nó thường được gọi trong useEffect hoặc hàm xử lý sự kiện để gửi GET, POST, PUT, DELETE tới API, tự chuyển dữ liệu JSON, và có interceptor (bộ chặn) để gắn token hay xử lý lỗi tập trung. "To render React components faster" không đúng vì Axios không can thiệp vào quá trình render, tốc độ render phụ thuộc React và các kỹ thuật như React.memo. "To manage component state globally" là việc của Redux hoặc Context, không phải Axios. "To build reusable hooks" là việc của custom hook; ta có thể viết một hook dùng Axios bên trong, nhưng bản thân Axios không phải công cụ để tạo hook.

Đáp án đúng: "{2 + 2}". JSX cho phép nhúng bất kỳ biểu thức JavaScript nào bằng cách đặt nó trong cặp ngoặc nhọn; viết biểu thức đó giữa thẻ h1 mở và đóng thì React tính rồi hiển thị số 4. Ngoặc nhọn là tín hiệu duy nhất để JSX chuyển từ chế độ văn bản sang chế độ JavaScript. "2 + 2" viết trần giữa hai thẻ chỉ là văn bản, màn hình hiện nguyên chuỗi 2 + 2 chứ không tính ra 4. "[2 + 2]" cũng là văn bản thường trong JSX, hiện cả dấu ngoặc vuông; ngoặc vuông chỉ tạo mảng khi đã nằm trong ngoặc nhọn. "(2 + 2)" tương tự hiện nguyên văn kèm ngoặc tròn; ngoặc tròn chỉ nhóm biểu thức trong JavaScript, không phải cú pháp nhúng của JSX.

Đáp án đúng gồm hai ý: "Prevent unnecessary component re-renders" và "Guarantee object references don't change during re-rendering". React.memo bọc một component để React bỏ qua việc render lại nó khi các prop không đổi (so nông từng prop), còn useMemo ghi nhớ kết quả tính toán và trả về đúng đối tượng cũ ở các lần render sau chừng nào mảng phụ thuộc chưa đổi, nhờ đó tham chiếu object hay mảng thường giữ nguyên; chữ Guarantee là nói quá, vì tài liệu React coi useMemo chỉ là tối ưu hiệu năng và React có thể bỏ giá trị đã nhớ, nhưng giữ ổn định tham chiếu vẫn là công dụng được tính ở đây; hai thứ thường đi cùng nhau vì nếu mỗi lần render lại tạo object mới để truyền xuống thì React.memo so prop sẽ luôn thấy khác. "Automatically synchronize component state with global state" sai vì cả hai chỉ là công cụ tối ưu hiệu năng, không đồng bộ state với store toàn cục; việc đó thuộc về Redux hay Context. "Simplify the process of context management" sai vì chúng không quản lý Context; một component đã bọc React.memo vẫn render lại khi giá trị Context mà nó đọc thay đổi.

Đáp án đúng: "It pauses the execution until the Promise resolves or rejects". Bên trong hàm async, await tạm dừng phần còn lại của chính hàm đó cho tới khi Promise đứng sau nó ổn định: fulfilled thì biểu thức await trả về giá trị, rejected thì ném lỗi để try/catch bắt; trong lúc chờ, luồng chính không bị chặn mà vẫn xử lý sự kiện và việc khác. "It immediately executes the next function" ngược với await, chạy tiếp ngay mà không chờ là hành vi khi không dùng await. "It logs the result to the console" sai, ghi ra console là việc của console.log, await không in gì. "It converts a string into a Promise" sai về mục đích: await một giá trị không phải Promise thì nó chỉ bọc giá trị đó bằng Promise.resolve rồi trả lại đúng giá trị ấy, không nhằm chuyển chuỗi thành Promise.