React Hooks 3 — Questions and Answers
Question 1: Why must hooks be called at the top level of a component?
- To ensure hooks run in the same order on every render (Correct answer)
- To improve rendering performance
- Because hooks cannot be nested in any way
- To allow hooks inside event handlers
Correct answer: To ensure hooks run in the same order on every render
React relies on the call order of hooks being consistent across renders, so they cannot be called conditionally or inside loops.
Question 2: What is the recommended way to update state based on the previous state in useState?
- Pass an updater function to the setter (Correct answer)
- Reassign the state variable directly
- Use a separate useEffect
- Mutate the state object in place
Correct answer: Pass an updater function to the setter
Passing a function like setCount(prev => prev + 1) guarantees you work with the latest state value.
Question 3: Which hook lets you customize the instance value exposed to parent components when using ref forwarding?
- useImperativeHandle (Correct answer)
- useRef
- useLayoutEffect
- useContext
Correct answer: useImperativeHandle
useImperativeHandle customizes the ref value exposed to parent components, typically used with forwardRef.
Question 4: How does useLayoutEffect differ from useEffect?
- useLayoutEffect fires synchronously after DOM mutations but before paint (Correct answer)
- useLayoutEffect runs only on the server
- useLayoutEffect never runs cleanup
- useLayoutEffect runs after the browser paints
Correct answer: useLayoutEffect fires synchronously after DOM mutations but before paint
useLayoutEffect runs synchronously after DOM mutations and before the browser paints, useful for measuring layout.
Question 5: What is a custom hook?
- A JavaScript function whose name starts with 'use' that calls other hooks (Correct answer)
- A built-in React hook for forms
- A class method that manages state
- A special component wrapper
Correct answer: A JavaScript function whose name starts with 'use' that calls other hooks
A custom hook is a reusable function starting with 'use' that can call other hooks to share stateful logic.
Question 6: What problem can a stale closure cause inside useEffect?
- The effect captures an outdated value from a previous render (Correct answer)
- The effect runs twice as fast
- The component fails to mount
- The dependency array is ignored
Correct answer: The effect captures an outdated value from a previous render
A stale closure occurs when an effect references a value from an earlier render because it wasn't listed as a dependency.
Question 7: What does passing a value in the dependency array of useEffect accomplish?
- The effect re-runs whenever that value changes (Correct answer)
- The effect never runs
- The value is memoized
- The effect runs only on unmount
Correct answer: The effect re-runs whenever that value changes
Listing a value in the dependency array tells React to re-run the effect whenever that value changes between renders.
React Hooks 3
Why must hooks be called at the top level of a component?