Gửi các bạn đồng môn chuẩn bị thi FER202, mình đang học, đang lú, đang run, nhưng vẫn gắng tỉnh táo tổng hợp lại một bộ câu hỏi trắc nghiệm ReactJS từ các nguồn mình đã ôn để chia sẻ lại cho anh em. Bài này không phải đề thi chính thức nha, chỉ là học rồi tóm tắt lại theo kiểu trắc nghiệm, có giải thích rõ từng câu, phục vụ mục tiêu: học là chính, đỗ là mục tiêu, học nhóm là đạo lý.
FER202 - ReactJS là gì?
FER202 là môn học về thư viện ReactJS, một trong những công cụ front-end mạnh mẽ nhất hiện nay. Học React không khó, nhưng thi React thì… hên xui! Vì đề thường không hỏi “làm web thế nào” mà hỏi sâu vào React Hooks, Props, Redux, React Router, TailwindCSS và những thứ đôi khi mình dùng hằng ngày mà chưa hiểu hết bản chất.
Và thế là bộ 120 câu hỏi này ra đời, tại nghe đồn là đề chính thức cũng 60 câu nên tổng hợp kiến thức, giúp mình (và hy vọng là cả bạn nữa) hệ thống lại mọi thứ trước giờ G.
Bộ câu hỏi được tổng hợp như thế nào?
- Tự học + ghi chú lại khi ôn bài + làm quiz online.
- Lấy cấu trúc từ những gì đã học trong Moodle, code lab, thầy dạy trên lớp, cộng với một ít tài liệu cộng đồng chia sẻ.
- Không trích từ đề thi thật, chỉ là những dạng “nghe quen quen” mà ai học ReactJS cũng nên biết.
Có gì trong 60 câu hỏi này?
Bạn sẽ gặp đủ mọi thể loại “cú lừa” trong React:
- useEffect chạy bao nhiêu lần khi deps rỗng?
- Redux Thunk dùng để làm gì?
- Khác biệt giữa
onClick={handleClick}vàonClick={handleClick()}là gì? React.lazy()có retry không?- useParams trả về gì khi URL là
/post/123?
Disclaimer - Không phải đề thi thật!
Phải nói đi nói lại để tránh hiểu lầm: đây KHÔNG phải là đề thi FER202 chính thức. Mình không biết đề thi thật như thế nào đâu. Mình chỉ là một sinh viên tội nghiệp đang ôn thi, và ghi lại những thứ mình học được theo dạng trắc nghiệm, có giải thích, để học dễ hơn thôi.
Nếu có điểm nào sai sót, hoặc bạn thấy câu nào nên sửa, đừng ngần ngại để lại bình luận dưới bài viết để mình cập nhật nhé!
Và hàng tá thứ khác khiến bạn sáng mắt hơn khi đi thi. Mỗi câu đều có lời giải chi tiết, giải thích rõ “vì sao đúng, vì sao sai”, có code ví dụ (nếu cần), giúp hiểu tận gốc chứ không chỉ học vẹt.
Tổng hợp 60 câu trắc nghiệm ôn thi FE môn FER202 - ReactJS (Part 1)
Question 1: What is the main benefit of using React.lazy in a React application?
A. To handle side effects.
B. To create context.
C. To manage state.
D. To split code and load components lazily.
Chọn D
Giải thích: React.lazy cho phép bạn tách các component thành từng phần nhỏ và chỉ tải chúng khi thực sự cần thiết. Điều này giúp giảm dung lượng ban đầu của ứng dụng, tăng tốc độ tải trang và cải thiện hiệu suất. Đây là kỹ thuật code splitting (tách mã) kết hợp với lazy loading (tải chậm).
Question 2: What is the purpose of the PropTypes library in React?
A. To manage state in functional components
B. To enforce component styling
C. To optimize rendering performance
D. To validate the types of props passed to components
Chọn D
Giải thích: Thư viện PropTypes trong React được sử dụng để xác minh kiểu dữ liệu của các props được truyền vào component. Điều này giúp phát hiện lỗi sớm trong quá trình phát triển, đặc biệt khi component nhận nhiều props phức tạp.
Question 3: Which of the following are true about lazy loading components in React?
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
Chọn A, B, C
Giải thích: Lazy loading giúp giảm kích thước gói bundle ban đầu (A), cần được bọc bởi Suspense để hiển thị fallback khi đang tải (B), và cải thiện hiệu năng bằng cách trì hoãn việc tải những component chưa cần dùng ngay (C). Tuy nhiên, React.lazy không tự động retry nếu import bị lỗi (D sai).
Question 4: How would you evaluate the trade-offs between using Redux and Context API for state management?
A. By assessing the ease of debugging.
B. By analyzing the performance impact.
C. By comparing the learning curve.
D. By evaluating the scalability.
Chọn D
Giải thích: Khi so sánh Redux và Context API trong quản lý trạng thái, một trong những tiêu chí quan trọng nhất là khả năng mở rộng (scalability). Redux được thiết kế để hỗ trợ các ứng dụng lớn với luồng dữ liệu phức tạp, trong khi Context API phù hợp hơn với các ứng dụng nhỏ hoặc có cấu trúc đơn giản.
Question 5: Which of the following best evaluates the performance impact of using React.lazy for code splitting?
A. It has no impact on performance.
B. It increases the initial load time.
C. It decreases the initial load time but may increase the time to interactive.
D. It always improves performance.
Chọn C
Giải thích: React.lazy giúp giảm thời gian tải ban đầu bằng cách tách mã, nhưng do component được tải sau khi trang đã bắt đầu render nên có thể làm tăng "time to interactive" – tức là người dùng phải đợi lâu hơn để tương tác được với toàn bộ giao diện.
Question 7: How would you use Redux to manage the state of a form in a React application?
A. By using the useContext hook.
B. By passing props to the form component.
C. By using the useState hook.
D. By creating a reducer for form state.
Chọn D
Giải thích: Redux quản lý trạng thái bằng reducer. Để quản lý state của form, bạn tạo reducer riêng xử lý các hành động nhập liệu, submit, reset,... phù hợp với kiến trúc Redux.
Question 8: What’s the new state after this action: { type: 'DECREMENT', payload: 2 }?
const reducer = (state = { count: 10 }, action) => {
switch (action.type) {
case 'DECREMENT':
return { ...state, count: state.count - action.payload };
default:
return state;
}
};
A. { count: 10 }
B. { count: 12 }
C. { count: 8 }
D. An error
Chọn C
Giải thích: Với count ban đầu là 10, hành động DECREMENT có payload = 2, reducer sẽ trả về count: 10 - 2 = 8.
Question 9: Why might a PropTypes warning not appear in a production build of a React app?
A. Warnings are logged silently in production.
B. PropTypes are replaced by TypeScript in production.
C. Production builds disable all warnings.
D. PropTypes are only checked in development mode.
Chọn D
Giải thích: PropTypes chỉ được kiểm tra trong quá trình phát triển (development). Trong bản build production, các check này bị loại bỏ để giảm kích thước và tăng hiệu suất.
Question 10: What is the main benefit of using React.lazy?
A. Handling side effects.
B. State management.
C. Creating context.
D. Code splitting.
Chọn D
Giải thích: React.lazy dùng để tách component ra thành từng phần riêng biệt, chỉ load khi cần thiết, giúp giảm bundle ban đầu → gọi là code splitting.
Question 11: When evaluating the use of Redux in a large-scale application, which factor is most critical?
A. The size of the state.
B. The frequency of state updates.
C. The complexity of state transitions.
D. The number of components.
Chọn C
Giải thích: Redux đặc biệt hữu ích khi logic thay đổi trạng thái (state transitions) phức tạp, nhiều nhánh (branching logic). Khi đó, reducer sẽ giúp tổ chức state dễ bảo trì và kiểm soát hơn.
Question 12: Analyze the trade-offs between using Redux and local state in a React application.
A. Redux is more scalable.
B. Local state is easier to debug.
C. Local state is more performant.
D. Redux simplifies state management.
Chọn D
Giải thích: Dù Redux phức tạp hơn, nhưng trong các ứng dụng lớn với nhiều component và luồng dữ liệu chia sẻ, Redux giúp tổ chức và quản lý trạng thái một cách rõ ràng, dễ kiểm soát hơn.
Question 13: What is the role of Redux Thunk in a React application?
A. To manage state.
B. To dynamically import components.
C. To create context.
D. To handle asynchronous actions.
Chọn D
Giải thích: Redux Thunk cho phép bạn viết các action dưới dạng hàm thay vì object, giúp xử lý logic bất đồng bộ như gọi API, delay, kiểm tra trước khi dispatch action tiếp theo.
Question 14: Which statements are true about handling errors with lazy-loaded components in React?
import React, { lazy, Suspense } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return (
<Suspense fallback={<div>Loading...</div>}>
<LazyComponent />
</Suspense>
);
}
Chọn A, D
Giải thích: React.lazy không tự xử lý lỗi import. Bạn cần ErrorBoundary để bắt lỗi (A). Nếu không có, app có thể crash (D). Suspense chỉ dùng để hiển thị fallback, không xử lý lỗi (B sai). Không cần try-catch trong import (C sai).
Question 15: How does TailwindCSS differ from traditional CSS?
A. It requires custom media queries.
B. It relies on CSS-in-JS.
C. It uses utility-first classes.
D. It uses inline styles.
Chọn C
Giải thích: TailwindCSS sử dụng phương pháp utility-first, nghĩa là bạn dùng các class nhỏ (ví dụ: p-4, text-center, bg-blue-500) để xây dựng layout thay vì viết CSS riêng cho từng thành phần.
Question 16: When evaluating the use of React.lazy, which aspect is most important to consider?
A. Developer familiarity.
B. Component reusability.
C. Code readability.
D. Bundle size reduction.
Chọn D
Giải thích: React.lazy giúp tách các component ra khỏi bundle chính và chỉ tải khi cần. Điều này giúp giảm bundle size, cải thiện tốc độ tải ban đầu và hiệu suất tổng thể của ứng dụng.
Question 17: What does the useSelector hook do in Redux?
A. Dispatches actions to the store
B. Replaces the connect HOC
C. Creates a new store instance
D. Subscribes to store updates and selects state
Chọn D
Giải thích: useSelector giúp component đăng ký theo dõi thay đổi từ store Redux và lấy ra giá trị cần thiết từ state.
Question 18: What does isRequired do when added to a PropTypes definition?
A. Validates the prop's value range
B. Sets a default value
C. Ensures the prop must be provided
D. Makes the prop optional
Chọn C
Giải thích: isRequired yêu cầu prop phải được truyền vào. Nếu không, React sẽ hiển thị cảnh báo trên console.
Question 19: What is the main benefit of lazy loading components in React?
A. Automatic error handling
B. Simpler component structure
C. Faster initial page load
D. Better state management
Chọn C
Giải thích: Lazy loading giúp chia nhỏ ứng dụng thành các phần tải động, nhờ đó trang chính tải nhanh hơn vì không cần tải toàn bộ mã nguồn ngay từ đầu.
Question 20: How would you evaluate the impact of client-server communication strategies on the user experience in a React app?
A. By evaluating the perceived load time.
B. By assessing the time to first byte.
C. By measuring the server response time.
D. By analyzing the network traffic.
Chọn A
Giải thích: Trải nghiệm người dùng thường bị ảnh hưởng bởi cảm nhận tốc độ tải. “Perceived load time” là chỉ số phản ánh tốt nhất mức độ hài lòng thực tế của người dùng hơn là chỉ số kỹ thuật đơn lẻ.
Question 21: In React Router, how do you navigate to a different route programmatically?
A. By calling the navigate() function.
B. By setting the window.location object directly.
C. By using the history.push() method.
D. By using the <Link> component.
Chọn A
Giải thích: Từ React Router v6 trở đi, việc chuyển hướng được thực hiện bằng cách gọi hàm navigate() từ hook useNavigate(), thay vì history.push() như các phiên bản cũ.
Question 22: How would you set up client-server communication in a Next.js application?
A. By using the fetch API in getServerSideProps.
B. By modifying the next.config.js file.
C. By creating a custom server.
D. By using the useEffect hook.
Chọn A
Giải thích: getServerSideProps trong Next.js cho phép bạn fetch dữ liệu từ server ở thời điểm render và truyền dữ liệu xuống component dưới dạng props. Đây là cách chuẩn để xử lý tương tác client-server phía server side.
Question 23: What warning occurs if you pass name={42} to this component?
import PropTypes from 'prop-types';
function User({ name }) {
return <div>{name}</div>;
}
User.propTypes = {
name: PropTypes.string,
};A. No warning
B. Warning about missing prop
C. Runtime error
D. Warning about type mismatch
Chọn D
Giải thích: PropTypes.string yêu cầu kiểu string, nhưng truyền số 42 sẽ tạo cảnh báo mismatch khi dev chạy ở chế độ phát triển.
Question 24: What is the purpose of getStaticProps in a Next.js application?
A. To fetch data at build time.
B. To manage state.
C. To handle side effects.
D. To create context.
Chọn A
Giải thích: getStaticProps dùng để lấy dữ liệu vào thời điểm build – lý tưởng cho các trang ít thay đổi và hiệu suất cao.
Question 25: How would you implement server-side rendering in a Next.js application?
A. By using getServerSideProps.
B. By creating a custom server.
C. By using the useEffect hook.
D. By modifying the next.config.js file.
Chọn A
Giải thích: getServerSideProps là phương thức chính thức để render trang ở phía server trong Next.js.
Question 26: What does getServerSideProps do in Next.js?
A. Handles side effects.
B. Manages state.
C. Creates context.
D. Fetches data on the server side.
Chọn D
Giải thích: getServerSideProps giúp lấy dữ liệu từ server mỗi lần người dùng truy cập vào trang.
Question 27: What is the role of a reducer in Redux?
A. To dispatch actions
B. To fetch data from APIs
C. To update the state based on actions
D. To connect components to the store
Chọn C
Giải thích: Reducer là một hàm thuần giúp cập nhật state dựa trên hành động (action) được gửi đến.
Question 28: What is the purpose of the event.preventDefault() method in React event?
A. To reset the event object
B. To trigger a re-render
C. To prevent the default browser behavior
D. To stop event bubbling
Chọn C
Giải thích: event.preventDefault() dùng để ngăn trình duyệt thực hiện hành vi mặc định, ví dụ như gửi form.
Question 29: How does React.lazy improve the performance of a React application?
A. By managing state.
B. By reducing the initial load time.
C. By handling side effects.
D. By creating context.
Chọn B
Giải thích: React.lazy giúp tách các component ra khỏi bundle chính và chỉ tải khi cần thiết, nhờ đó giảm thời gian tải ban đầu.
Question 30: How do you define routes in a React application using React Router?
A. By defining routes directly within the component's JSX markup.
B. By using the createRoute() function from React Router.
C. By using the navigate() function provided by React Router.
D. By importing the Route component and rendering it with the appropriate path and component.
Chọn D
Giải thích: Trong React Router, bạn định nghĩa route bằng cách import `Route` và render nó kèm `path` và `element` tương ứng.
Question 31: What renders when the URL is /profile?
import { BrowserRouter, Routes, Route } from 'react-router-dom';
function App() {
return (
<BrowserRouter>
<Routes>
<Route path="/profile" element={<h1>Profile</h1>} />
</Routes>
</BrowserRouter>
);
}A. Nothing
B. A loading spinner
C. <h1>Profile</h1>
D. An error
Chọn C
Giải thích: Khi URL là /profile, component tương ứng sẽ render phần tử <h1>Profile</h1>.
Question 32: How should you fix this code to log the event object when clicking?
function Input() {
const handleClick = (event) => {
console.log(event);
};
return <button onClick={handleClick()}>Click me</button>;
}A. Change onClick={handleClick()} to onClick={(e) => handleClick(e)}
B. Remove the event parameter from handleClick
C. Change onClick={handleClick()} to onClick={e => handleClick}
D. Add event.preventDefault() inside handleClick
Chọn A
Giải thích: Cần truyền callback function, không gọi trực tiếp handleClick(), do đó dùng onClick={(e) => handleClick(e)}.
Question 33: What’s missing from this lazy-loaded component setup?
import React, { lazy } from 'react';
const LazyComponent = lazy(() => import('./LazyComponent'));
function App() {
return <LazyComponent />;
}A. A try-catch block
B. A Suspense component
C. A Route wrapper
D. A useEffect hook
Chọn B
Giải thích: React.lazy cần được bọc trong <Suspense> để xử lý trạng thái loading component khi đang được tải bất đồng bộ.
Question 34: What is the purpose of the fallback prop in the Suspense component?
A. To handle errors during loading
B. To display content while the lazy component loads
C. To set a timeout for loading
D. To define a default route
Chọn B
Giải thích: Thuộc tính fallback giúp hiển thị nội dung thay thế (loading indicator, text...) trong khi component lazy đang được tải.
Question 35: How do you access route parameters in React Router?
A. By using the params prop provided by the <Route> component
B. By using the useParams() hook
C. By parsing the URL manually
D. By accessing this.props.params within the component
Chọn B
Giải thích: Hook useParams() được sử dụng trong React Router v6 để truy cập các tham số từ URL.
Question 36: How would you use TailwindCSS to create a responsive layout in a React application?
A. By using a CSS-in-JS library
B. By using inline styles
C. By writing custom media queries
D. By using TailwindCSS responsive utility classes
Chọn D
Giải thích: TailwindCSS cung cấp các class như md:grid, lg:flex, giúp xây dựng layout responsive một cách nhanh chóng và hiệu quả.
Question 37: What is the role of the BrowserRouter component in React Router?
A. It lazy-loads route components
B. It validates route parameters
C. It defines individual routes
D. It provides history-based navigation for app
Chọn D
Giải thích: BrowserRouter sử dụng History API để điều hướng không tải lại trang, cung cấp trải nghiệm như SPA.
Question 38: Which of the following statements are true about the Redux store in a React application?
Chọn A, C
Giải thích: Redux store chỉ có thể cập nhật qua action, và nó lưu trữ toàn bộ state tree. Không nên mutate trực tiếp state, và không tự re-render tất cả component trừ khi state liên quan thay đổi.
Question 39: Which metric is most useful for evaluating the performance of TailwindCSS in a React project?
A. Developer productivity.
B. Bundle size.
C. Build time.
D. CSS specificity.
Chọn A
Giải thích: TailwindCSS tối ưu hóa năng suất lập trình viên bằng cách cung cấp class tiện ích nhanh chóng, tái sử dụng được, giúp tiết kiệm thời gian phát triển. Do đó, developer productivity là chỉ số quan trọng nhất để đánh giá hiệu quả của TailwindCSS trong dự án React.
Question 40: Why is immutability important in Redux reducers?
A. It ensures predictable state updates
B. It simplifies debugging
C. It prevents memory leaks
D. It improves performance
Chọn A
Giải thích: Tính bất biến (immutability) giúp các reducer hoạt động chính xác và dự đoán được khi cập nhật state, hỗ trợ debugging và kiểm soát trạng thái hiệu quả hơn.
Question 41: What does the useParams hook return in React Router?
A. The full URL string
B. A function to navigate
C. The current route’s component
D. An object with route parameters
Chọn D
Giải thích: Hook useParams() trả về một object chứa các route params từ URL, thường được dùng để lấy các giá trị động như id, slug, v.v.
Question 42: What does this code do when the input changes?
function Form() {
const handleChange = (e) => {
console.log(e.target.value);
};
return <input onchange={handleChange} />;
}A. Logs the entire event object
B. Causes an error due to missing value prop
C. Logs the input value as it changes
D. Logs nothing because onChange is misspelled
Chọn C
Giải thích: Hàm handleChange lắng nghe sự kiện thay đổi input và ghi log e.target.value, tức là giá trị input tại thời điểm thay đổi.
Question 43: How would you optimize a React application using React.lazy and Suspense?
A. By creating a new context.
B. By modifying the webpack configuration.
C. By using the useEffect hook.
D. By wrapping lazy-loaded components with Suspense.
Chọn D
Giải thích: Để sử dụng React.lazy hiệu quả, ta cần bọc component bằng <Suspense> để xử lý trạng thái chờ tải (loading fallback), giúp tối ưu hiệu suất và cải thiện trải nghiệm người dùng.
Question 44: How does React.lazy affect the user experience in a React application?
A. It increases the complexity of the codebase.
B. It improves the initial load time.
C. It delays the loading of non-critical components.
D. It reduces the overall bundle size.
Chọn B
Giải thích: React.lazy giúp chia nhỏ mã và chỉ tải component khi cần, nhờ đó cải thiện thời gian tải ban đầu (initial load time), mang lại trải nghiệm mượt mà hơn cho người dùng.
Question 45: How does Redux help in managing complex state in a React application?
A. By providing a single source of truth.
B. By reducing the amount of state.
C. By simplifying state transitions.
D. By eliminating the need for state.
Chọn A
Giải thích: Redux cung cấp một single source of truth, nơi toàn bộ state được quản lý tập trung tại store. Điều này giúp đồng bộ dữ liệu, dễ debug và mở rộng ứng dụng dễ dàng.
Question 46: What will the following code output when the button is clicked?
function Button() {
const handleClick = () => {
console.log("Button clicked!");
};
return <button onclick={handleClick()>}Click me</button>;
}A. Nothing, the event won't fire
B. "Button clicked!" immediately on render
C. "Button clicked!" when clicked
D. An error will occur
Chọn B
Giải thích: Hàm handleClick() được gọi ngay khi component render vì dấu ngoặc đơn thực thi hàm. Do đó, "Button clicked!" sẽ được log ra ngay lập tức và không có sự kiện click nào thực sự được gắn vì dùng onclick thay vì onClick (sai cú pháp JSX).
Question 47: How does TailwindCSS affect the maintainability of a React project?
A. It has no impact on maintainability.
B. It reduces maintainability by increasing the bundle size.
C. It improves maintainability by enforcing consistent styles.
D. It complicates maintainability by adding more classes.
Chọn C
Giải thích: TailwindCSS giúp duy trì tính nhất quán trong cách viết giao diện nhờ hệ thống class tiện lợi, có tổ chức rõ ràng. Việc dùng các class tiện ích giúp dễ tái sử dụng, giảm việc viết CSS rời rạc, từ đó cải thiện khả năng bảo trì dự án.
Question 48: What is the purpose of the Switch component in React Router?
A. To handle dynamic route changes
B. To switch between different navigation stacks
C. To wrap multiple <Route> components and render only the first one that matches the current location
D. To switch between different layouts in the application
Chọn C
Giải thích: Trong React Router, thành phần Switch (ở các phiên bản cũ) dùng để bao bọc nhiều <Route> và đảm bảo chỉ route đầu tiên khớp với URL hiện tại được render. Điều này giúp tránh việc render nhiều route cùng lúc.
Question 49: How would you handle asynchronous actions in Redux?
A. By creating a new reducer.
B. By using the useEffect hook.
C. By using Redux Thunk or Redux Saga.
D. By using the useState hook.
Chọn C
Giải thích: Redux bản chất chỉ hỗ trợ xử lý đồng bộ. Để xử lý bất đồng bộ như gọi API hoặc delay logic, bạn cần middleware như Redux Thunk (dùng function trả về từ action creator) hoặc Redux Saga (sử dụng generator function để xử lý side effects).
Question 50: Why might nested routes be preferred over flat routes in a large React application?
A. They prevent route conflicts
B. They automatically handle lazy loading
C. They allow better code organization and UI hierarchy
D. They reduce the bundle size
Chọn C
Giải thích: Nested routes trong React Router giúp tổ chức mã nguồn tốt hơn bằng cách phản ánh cấu trúc giao diện lồng nhau (UI hierarchy). Điều này làm cho ứng dụng dễ mở rộng, bảo trì và tái sử dụng thành phần hơn trong các hệ thống lớn.
Question 51: In React, why should you avoid calling a function directly in an event handler like onClick={handleClick()}?
A. It causes a syntax error
B. It's slower than using a reference
C. It runs the function immediately on render
D. It prevents event propagation
Chọn C
Giải thích: Khi bạn viết onClick={handleClick()}, hàm handleClick() sẽ được thực thi ngay lập tức khi component render, chứ không phải khi người dùng nhấn nút. Để truyền tham chiếu hàm, bạn cần viết onClick={handleClick}.
Question 52: What is the purpose of client-server communication in a React application?
A. To create context.
B. To manage state.
C. To fetch data from an API.
D. To handle side effects.
Chọn C
Giải thích: Trong ứng dụng React, giao tiếp client-server được sử dụng chủ yếu để lấy dữ liệu từ các API – ví dụ như dữ liệu người dùng, danh sách sản phẩm,... Sau khi fetch dữ liệu, component có thể render lại với thông tin cập nhật.
Question 53: How does TailwindCSS differ from CSS frameworks like Bootstrap?
A. It requires custom media queries.
B. It uses utility-first classes.
C. It uses inline styles.
D. It relies on CSS-in-JS.
Chọn B
Giải thích: Điểm khác biệt chính của TailwindCSS so với các framework như Bootstrap là Tailwind sử dụng utility-first classes, cho phép bạn xây dựng giao diện trực tiếp trong HTML bằng cách kết hợp các lớp nhỏ có chức năng cụ thể, thay vì dùng các thành phần UI dựng sẵn như trong Bootstrap.
Question 54: Analyze the impact of using React.lazy on the overall architecture of a React application.
A. It complicates the architecture.
B. It has no impact on the architecture.
C. It requires a complete redesign.
D. It simplifies the architecture.
Chọn D
Giải thích: React.lazy giúp đơn giản hóa kiến trúc ứng dụng bằng cách chia nhỏ component và chỉ load khi cần (code splitting). Điều này giúp tối ưu hiệu suất mà không cần viết cấu trúc phức tạp hoặc thay đổi thiết kế tổng thể, chỉ cần bao bọc component bằng React.Suspense.
Question 55: Why might lazy loading fail if a network request times out?
A. React doesn’t retry failed imports
B. All of them
C. Suspense doesn’t handle network errors
D. The lazy function lacks built-in error handling
Chọn B
Giải thích: Lazy loading có thể thất bại khi request bị timeout vì nhiều lý do: React không tự động retry khi import lỗi, Suspense không xử lý lỗi mạng mặc định, và hàm `lazy()` không có xử lý lỗi tích hợp sẵn. Do đó, tất cả các yếu tố đều góp phần gây ra lỗi.
Question 56: How would you implement code splitting using React.lazy in a React application?
A. By importing components dynamically.
B. By creating a new context.
C. By modifying the webpack configuration.
D. By using the useEffect hook.
Chọn A
Giải thích: React.lazy() cho phép bạn import component một cách động (dynamic import). Điều này giúp chia nhỏ bundle của ứng dụng, chỉ tải component khi cần, từ đó cải thiện hiệu suất. Ví dụ:
const MyComponent = React.lazy(() => import('./MyComponent'));Việc này không yêu cầu thay đổi cấu hình webpack hay hook đặc biệt như useEffect.
Question 57: Analyze the role of client-server communication in a React application.
A. It determines the application's scalability.
B. It has no impact on the application.
C. It simplifies the application's architecture.
D. It affects the application's performance.
Chọn D
Giải thích: Client-server communication ảnh hưởng trực tiếp đến hiệu suất (performance) của ứng dụng React. Việc gửi và nhận dữ liệu từ server mất thời gian, nếu không được tối ưu sẽ gây chậm phản hồi, loading chậm, ảnh hưởng đến trải nghiệm người dùng. Do đó, kỹ thuật như caching, pagination, hoặc lazy loading thường được dùng để cải thiện performance.
Question 58: Which factor is most critical when evaluating the use of TailwindCSS in a team environment?
A. Ease of use.
B. Performance.
C. Customizability.
D. Consistency in design.
Chọn D
Giải thích: Trong môi trường làm việc nhóm, yếu tố quan trọng nhất khi đánh giá TailwindCSS là khả năng **đảm bảo tính nhất quán trong thiết kế (consistency in design)**. Với các utility class định nghĩa sẵn và tiêu chuẩn hóa, Tailwind giúp cả nhóm cùng tuân thủ một hệ thống thiết kế thống nhất, tránh tình trạng mỗi người viết một kiểu khác nhau.
Question 59: How do you extract the id from /post/123 in this component?
import { useParams } from 'react-router-dom';
function Post() {
const params = useParams();
return <div>{____}</div>;
}A. params[0]
B. params.post.id
C. params.get("id")
D. params.id
Chọn D
Giải thích: Trong React Router v6, hook useParams() trả về một object chứa các tham số trong URL. Nếu đường dẫn là /post/:id thì useParams() sẽ trả về đối tượng như { id: '123' }. Vì vậy để lấy ID, ta dùng params.id.
Question 60: What is the primary function of Redux Thunk?
A. Dynamically importing components.
B. Creating context.
C. Handling asynchronous actions.
D. Managing state.
Chọn C
Giải thích: Redux Thunk là một middleware cho Redux, cho phép bạn viết các action creators trả về một hàm thay vì một đối tượng. Nhờ vậy bạn có thể xử lý các logic bất đồng bộ như gọi API trong Redux. Đây là cách phổ biến để xử lý asynchronous actions trong ứng dụng Redux.
Tổng hợp 60 câu trắc nghiệm ôn thi FE môn FER202 - ReactJS (Part 2)
1. How can you render JSX in a React component?
A. By using the React.render() function
B. By passing the JSX as a string to the ReactDOM.render() function
C. By using the renderJSX() function
D. By enclosing the JSX in curly braces () within the component's render() method
2. What are Higher-Order Components in React?
A. Components with multiple props
B. Components with multiple states
C. Advanced components
D. Components written in JavaScript
3. In Redux, how do you update the state immutably?
A. By creating a new copy of the state object
B. By using the splice() method
C. By using the setState() method
D. By directly modifying the state object
4. What is the purpose of arrow functions in ES6?
A. To declare asynchronous functions
B. To define functions with a shorter syntax
C. To bind the value of this inside a function
D. To create self-executing functions
5. Which code snippet demonstrates how to declare a basic route in React Router?
A. <Route path="/about" component={About} />
B. <Link to="/about">About</Link>
C. import {'{ Link, Route }'} from "react-router-dom"
D. import {'{ BrowserRouter as Router, Route }'} from "react-router-dom"
6. How can you optimize performance when using Hooks in React?
A. By using the useLayoutEffect Hook instead of useEffect
B. By using the useMemo and useCallback Hooks
C. By using the useDebugValue Hook for debugging purposes
D. By avoiding unnecessary re-renders with the memo Hook
7. How do you install Tailwind CSS in a project?
A. Use the npx tailwindcss init command
B. Install Tailwind CSS globally with npm
C. Use the npm install tailwind-css command
D. Include the Tailwind CSS CDN in the HTML file
8. How can you create a new React application using Create React App?
A. By cloning a Git repository
B. By downloading a ZIP file from the official website
C. By running "npm create-react-app my-app"
D. By using an online code editor
9. What is the purpose of package.json in a Node.js project?
A. It contains the source code of the project
B. It defines the project's dependencies and scripts
C. It configures the Node.js environment
D. It manages the project's build process
10. What is a Component in React?
A. It is an HTML framework
B. It is a single UI element
C. It is a JavaScript function
D. It is a Python class
11. What is the purpose of the exact prop in a Route component?
A. It defines a redirect to another route
B. It enables code splitting for the route component
C. It ensures that the route matches the URL exactly, without partial matching
D. It specifies the component to render for a specific route
12. What is the purpose of the next/link module in Next.js?
A. It is responsible for server-side rendering
B. It provides client-side routing capabilities
C. It is used for handling form submissions
D. It enables serverless function deployment
13. How do you import React Router components in the code?
A. import (BrowserRouter, Routes, Route) from 'react-router-dom'
B. import (BrowserRouter as Router, Routes, Route) from 'react-router-dom'
C. import (Router, Routes, Route) from 'react-router-dom'
D. import (Router, Switch, Route) from 'react-router-dom'
14. Which prop is used to define default values for props in a functional component in React 18?
A. defaultValue
B. props
C. initialProps
D. defaultProps
15. What is the advantage of event pooling in React?
A. It reduces memory usage by reusing event objects
B. It improves event handling performance by creating new event objects for each event
C. It simplifies event handling by providing a pool of event handlers
D. It allows for better management of event contexts
16. What happens if a component tries to consume a context that has not been provided higher up in the component tree?
A. The component throws an error
B. The component receives an empty object as the context value
C. The component receives null as the context value
D. The component receives a default value specified in the context definition
17. How would you use the useContext Hook to access a shared theme in a React component?
A. const theme = useContext(ThemeContext);
B. const {'{theme}'} = useContext(ThemeContext);
C. const theme = useContext(ThemeContext.Provider);
D. const {'{theme}'} = useContext(ThemeContext.Provider);
18. How do you make an HTTP GET request using window.fetch?
A. fetch(url, { method: 'POST' })
B. fetch.get(url)
C. fetch(url, { method: 'GET' })
D. fetch.get(url, {})
19. Which class is used to create a form input with a validation state in Bootstrap 5?
A. .form-control
B. form-validation
C. .form-check
D. input-group
20. How does async/await work in JavaScript?
A. It automatically converts asynchronous code into synchronous code
B. It allows synchronous execution of asynchronous code
C. It runs asynchronous code in parallel with synchronous code
D. It pauses the execution until a promise is resolved or rejected
21. What is the purpose of the useState Hook in React?
a. To handle side effects in functional components
b. To manage context in functional components
c. To manage state in functional components
d. To handle routing in React applications
22. Which HTTP method is typically used to update a resource in a RESTful API?
a. GET
b. POST
c. DELETE
d. PUT
23. How can you define a default prop value in a React component?
a. Using PropTypes.defaultProps
b. Using the defaultProps static property
c. Using the default keyword in the prop definition
d. Using the props.default property
24. What is the purpose of the useEffect Hook in React?
a. To perform side effects in functional components
b. To manage state in functional components
c. To handle routing in React applications
d. To create custom Hooks
25. Which of the following is true about the map() method in JavaScript ES6?
a. It modifies the original array
b. It is used to filter elements from an array
c. It creates a new array with the results of calling a function for every array element
d. It iterates over an array without returning anything
26. How do you access route parameters in a React Router component?
a. Using this.props.params
b. Using props.route.params
c. Using useRouteParams() Hook
d. Using the useParams() Hook
27. What is the purpose of the data-bs-toggle attribute in Bootstrap 5?
a. To style elements dynamically
b. To enable interactive behavior like modals or tooltips
c. To apply responsive classes
d. To handle form submissions
28. Which of the following is a key benefit of using the Virtual DOM in React?
a. It improves rendering performance by minimizing direct DOM manipulation
b. It allows direct manipulation of the DOM for better control
c. It integrates with SQL databases
d. It enables two-way data binding
29. How can you prevent a component from rendering in React?
a. By using the render method with a null return
b. By setting display: none in CSS
c. By returning null from the component’s render function
d. By using the componentWillUnmount lifecycle method
30. What is the purpose of the key prop in React when rendering a list?
a. To style list items uniquely
b. To help React identify which items have changed, added, or removed
c. To bind event handlers to list items
d. To specify the order of list items
31. Which method is used to handle errors in a Promise chain?
a. .catch()
b. .then()
c. .finally()
d. .error()
32. What is the role of the useContext Hook in React?
a. To manage state in functional components
b. To handle side effects in functional components
c. To create custom Hooks
d. To access context values in functional components
33. In Bootstrap 5, which class is used to create a responsive grid column?
a. .row
b. .container
c. .col
d. .grid
34. What is the purpose of the useReducer Hook in React?
a. To handle side effects in functional components
b. To manage complex state logic in functional components
c. To manage context in functional components
d. To perform routing in React applications
35. Which of the following is true about arrow functions in ES6?
a. They do not have their own `this` binding
b. They cannot be used as constructors
c. They cannot be used in arrays
d. They always return a value implicitly
36. How do you create a controlled component in React?
a. By using the useEffect Hook
b. By using the useContext Hook
c. By binding input values to state and handling changes with onChange
d. By using the useReducer Hook
37. Which of the following best describes a reducer in Redux?
a. A function that triggers actions in response to user interactions
b. A component that manages the application's state
c. A function that specifies how the application's state changes in response to actions
d. A middleware that handles asynchronous operations in Redux
38. How do you handle multiple Promises simultaneously in JavaScript?
a. By using the then method with multiple callbacks
b. By using the Promise.all method
c. By using the Promise.race method
d. By using the catch method with multiple error handlers
39. Which of the following statements about Redux selectors is true?
a. Selectors are used to modify the Redux store directly
b. Selectors are pure functions that derive specific data from the Redux store
c. Selectors are responsible for dispatching actions
d. Selectors are only used in React class components
40. How can you configure Tailwind CSS in a Next.js project?
a. By using a CDN link in the HTML file
b. By importing a CSS file directly in the component
c. By installing a Tailwind CSS plugin for Next.js
d. By installing the Tailwind CSS package and creating a configuration file
41. What is the purpose of json-server in the context of setting up a server?
a. To handle user input and interactions
b. To display the website content
c. To provide a static web server for serving JSON data
d. To generate dynamic server responses
42. What does ES6 stand for?
a. Efficient Syntax Language 6
b. ECMAScript 6
c. Enhanced Scripting Language 6
d. Extensible Stylesheet Language 6
43. In Redux, when should you use combineReducers?
a. When you want to use Redux DevTools to track the state
b. When you want to connect the Redux store to a React component
c. When you want to split a reducer into smaller reducers
d. When you want to manage actions in the Redux application
44. What is the correct way to declare PropTypes for a component in React?
a. Component props = {...}
b. Component.typeCheck = {...}
c. Component.propTypes = {...}
d. Component.checkProps = {...}
45. Which of the following is a common use case for using Redux in a React application?
a. Managing authentication and user sessions
b. Styling and layout of React components
c. Handling form validation and input tracking
d. Implementing server-side rendering in React
46. How do you make an HTTP GET request using window.fetch?
a. fetch.get(url)
b. fetch(url, { method: 'POST' })
c. fetch.get(url, 0)
d. fetch(url, { method: 'GET' })
47. How can you declare PropTypes for a prop that is an array of integers?
a. prop: PropTypes.arrayOf(PropTypes.number)
b. prop: PropTypes.arrayOf(PropTypes.integer)
c. prop: PropTypes.array(PropTypes.number)
d. prop: PropTypes.array(PropTypes.integer)
48. How do you chain multiple asynchronous operations using Promises?
a. By using the Promise.race method
b. By nesting multiple then methods
c. By using the Promise.all method
d. By using the async/await syntax
49. Which class is used to create a collapsible accordion component in Bootstrap 5?
a. accordion
b. collapse accordion
c. .collapse
d. .collapsible
50. What is the purpose of async/await in JavaScript?
a. To handle errors in synchronous code
b. To perform mathematical calculations
c. To manipulate the DOM
d. To define asynchronous functions
51. How can you handle errors in an async/await function when making a network request with Axios in JavaScript?
a. Use the .catch() method on the Axios request promise to handle any errors that occur
b. Assign the Axios request to a variable and use a .then() and .catch() chain to handle success and error cases
c. Use the try keyword before the Axios request and the catch keyword after the request to handle errors
d. Wrap the entire function body in a try/catch block and handle the error inside the catch block
52. What are the differences between useState and useReducer Hooks in React?
a. useState is for local component state, while useReducer is for global application state
b. useState is a built-in Hook, while useReducer is a custom Hook
c. useState is used for managing simple state, while useReducer is used for complex state and state transitions
d. useState is used for class components, while useReducer is used for functional components
53. How do you define a lazy component in React?
a. const MyComponent = import("./MyComponent").lazy()
b. const MyComponent = React.importLazy("./MyComponent")
c. const MyComponent = lazy(() => import("./MyComponent"))
d. const MyComponent = React.lazy(() => import("./MyComponent"))
54. How do you wrap a lazy component with Suspense in React?
a. <Suspense wait={<Loading />}> <MyComponent /> </Suspense>
b. <Suspense fallback={<Loading />} loading={<MyComponent />}/>
c. <Suspense fallback={<Loading />}> <MyComponent /> </Suspense>
d. <Suspense loading={<Loading />}> <MyComponent /> </Suspense>
55. Which feature of ES6 is used to iterate over the elements of an array?
a. for...of loop
b. Spread syntax
c. Destructuring assignment
d. Arrow functions
56. In Redux, how do you update the state immutably?
a. By creating a new copy of the state object
b. By directly modifying the state object
c. By using the setState() method
d. By using the splice() method
57. What is the purpose of PropTypes?
a. To handle asynchronous operations in React
b. To improve performance in React applications
c. To enable code reusability in React components
d. To ensure type safety in React components
59. What is the purpose of the next/link module in Next.js?
a. It is used for handling form submissions
b. It provides client-side routing capabilities
c. It is responsible for server-side rendering
d. It enables serverless function deployment
60. Which of the following is a utility-first CSS framework that is often used with Next.js?
a. Material-UI
b. Tailwind CSS
c. Bootstrap
d. Bulma
Lời cuối trước giờ G
Mình viết bài này khi bản thân cũng đang loay hoay ôn thi FER202. Mỗi câu hỏi là một lần gãi đầu, mỗi lời giải là một lần mình phải tra lại docs, thử code và ngẫm nghĩ. Vì vậy nếu bạn thấy bài viết này có ích, nghĩa là chúng ta đang cùng nhau học nghiêm túc và không đơn độc trong cuộc chiến với ReactJS
Một lần nữa, bài viết này không chứa đề thi thật. Đây chỉ là tài liệu tự học, tổng hợp kiến thức theo dạng trắc nghiệm, vì mình (và có thể bạn cũng vậy) học theo dạng câu hỏi thì dễ nhớ hơn, đỡ buồn ngủ hơn, và... giống khi đi thi hơn
Nếu bạn thấy có sai sót, thiếu logic hoặc cần chỉnh lại, cứ để lại bình luận góp ý. Mình sẽ chỉnh sửa lại ngay để mọi người cùng học tốt hơn.
Chúc bạn thi thật tốt, React không gãy, Redux không lỗi, và JSX không xoắn não! Fighting
