React Hooks Quiz ( Intermediate ) - All Questions

This intermediate React Hooks quiz is designed for developers who understand the basics and want to test applied knowledge of hooks like useState, useEffect, useReducer, useCallback, useMemo, and custom hooks. Ideal for interview preparation and real-world React development practice.

Question 1: Why is the functional updater form of useState recommended?

It improves styling
It avoids stale state issues
It reduces bundle size
It enables routing

Explanation: Functional updates always receive the latest state value.

Question 2: What happens if a dependency is missing in useEffect?

Syntax error
Effect never runs
Stale data bugs may occur
Component unmounts

Explanation: Missing dependencies can cause stale closures and bugs.

Question 3: Which hook should be used for complex state logic with multiple actions?

useState
useEffect
useReducer
useRef

Explanation: useReducer is ideal for managing complex state transitions.

Question 4: What is the primary purpose of useCallback?

Memoize values
Memoize functions
Handle side effects
Store mutable data

Explanation: useCallback memoizes function references to avoid re-creation.

Question 5: When does useEffect cleanup function run?

Before every render
After component unmounts or before next effect
Only once
Before DOM paint

Explanation: Cleanup runs before the effect re-runs or when the component unmounts.

Question 6: Which hook is best for memoizing expensive calculations?

useEffect
useCallback
useMemo
useRef

Explanation: useMemo caches expensive computed values.

Question 7: Why should hooks not be called conditionally?

Performance issues
Hooks rely on call order
JSX limitation
State becomes immutable

Explanation: React relies on consistent hook call order between renders.

Question 8: What problem does prop drilling cause?

Slower rendering
Harder component reuse
Deeper component nesting
Unnecessary complexity

Explanation: Prop drilling makes components harder to maintain.

Question 9: Which hook helps avoid prop drilling?

useState
useEffect
useContext
useRef

Explanation: useContext allows shared state without deep prop passing.

Question 10: What does useRef persist across renders?

JSX
Functions
Mutable values
Derived state

Explanation: useRef persists mutable values without triggering re-renders.

Question 11: Which hook runs synchronously before browser paint?

useEffect
useLayoutEffect
useMemo
useCallback

Explanation: useLayoutEffect runs before the browser paints the UI.

Question 12: Which hook is commonly used for API calls?

useMemo
useRef
useEffect
useCallback

Explanation: API calls are side effects handled inside useEffect.

Question 13: What does React.memo optimize?

State updates
Component re-renders
Hook execution
Side effects

Explanation: React.memo prevents unnecessary re-renders when props are unchanged.

Question 14: Which hook helps share logic across components?

useReducer
useContext
Custom hooks
useRef

Explanation: Custom hooks enable reusable logic sharing.

Question 15: What is a controlled component?

Component without state
Form element controlled by React state
Component using refs
Pure component

Explanation: Controlled components derive input values from state.

Question 16: What happens if useEffect has an empty dependency array?

Runs on every render
Runs only once after mount
Never runs
Runs on unmount only

Explanation: An empty array ensures the effect runs only once.

Question 17: Which hook is best for handling timers or intervals?

useState
useEffect
useMemo
useContext

Explanation: Timers are side effects managed in useEffect.

Question 18: Why is immutability important in hook state updates?

Security
Efficient change detection
Memory saving
Syntax requirement

Explanation: Immutability allows React to detect changes efficiently.

Question 19: Which hook returns state and dispatch?

useState
useEffect
useReducer
useRef

Explanation: useReducer returns state and a dispatch function.

Question 20: Which hook helps prevent unnecessary child re-renders?

useEffect
useCallback
useRef
useContext

Explanation: useCallback stabilizes function references passed as props.

Question 21: What does useMemo depend on to recompute a value?

Component mount
Dependency array changes
State reset
Props removal

Explanation: useMemo recalculates only when dependencies change.

Question 22: Which hook is useful for accessing previous values?

useState
useEffect
useRef
useMemo

Explanation: useRef can store previous values across renders.

Question 23: What is the main benefit of custom hooks?

Better styling
Code reuse
State isolation
DOM access

Explanation: Custom hooks promote logic reuse and cleaner code.

Question 24: Which hook should be avoided for heavy computations without memoization?

useEffect
useMemo
Render phase
useCallback

Explanation: Heavy computations in render can slow down rendering.

Question 25: Which hook helps manage form input values?

useRef
useEffect
useState
useMemo

Explanation: useState is commonly used for controlled inputs.

Question 26: What is stale closure in hooks?

Unmounted component
Outdated values captured in closures
Broken refs
Invalid JSX

Explanation: Closures may capture outdated state if dependencies are wrong.

Question 27: Which hook is best for avoiding unnecessary context re-renders?

useMemo
useCallback
Context splitting
useRef

Explanation: Splitting context reduces unnecessary re-renders.

Question 28: Which hook allows subscription to external stores?

useEffect
useReducer
useSyncExternalStore
useContext

Explanation: useSyncExternalStore is designed for external store subscriptions.

Question 29: Which hook can replace componentWillUnmount behavior?

useEffect cleanup
useRef
useState
useMemo

Explanation: Cleanup functions handle unmount logic.

Question 30: What is the risk of excessive useMemo?

Syntax errors
Memory overhead
State loss
Hook failure

Explanation: Overusing memoization increases memory usage.

Question 31: Which hook is ideal for DOM measurements?

useEffect
useLayoutEffect
useMemo
useRef

Explanation: useLayoutEffect ensures measurements before paint.

Question 32: What is the main rule enforced by the Rules of Hooks?

Hooks must be async
Hooks must be pure
Hooks must be called consistently
Hooks must return JSX

Explanation: Consistent calling ensures correct hook state mapping.

Question 33: Which hook is best for debouncing values?

useState
useEffect
Custom hook
useMemo

Explanation: Debouncing is typically implemented via custom hooks.

Question 34: Which hook helps with non-urgent state updates?

useEffect
useTransition
useMemo
useCallback

Explanation: useTransition defers non-urgent updates.

Question 35: Which hook is useful for caching derived data?

useEffect
useState
useMemo
useContext

Explanation: useMemo caches derived data.

Question 36: What happens if you mutate state directly in hooks?

Immediate update
No re-render
Unexpected behavior
Compilation error

Explanation: Direct mutation can cause unpredictable behavior.

Question 37: Which hook is used to coordinate async rendering?

useEffect
useTransition
useMemo
useRef

Explanation: useTransition helps manage async rendering priorities.

Question 38: Which hook is best for managing boolean toggles?

useEffect
useState
useReducer
useRef

Explanation: useState is simple and effective for boolean toggles.

Question 39: What is the benefit of using reducers with hooks?

Simpler JSX
Centralized state logic
Faster rendering
Less memory usage

Explanation: Reducers centralize and clarify state transitions.

Question 40: Which hook helps isolate side-effect logic?

useContext
useReducer
Custom hooks
useRef

Explanation: Custom hooks encapsulate side-effect logic.

Question 41: Which hook helps stabilize object references?

useEffect
useMemo
useRef
useCallback

Explanation: useMemo stabilizes object references.

Question 42: Which hook can cause blocking if misused?

useEffect
useLayoutEffect
useMemo
useRef

Explanation: useLayoutEffect can block paint if overused.

Question 43: Which hook is best for sharing logic without extra components?

useContext
useReducer
Custom hooks
useRef

Explanation: Custom hooks share logic without extra components.

Question 44: Which hook is ideal for managing subscriptions?

useState
useEffect
useMemo
useCallback

Explanation: Subscriptions are side effects managed in useEffect.

Question 45: Which hook ensures latest state usage in updates?

useMemo
useRef
Functional updater
useCallback

Explanation: Functional updaters always use the latest state.

Question 46: What is the biggest advantage of hooks over classes?

More lifecycle methods
Cleaner logic reuse
Better CSS support
Automatic optimization

Explanation: Hooks enable cleaner and reusable logic.

Back to programming Quizzes

React Hooks Quiz ( Intermediate )

Questions

~10

Minutes

Min Limit