Tất cả câu hỏi

Đáp án đúng: "fetch(url).then((response)=>{ return response.json(); } ).catch(error => console.log(error))". fetch trả về một Promise; then nhận response và trả về response.json(), cũng là một Promise, còn catch đặt ở cuối chuỗi bắt mọi lỗi ném ra ở bất kỳ bước nào trước nó, như lỗi mạng làm fetch bị reject hay lỗi phân tích JSON, rồi ghi ra console. Cần nhớ fetch không reject khi server trả 404 hay 500; muốn coi đó là lỗi thì kiểm response.ok rồi tự ném lỗi trong then. Cách viết "then(response => response.catch(" sai vì response là đối tượng Response chứ không phải Promise, không có phương thức catch, gọi vào sẽ gây TypeError. "fetch(url).catch(error => {{

console.log(error)
}
}
)"

bắt được lỗi mạng nhưng không bao giờ đọc dữ liệu trả về; cặp ngoặc nhọn lồng nhau chỉ là một khối lệnh thừa. Cách viết "then(response => { throw

new Error()
}
)"

luôn ném lỗi kể cả khi yêu cầu thành công, nên catch chỉ ghi ra một lỗi rỗng thay vì xử lý dữ liệu.

Đáp án đúng: "<Suspense fallback={ <div>Loading...</div> }> <LazyComponent /> </Suspense>". Component nạp lười bằng React.lazy phải nằm trong ranh giới Suspense; trong lúc tệp mã của nó còn đang tải, React hiển thị thứ được truyền qua prop fallback (ở đây là khối chữ Loading...), tải xong thì thay bằng LazyComponent. Phương án chứa "<Suspense loader=" sai vì Suspense không có prop loader, React bỏ qua nó, nên trong lúc chờ không có giao diện chờ nào được chỉ định. Phương án chứa "<Await fallback=" nhầm sang component Await của React Router, dùng để chờ một promise trả về từ loader; nó không bọc component lazy và cũng không nhận prop fallback. Phương án chứa "<Loading fallback=" dùng một component không có sẵn trong React; dù tự định nghĩa component Loading, nó cũng không bắt được trạng thái tạm treo khi tải mã như Suspense.

Đáp án đúng: "<Suspense> ". React.lazy cho phép tải một component theo kiểu động, tách nó thành một chunk riêng chỉ được tải khi cần; trong lúc chunk đang tải, component lazy tạm "treo" (suspend), và component Suspense bao ngoài sẽ hiển thị giao diện thay thế đặt trong thuộc tính fallback, chẳng hạn chữ đang tải hoặc vòng quay, cho tới khi mã tải xong. "<ErrorBoundary> " sai vì error boundary là component tự viết để bắt lỗi khi render, kể cả khi tải chunk thất bại; nó thường được dùng kèm nhưng xử lý trạng thái lỗi chứ không phải trạng thái đang tải. "<LoadingComponent> " sai vì React không có component dựng sẵn nào tên như vậy; đó chỉ là tên một component tự đặt mà ta có thể truyền vào fallback. "<Provider> " sai vì Provider của Context hay của react-redux dùng để cung cấp dữ liệu dùng chung cho cây component, không liên quan đến việc tải mã.

Đáp án đúng: "const handleClick = () => { dispatch({ type: 'BUTTON_CLICKED' }); };

<button onClick={
  handleClick
}
>Click me</button>

;". Trong Redux, action là một object thuần bắt buộc có thuộc tính type, và ta gửi nó tới store bằng dispatch; để làm việc đó khi bấm nút, ta định nghĩa hàm handleClick gọi dispatch rồi truyền chính tham chiếu hàm đó cho onClick, để React chỉ gọi nó khi sự kiện click xảy ra. Cách viết onClick={() => handleClick()} cũng chạy được, nhưng chỉ bọc thêm một hàm mũi tên thừa, tạo hàm mới ở mỗi lần render mà không đem lại gì khi không cần truyền tham số, nên không phải cách trực tiếp mà câu hỏi muốn. Cách viết onClick={handleClick()} sai vì dấu ngoặc khiến hàm bị gọi ngay trong lúc render: dispatch chạy mỗi lần render, store đổi, component render lại và dễ thành vòng lặp, còn onClick nhận giá trị trả về undefined nên bấm nút không làm gì. Cách viết dispatch({ action: 'BUTTON_CLICKED' }) sai vì object thiếu thuộc tính type, Redux sẽ báo lỗi action có type undefined và reducer không nhận ra được action này.

Đáp án đúng gồm hai ý: "Fragments allow you to group multiple elements without adding an extra node to the DOM." và "Fragments are particularly useful

for avoiding unnecessary <div> elements, which can clutter your markup.".

Một component chỉ trả về được một phần tử gốc; React.Fragment, hay cú pháp rút gọn <></>, gom nhiều phần tử con thành một nhóm nhưng khi commit vào DOM thì không sinh ra thẻ bao nào, nên tránh được các thẻ div thừa làm rối markup và làm hỏng bố cục flex, grid hay cấu trúc bảng tr, td. Hai ý này là hai mặt của cùng một công dụng. "Fragments allow you to provide CSS styling to multiple elements." sai vì Fragment không tạo nút DOM nên không có chỗ gắn className hay style; Fragment chỉ nhận prop key. "Fragments allow you to handle state management in React." sai vì quản lý state là việc của useState, useReducer hay Context, Fragment không giữ state nào.