Preparing to become an Expert in React.js? This Top React MCQs collection is your ultimate resource. It includes frequently asked multiple-choice questions, categorized for comprehensive learning, to evaluate your expertise and identify areas for improvement.
Note: Score 60% or higher to unlock an exclusive offer of up to 50% off on all self-paced React courses.
Let's begin!
1. What is React primarily used for?
2. Which company originally created and open-sourced React?
3. What is the Virtual DOM in React?
4. What does “declarative” mean in the context of React's programming model?
5. What is a “component” in React?
6. What is “reconciliation” in React?
7. Which of the following best describes React's unidirectional data flow?
8. What is “Create React App” (CRA) traditionally used for?
9. What file extension is commonly used for React component files that contain JSX?
10. What does “React Fiber” refer to?
11. What does JSX stand for?
12. Which of the following is true about JSX?
13. In JSX, how do you embed a JavaScript expression inside markup?
14. What must every JSX expression ultimately return or resolve to?
15. What is a React Fragment used for?
16. Which of the following is a functional component in React?
17. What is the purpose of the “key” prop when rendering a list of elements in React?
18. Which attribute is used in JSX instead of the HTML “class” attribute?
19. What is “props.children” used for in a React component?
20. What does a “controlled component” mean in the context of form elements in React?
21. What are “props” in React?
22. Can a child component directly modify the props it receives from its parent?
23. What is “state” in a React component?
24. In a functional component, which hook is used to add local state?
25. What happens to a React component when its state changes via the state setter function?
26. What is “prop drilling”?
27. Which technique is commonly used to avoid excessive prop drilling in a React application?
28. What does “lifting state up” mean in React?
29. What is true when passing a function as a prop to a child component?
30. What is PropTypes used for in a React application?
31. What rule must be followed regarding where Hooks can be called in a component?
32. What does the useEffect hook allow you to do in a functional component?
33. What does passing an empty dependency array ([]) to useEffect typically cause?
34. What does the cleanup function returned from useEffect do?
35. Which hook lets you access a mutable value that persists across renders without causing a re-render when it changes?
36. What is a common use case for the useRef hook?
37. Which hook allows a component to consume a value from React Context without wrapping it in a Context.Consumer component?
38. What is the typical return value of the useState hook?
39. Why should you avoid directly mutating state returned by useState (e.g., pushing to an array in place)?
40. Which of these is NOT one of the built-in Hooks provided by React?
41. What does the useMemo hook do?
42. What does the useCallback hook return?
43. When is useCallback particularly useful?
44. What is the primary purpose of the useReducer hook?
45. What are the typical arguments passed to a reducer function used with useReducer?
46. What is a “custom hook” in React?
47. Which naming convention should custom hooks follow?
48. What does the useLayoutEffect hook do differently compared to useEffect?
49. What is the purpose of the “dependency array” passed to hooks like useEffect, useMemo, and useCallback?
50. What does the useId hook, introduced in React 18, help generate?
51. In class components, which lifecycle method runs once immediately after a component is inserted into the DOM?
52. Which class component lifecycle method is called right before a component is removed from the DOM?
53. Which lifecycle method can be used to catch JavaScript errors in a component tree and display a fallback UI?
54. What is an “Error Boundary” in React?
55. Which class component method can be used to prevent unnecessary re-renders by returning false?
56. What triggers a React functional component to re-render?
57. What is React.memo() used for?
58. In the component rendering process, what does “mounting” refer to?
59. What does “unmounting” refer to in a component's lifecycle?
60. Why is it generally recommended to avoid calling hooks conditionally inside a component?
61. How are event handlers typically named and attached in JSX, such as for a click event?
62. What is React's “SyntheticEvent”?
63. In a controlled form input, what typically updates the input's value as the user types?
64. What does calling event.preventDefault() inside a form's submit handler typically do?
65. What is an “uncontrolled component” in the context of React forms?
66. Which approach is commonly used to read the value of an uncontrolled input when the form is submitted?
67. How would you typically pass an argument to an event handler function in JSX?
68. What is a common cause of an event handler firing multiple times unexpectedly for the same click?
69. Which popular third-party library is commonly used with React for managing complex form state and validation?
70. What does “event bubbling” refer to in the context of DOM/React events?
71. What is React Router primarily used for?
72. In React Router, which component is commonly used to define a mapping between a URL path and the component to render?
73. Which React Router component is typically used to create navigational links without causing a full page reload?
74. In modern versions of React Router, which hook is commonly used to programmatically navigate to a different route from within a component?
75. Which React Router hook allows a component to read dynamic segments (parameters) from the current URL?
76. What is a “nested route” in React Router used for?
77. Which component acts as a placeholder where a matched child route's element should be rendered within a parent route?
78. What is typically used to implement a “protected route” that redirects unauthenticated users to a login page?
79. Which hook is commonly used in React Router to read query parameters (the part of the URL after “?”) in modern versions?
80. What is “code splitting” often paired with when setting up routes in a large React application?
81. What is the main purpose of React's Context API?
82. Which two main pieces are typically created and used together with the Context API?
83. What is Redux primarily used for in a React application?
84. In Redux, what is a “reducer”?
85. In Redux, what is an “action”?
86. Which official React-Redux hook is used to read data from the Redux store inside a component?
87. Which official React-Redux hook is used to dispatch actions to the Redux store?
88. Which modern, lightweight state management library has gained popularity as a simpler alternative to Redux for many React projects?
89. What is a common downside of overusing the Context API for frequently changing, high-frequency state?
90. Which tool is commonly used alongside Redux for handling asynchronous logic, such as API calls?
91. Which built-in React feature helps prevent a functional component from re-rendering when its props haven't changed?
92. What is “code splitting” in a React application primarily used for?
93. Which built-in React function is used to lazily load a component only when it's needed?
94. What does the
95. What is “virtualization” (or windowing) used for when rendering very long lists in React?
96. Why might unnecessary re-renders hurt performance in a large React application?
97. What is a common technique to avoid creating a new function or object on every render when passing it as a prop?
98. What does the React DevTools Profiler help developers do?
99. Which of the following is a good practice for optimizing images in a React application to improve performance?
100. What is “tree shaking” in the context of a React application's build process?
101. Which testing library is commonly used alongside Jest to test React components by focusing on how users interact with them?
102. What is Jest primarily used for in a React project?
103. What is a “snapshot test” in the context of React component testing?
104. What browser/developer tool extension is commonly used to inspect the React component tree, props, and state during development?
105. Why is it generally recommended to test behavior from the user's perspective rather than internal implementation details?
106. What is a common way to simulate user events, like clicking a button, in a React Testing Library test?
107. What does “mocking” an API call in a React component test typically involve?
108. Which common React warning appears in the console when rendering a list of elements without unique “key” props?
109. What is a helpful first debugging step when a React component isn't re-rendering as expected after a state update?
110. What does React's “Strict Mode” help developers do during development?
111. What major concurrent rendering feature did React 18 introduce to help keep apps responsive during large updates?
112. What does the useTransition hook, introduced in React 18, help you do?
113. What are React Server Components (RSC) designed to do?
114. Which popular React framework popularized and shipped React Server Components at scale, along with its App Router?
115. In a Next.js App Router project using Server Components, what directive is used at the top of a file to mark a component as a Client Component?
116. What is the purpose of React's “Actions” (and the related useActionState hook) introduced around React 19?
117. What does the useOptimistic hook (introduced in React 19) help you implement?
118. What is “hydration” in the context of server-rendered React applications (e.g., with Next.js)?
119. What is a key advantage of Server-Side Rendering (SSR) for a React application?
120. Which build tool has become a popular, faster alternative to Webpack for many modern React projects, offering fast Hot Module Replacement (HMR)?
121. What is the latest major React version as of October 2026?
122. Which React 19.3 feature provides built-in support for animating UI transitions?
123. What does the React 19.3 <ViewTransition> component primarily do?
124. Which type of update can trigger a React View Transition animation?
125. Which four transition types can a ViewTransition conceptually represent?
126. What is the purpose of addTransitionType() in React 19.3?
127. What problem do Fragment Refs in React 19.3 address?
128. What object can a Fragment ref expose in React 19.3?
129. Which operation can a FragmentInstance help manage for its first-level DOM children?
130. Why can Fragment Refs be useful for component libraries?
131. What is React Compiler primarily designed to do?
132. Which version of React Compiler was released as the first stable release?
133. How does React Compiler generally improve performance?
134. What is a major benefit of React Compiler compared with relying entirely on manual memoization?
135. Does React Compiler make useMemo(), useCallback(), and React.memo() completely invalid?
136. What is an important requirement for code to work reliably with React Compiler?
137. Which tool provides compiler-powered lint rules for React?
138. What does incremental adoption of React Compiler mean?
139. Why can strong automated tests be especially useful when adopting React Compiler?
140. Which statement best describes React Compiler's optimization stage?
141. What is the purpose of React's <Activity> component?
142. Which modes does Activity support in React 19.2?
143. What happens to effects when an Activity subtree is hidden?
144. Why can Activity improve navigation experiences?
145. What problem does useEffectEvent help solve?
146. What is a key property of an Effect Event created with useEffectEvent?
147. Where should useEffectEvent be called?
148. Where should an Effect Event generally be invoked?
149. Why should useEffectEvent not be used simply to silence an exhaustive-dependencies warning?
150. Which React version introduced Activity and useEffectEvent as notable new features?
151. What is a React Action generally used for?
152. Which React 19 hook helps manage the result and pending state of an Action?
153. What does useActionState return as part of its result?
154. What does useOptimistic allow a React application to implement?
155. What is a key advantage of React 19 form Actions?
156. What does useFormStatus help a form component determine?
157. What is the purpose of the action prop on a React 19 form?
158. What can happen after a successful React form Action completes?
159. Why are optimistic updates useful in interactive applications?
160. If an optimistic update fails on the server, what should a well-designed React application do?
161. What is a major purpose of React Server Components?
162. Which statement about React Server Components is correct?
163. Why are React Server Components commonly used together with frameworks?
164. What does the "use client" directive generally indicate in an RSC-based application?
165. What is a major security concern when using React Server Functions?
166. Why should React Server Component dependencies be kept up to date?
167. What type of vulnerability was disclosed in December 2025 affecting certain React Server Components packages?
168. Which React Server Components packages were specifically affected by the major 2025 security issue?
169. What is hydration in a server-rendered React application?
170. What can cause a hydration mismatch?
171. What does the browser() API in React 19.3 help a component do?
172. How does use(browser()) behave during server rendering?
173. What is Trusted Types primarily designed to help prevent?
174. What does React 19.3 improve regarding Trusted Types?
175. Which Content Security Policy directive is associated with enforcing Trusted Types for script-related injection sinks?
176. Which is a good security practice for React applications that communicate with server APIs?
177. Why should secrets not be placed directly in client-side React code?
178. Which approach is safer when rendering user-provided HTML in React?
179. What should a React team do after a serious security advisory affects its dependencies?
180. Why is dependency auditing important in modern React projects?
181. What is Partial Pre-rendering designed to enable?
182. Which React 19.2 capability is associated with Partial Pre-rendering?
183. What is a major benefit of Partial Pre-rendering?
184. What do React Performance Tracks provide?
185. Which React Performance Track helps developers understand scheduling priorities and React work?
186. What does the Components track in React performance tooling help show?
187. Why is Suspense useful in modern React applications?
188. What is streaming server rendering useful for?
189. Which approach is generally best for improving React performance?
190. A React application has unnecessary re-renders and the team is using React 19.3. Which modern approach should they consider first?
You Can Also Check:
1. 40 Best ReactJS Interview Questions and Answers
2. Top 70 React Native Interview Questions and Answers
3. What is React Native and How Does It Work?
4. React Native Tutorial for Beginners
5. Top JavaScript Interview Questions and Answers
6. Top Frontend Developer Interview Questions and Answers
