Every React interview comes back to hooks. This set goes past the basics and looks at how hooks behave in real code: why the rules of hooks exist, how effect dependencies and cleanup work, when a ref is better than state, and how custom hooks share logic.
How to practise: read each question and tap the option you think is correct. You will see right away whether you got it, along with a short explanation, and your score is tracked at the bottom of the screen. This set has 16 questions.
Topics covered in this set
- Rules of hooks
- useState lazy initialisation and object state
- useEffect dependencies and cleanup
- useRef vs useState
- useLayoutEffect, useReducer and useId
- Custom hooks and StrictMode behaviour
React MCQs with answers and explanations
Q1. Why must hooks be called at the top level of a component and not inside conditions or loops?
a) Because ESLint cannot parse conditions
b) Because React identifies each hook by the order in which it is called on every render
c) Because hooks are slow inside if blocks
d) Because hooks only work in class components otherwise
Q2. What is the benefit of writing useState(() => buildInitialList()) instead of useState(buildInitialList())?
a) buildInitialList runs only on the first render instead of on every render
b) There is no difference
c) The state becomes read-only
d) It makes the state update synchronous
Q3. user is { name: 'A', age: 30 }. After setUser({ name: 'B' }), what is user.age?
a) 30
b) null
c) undefined
d) It throws an error
Q4. When does the cleanup function returned from useEffect run?
a) Only in production builds
b) Immediately after the effect runs
c) Before the effect runs again because its dependencies changed, and when the component unmounts
d) Only when the component unmounts
Q5. An effect reads the query prop but its dependency array is []. What is the likely bug?
a) React throws an error
b) The effect runs only once and keeps using the first query, so later changes are ignored
c) The effect runs on every render
d) The component never renders
Q6. A component creates const options = { page: 1 } in its body and passes options to an effect's dependency array. What happens?
a) The effect runs once
b) The effect runs after every render because a new object is created each time
c) React deep-compares the object
d) The effect never runs
Q7. Which statement about useRef is correct?
a) Changing ref.current triggers a re-render
b) useRef can only hold DOM elements
c) Refs are reset on every render
d) ref.current persists between renders and changing it does not trigger a re-render
Q8. Where should you store an interval ID so you can clear it later from an event handler?
a) In a CSS variable
b) In a useState variable
c) In a useRef
d) In a global variable
Q9. How is useLayoutEffect different from useEffect?
a) useLayoutEffect runs before rendering
b) useLayoutEffect runs on the server only
c) useLayoutEffect runs synchronously after DOM changes but before the browser paints
d) They are identical
Q10. In development with StrictMode, you notice that each effect runs setup, then cleanup, then setup again on mount. Why?
a) The component is rendered twice in production too
b) StrictMode disables effects
c) It is a bug in React
d) React deliberately remounts components once to expose effects with missing cleanup
Q11. Two components each call a custom hook useCounter(). Do they share the same count?
a) Only if wrapped in React.memo
b) Only if they are siblings
c) Yes, custom hooks share state globally
d) No, each call has its own independent state
Q12. Why must a custom hook's name start with use?
a) So it runs faster
b) So React and the linter can recognise it as a hook and apply the rules of hooks to it
c) So it is exported automatically
d) It is required for the code to compile
Q13. When is useReducer usually a better choice than several useState calls?
a) When state is a single boolean
b) When you need to fetch data
c) When you want to avoid re-renders entirely
d) When the next state depends on the previous state through several related actions, such as a form or a wizard
Q14. A search component fetches results in useEffect whenever query changes. Slow older responses sometimes overwrite newer ones. What is the standard fix?
a) Remove the dependency array
b) Set an ignore flag or abort the request in the effect's cleanup
c) Use useLayoutEffect
d) Call the fetch twice
Q15. What happens when you call a state setter with a value that is the same (by Object.is) as the current state?
a) The state is reset to its initial value
b) React throws an error
c) React can bail out and skip re-rendering the children and effects
d) React always re-renders the whole tree
Q16. What is useId meant for?
a) Tracking component render counts
b) Creating database IDs
c) Generating unique IDs that match between server and client, for accessibility attributes such as htmlFor and aria-describedby
d) Generating keys for list items
Quick revision notes
- React matches hooks by call order, so never call them inside a condition.
- useState setters replace the value. Spread the previous object if you want to merge.
- List every reactive value an effect uses as a dependency. Clean up subscriptions, timers and requests.
- Use refs for values that should persist without causing re-renders.
- Custom hooks share logic, not state.
Frequently asked questions
What is the most common useEffect mistake in interviews?
Missing or wrong dependencies, which lead to stale values or infinite loops. Next comes forgetting to clean up subscriptions and timers.
Should I fetch data in useEffect?
For simple cases it works, as long as you handle race conditions in cleanup. In real apps, a data library like TanStack Query, or your framework's server-side data fetching, usually handles caching and race conditions better.
Why does my component render twice in development?
In development, StrictMode renders twice and remounts components on purpose, to bring hidden side effects to the surface. This does not happen in production builds.
Comments
Post a Comment