Top 30 Hooks Interview Questions and Answers

30 questions. Pick an answer, or open “Show the answer” to read it.

Answers are graded in your browser. Nothing is saved, and no XP or streak is earned here. The app keeps score.

1. Question 1 of 30

   What is the immediate effect when a useState setter function, like setCount(count + 1), is invoked?

   • aThe count variable in the current component scope updates immediately.
   • bThe component's props are updated, triggering a re-render.
   • cReact schedules a re-render of the component with the new state value.
   • dThe component synchronously re-executes its function body.
   Show the answer

   Answer: c · React schedules a re-render of the component with the new state value.

   Calling a useState setter function tells React to schedule a re-render with the new state value, as stated by 'React schedules a re-render.' The 'count' variable in the current render's scope does not update immediately; this is a common 'footgun' where the new value is only available on the next render.

   Read the full bite: useState: Giving Components Memory

2. Question 2 of 30

   Which of the following best describes the primary role of React's useEffect hook?

   • aTo synchronize the component with external systems like APIs or browser events.
   • bTo prevent unnecessary component re-renders and optimize performance.
   • cTo directly handle user interactions such as button clicks or form submissions.
   • dTo transform data received from props or state into a displayable format.
   Show the answer

   Answer: a · To synchronize the component with external systems like APIs or browser events.

   The primary role of useEffect is to synchronize a component with systems outside React's control, such as fetching data from an API or subscribing to browser events. It is explicitly stated not to be used for data transformation or handling user events, which are managed differently.

   Read the full bite: useEffect: Syncing React with the Outside World

3. Question 3 of 30

   Why should a team not rely solely on a pre-push hook to guarantee that all tests pass before merging?

   • aIt is local-only, not cloned with the repository, can be skipped with --no-verify, and does not run for web or API commits.
   • bThe --no-verify flag only skips commit hooks, meaning pre-push checks cannot be bypassed by developers.
   • cIt must be committed to version control before Git will automatically execute it for everyone who clones the repository.
   • dIt runs on the remote server after the push completes, so it cannot prevent broken code from entering the repository.
   Show the answer

   Answer: a · It is local-only, not cloned with the repository, can be skipped with --no-verify, and does not run for web or API commits.

   Pre-push hooks reside in .git/hooks and are not copied on clone, can be bypassed with --no-verify, and do not run for web or API commits, so they cannot replace server-side enforcement. Option B is a tempting misconception: --no-verify skips pre-push hooks as well as commit hooks.

   Read the full bite: Describe using a pre-push Git hook for checks and its CI limitations.

4. Question 4 of 30

   Which pattern correctly wires a text input as a controlled component using useState?

   • aInitialize useState with an empty string at the top level, bind the input value to the state variable, and update it via onChange by calling the setter with event.target.value.
   • bDeclare the state variable with useState inside a useEffect hook so it runs after mount, bind value to the state, and mutate the variable directly in the onChange handler.
   • cCall useState inside an if block to avoid unnecessary renders, set the input value to the state variable, and update it by assigning event.target.value directly to the state variable.
   • dInitialize useState with null at the top level, leave the input uncontrolled by omitting the value attribute, and call the setter inside onChange to update the state.
   Show the answer

   Answer: a · Initialize useState with an empty string at the top level, bind the input value to the state variable, and update it via onChange by calling the setter with event.target.value.

   The correct pattern requires calling useState at the top level with an empty string, binding the input value to state, and updating via the setter in onChange. Option C is tempting because it mentions binding value, but calling useState conditionally violates the Rules of Hooks and direct mutation prevents React from re-rendering.

   Read the full bite: How do you use useState to track user input?

5. Question 5 of 30

   What happens to a useEffect's cleanup and setup when a value in its dependency array changes?

   • aReact runs the previous cleanup with old values first, then runs setup with the new values
   • bReact runs setup with the new values first, then runs the previous cleanup with old values
   • cReact checks if the dependency array itself is a new reference to decide whether to re-run
   • dCleanup only runs when the component unmounts, so only setup runs with the new values
   Show the answer

   Answer: a · React runs the previous cleanup with old values first, then runs setup with the new values

   React always runs the previous effect's cleanup with the old dependency values before running the new setup when a dependency changes. The most tempting distractor is wrong because cleanup is not reserved for unmount; it runs whenever dependencies change to prevent stale subscriptions or leaks.

   Read the full bite: Explain useEffect dependency array behavior for [], [deps], and omitted

6. Question 6 of 30

   In a React component, for which scenario would using a ref be the most appropriate choice over state?

   • aHolding an interval ID returned by setInterval that needs to be cleared later.
   • bStoring a user's input that directly updates a displayed text field.
   • cStoring a list of items that are rendered dynamically on the screen.
   • dManaging a boolean flag that toggles the visibility of an element.
   Show the answer

   Answer: a · Holding an interval ID returned by setInterval that needs to be cleared later.

   Refs are ideal for storing mutable values that persist across renders without triggering UI updates, such as an interval ID that is never displayed. Options A, C, and D all involve data that directly affects the UI, requiring state to ensure re-renders when the values change.

   Read the full bite: React Refs: Memory Without Re-renders

7. Question 7 of 30

   You need to increment a React state variable three times within a single event handler. Which approach produces the correct final value?

   • aCall setCount(count + 1) inside setTimeout callbacks to avoid automatic batching
   • bCall setCount(count + 1) three times sequentially
   • cCall setCount(prev => prev + 1) three times sequentially
   • dUse useEffect to chain increments after each re-render
   Show the answer

   Answer: c · Call setCount(prev => prev + 1) three times sequentially

   Option C uses the functional updater so React queues each increment against the latest pending state. Option B fails because all three calls read the same closed-over value from the render snapshot, so each computes 0 + 1.

   Read the full bite: What will count be after three setCount calls in a row?

8. Question 8 of 30

   A useEffect subscribes to an external store. When a dependency changes and the effect must re-run, when does the cleanup function execute?

   • aAfter the new effect finishes, preserving the previous subscription until setup completes
   • bOnce for every render, even when no dependencies have changed
   • cOnly when the component finally unmounts from the DOM
   • dImmediately before the effect re-runs with the new dependency values
   Show the answer

   Answer: d · Immediately before the effect re-runs with the new dependency values

   React runs the cleanup function immediately before re-executing an effect when dependencies change, tearing down the previous render's side effects to prevent memory leaks and stale subscriptions. The most tempting distractor assumes cleanup is only for unmount, but that ignores the re-run scenario and fails under React 18 Strict Mode, which intentionally double-invokes effects to expose missing teardown logic.

   Read the full bite: What is the purpose of the useEffect cleanup function?

9. Question 9 of 30

   What is the key difference between useState(expensive()) and useState(() => expensive()) during re-renders?

   • aThe direct call executes on every render but React discards its result after mount, while the function runs only once during initialization.
   • bThe direct call is automatically memoized by React after the first render, while the function form executes on every render to compare dependencies.
   • cThe function receives the previous state as an argument, allowing React to skip calling it if the state already exists.
   • dThe function form prevents the component from re-rendering when parent state changes by stabilizing the initial value reference.
   Show the answer

   Answer: a · The direct call executes on every render but React discards its result after mount, while the function runs only once during initialization.

   JavaScript evaluates the direct argument before React can intercept it, so expensive() wastes cycles on every render even though React throws away the result after mount; the initializer function runs only once. Option D is tempting but wrong because lazy initialization does not prevent re-renders, it only avoids repeating expensive setup work inside them.

   Read the full bite: Why pass a function to useState for expensive initial values?

10. Question 10 of 30

    You must measure a rendered DOM element and immediately adjust a modal to prevent visual flicker. Which choice is correct?

    • auseEffect, because it runs after paint and avoids blocking the main thread
    • buseInsertionEffect, because it fires before React commits to the DOM and prevents layout thrashing
    • cuseLayoutEffect, because it runs after the browser paints and ensures the DOM is fully updated
    • duseLayoutEffect, because it runs synchronously after DOM mutations but before paint, letting you correct layout before it is visible
    Show the answer

    Answer: d · useLayoutEffect, because it runs synchronously after DOM mutations but before paint, letting you correct layout before it is visible

    useLayoutEffect runs synchronously after React commits DOM changes but before the browser paints, so layout corrections happen before the user sees anything. Option C is tempting because it names the right hook but incorrectly claims it runs after paint, which would actually cause the flicker you are trying to prevent.

    Read the full bite: When would you choose useLayoutEffect over useEffect?

11. Question 11 of 30

    How should you refactor an effect that needs the latest prop value inside a polling interval without listing that prop as a dependency?

    • aDisable the exhaustive-deps rule for that effect and read the prop directly.
    • bLift the prop value into a ref and read the ref inside the interval with an empty dependency array.
    • cMove the polling logic into a layout effect to capture the prop before the browser paints.
    • dAdd the prop to the dependency array and clear the interval in cleanup so it restarts with the new value.
    Show the answer

    Answer: b · Lift the prop value into a ref and read the ref inside the interval with an empty dependency array.

    Lifting the prop into a ref lets the interval read the latest value without re-subscribing, because refs are mutable and do not trigger re-renders. Disabling the rule and reading the prop directly hides the stale closure from the linter and leaves the code vulnerable to refactor hazards.

    Read the full bite: Why is exhaustive-deps critical and when can you disable it?

12. Question 12 of 30

    Which task is the most appropriate use case for a SvelteKit server hook?

    • aCreating a specific API endpoint at /api/users to list all registered users.
    • bInitializing a database connection pool that is shared across all server-side requests.
    • cDisplaying a user's profile information on their dedicated /profile page.
    • dValidating user input on a client-side form before submission to the server.
    Show the answer

    Answer: b · Initializing a database connection pool that is shared across all server-side requests.

    The card explicitly states that "startup behavior (code at the top level of a hooks file) is ideal for initializing singletons like a database connection pool." This makes initializing a shared resource like a DB pool a primary use case for server hooks. While hooks can handle custom routing (like option A), defining standard API endpoints is typically done using dedicated +server.js files, whereas hooks are more for intercepting and modifying requests or handling non-standard routing.

    Read the full bite: SvelteKit Hooks: Intercepting Requests and Events

13. Question 13 of 30

    When is it most appropriate to extract logic into a custom React hook?

    • aWhen multiple components require the same stateful behavior or side effects.
    • bTo define a new UI element that combines both presentation and data fetching.
    • cTo encapsulate pure, non-stateful utility functions for better organization.
    • dWhen a single component's rendering logic becomes overly complex.
    Show the answer

    Answer: a · When multiple components require the same stateful behavior or side effects.

    Custom hooks are specifically designed to package and reuse stateful logic (like useState and useEffect) across multiple components, preventing duplication. Option D describes general component refactoring, not the specific purpose of custom hooks. Option C is explicitly stated as a scenario where custom hooks should not be used, as a standard JavaScript function is more appropriate for pure calculations.

    Read the full bite: Custom Hooks: Package Component Logic for Reuse

14. Question 14 of 30

    Which scenario best indicates that useReducer would be a more suitable choice than useState for managing component state?

    • aThe component's state consists of a single boolean toggle.
    • bThe state updates must be immediately reflected in the DOM without any batching.
    • cThe state logic involves multiple interdependent transitions where the next state relies on the previous state.
    • dYou need to pass state values down to deeply nested child components.
    Show the answer

    Answer: c · The state logic involves multiple interdependent transitions where the next state relies on the previous state.

    The card states useReducer is ideal "when state logic gets complicated or when the next state depends on the previous one," and for "multiple state transitions that depend on each other." For simple, independent state like a boolean toggle (Option A), useState is preferred.

    Read the full bite: The useReducer Hook: Predictable State Updates

15. Question 15 of 30

    What is the primary reason to use useCallback for a function in React?

    • aTo ensure the function's execution is deferred until all component state updates are finalized.
    • bTo automatically memoize the return value of the function, avoiding re-computation of expensive results.
    • cTo prevent the function from being re-created in memory on every component re-render, thus stabilizing its reference.
    • dTo enable the function to access component state and props without needing to be passed them explicitly.
    Show the answer

    Answer: c · To prevent the function from being re-created in memory on every component re-render, thus stabilizing its reference.

    useCallback's main purpose is to provide a stable reference to a function across re-renders, preventing it from being re-created each time. This is crucial for optimizing child components wrapped in React.memo or when a function is a dependency of a hook like useEffect. Option B describes the purpose of useMemo, which memoizes a value, not a function instance.

    Read the full bite: React's useCallback: Cache Functions, Not Just Values

16. Question 16 of 30

    Why does a useEffect with an empty dependency array fail to refetch when the user returns to a stacked screen?

    • aReact Navigation strips effects from non-focused screens
    • bEmpty dependency arrays disable the effect entirely in React Native
    • cuseEffect callbacks are blocked while a screen is unfocused
    • dThe screen remains mounted, so the effect runs only once on first mount
    Show the answer

    Answer: d · The screen remains mounted, so the effect runs only once on first mount

    Pushing a screen does not unmount the one beneath it, so a mount-only effect never re-runs on return. useFocusEffect fires on each focus, which is what triggers the refetch.

    Read the full bite: Refetching data when a screen gains focus

17. Question 17 of 30

    For which situation should you reach for useReducer instead of multiple useState hooks?

    • aAutomatically preventing child re-renders without using React.memo
    • bManaging a simple string input that does not affect other UI values
    • cPerforming asynchronous data fetching directly within the state update logic
    • dCoordinating several related fields that must update atomically from one action
    Show the answer

    Answer: d · Coordinating several related fields that must update atomically from one action

    useReducer excels when one action must update multiple interdependent fields atomically, centralizing transition logic outside the component. Option A is a common misconception because the hook itself does not memoize child renders or improve performance without additional optimizations like React.memo.

    Read the full bite: Explain useReducer and when to prefer it over useState

18. Question 18 of 30

    What is the primary mechanism useMemo employs to optimize React component performance?

    • aIt automatically identifies and optimizes all computationally intensive functions within a component.
    • bIt caches the result of an expensive calculation and reuses it if its dependencies remain unchanged.
    • cIt ensures that a function runs only once throughout the component's entire lifecycle.
    • dIt prevents the component from re-rendering when its props or state change.
    Show the answer

    Answer: b · It caches the result of an expensive calculation and reuses it if its dependencies remain unchanged.

    The card states useMemo caches a function's return value and reuses it if its dependencies haven't changed, preventing expensive recalculations. It does not prevent the component itself from re-rendering, which is a common misconception.

    Read the full bite: useMemo: Cache Expensive Calculations in React

19. Question 19 of 30

    A ThemeContext.Provider wraps the entire app and passes an unmemoized object containing theme and toggleTheme. What is the main performance risk?

    • aOnly components that read the theme string re-render; those using only toggleTheme are unaffected
    • bIntermediate components between the Provider and consumer must forward the value via props or it becomes undefined
    • cReact performs deep equality checks on the value object, causing expensive comparisons on every render
    • dEvery consumer re-renders whenever the Provider re-renders because the object reference changes each time
    Show the answer

    Answer: d · Every consumer re-renders whenever the Provider re-renders because the object reference changes each time

    React compares context values by reference, so a new object literal on every render triggers re-renders in all consumers even if the theme data is unchanged. Option A is tempting because developers often assume context supports selective subscriptions by property, but React does not optimize that way.

    Read the full bite: Use useContext to provide theme state without prop drilling

20. Question 20 of 30

    When a useEffect with an empty dependency array sets up a setInterval that needs to log the latest component state, what is the primary benefit of using useEffectEvent?

    • aIt allows the setInterval to run only once, preventing unnecessary re-creations on state changes.
    • bIt ensures the setInterval callback always receives the initial state captured at mount time.
    • cIt automatically adds the setInterval callback to the useEffect's dependency array, resolving linter warnings.
    • dIt enables the setInterval's callback to access the most current state without forcing the useEffect to re-execute.
    Show the answer

    Answer: d · It enables the setInterval's callback to access the most current state without forcing the useEffect to re-execute.

    useEffectEvent provides a stable function that, when called, always accesses the latest props and state from the component's current render, even if the useEffect it's called from has an empty dependency array and thus doesn't re-run. This directly solves the stale closure problem. Option B describes the stale closure problem itself, not the benefit of the solution. Option A describes the behavior of an empty dependency array, not the specific benefit of useEffectEvent. Option C is incorrect as useEffectEvent is used to avoid adding functions to the dependency array.

    Read the full bite: React's Stale Closure Problem in Hooks

21. Question 21 of 30

    Which approach correctly navigates from an Axios interceptor that runs outside any React component?

    • aStore navigation in a module variable captured during the last render
    • bImport the navigation prop from the nearest screen file
    • cUse a navigationRef passed to NavigationContainer and call navigate after isReady
    • dCall useNavigation inside the interceptor function
    Show the answer

    Answer: c · Use a navigationRef passed to NavigationContainer and call navigate after isReady

    Hooks only work inside components, so useNavigation throws in an interceptor. A navigationRef gives non-React code a stable handle, guarded by isReady to avoid early calls.

    Read the full bite: Accessing navigation outside a screen component

22. Question 22 of 30

    A parent computes an expensive object and defines an inline handler passed to a React.memo child. Which hook combination correctly optimizes the computation and prevents unnecessary child re-renders?

    • auseMemo for the object and no hook for the handler
    • buseCallback for both the object and the handler
    • cuseMemo for both the object and the handler
    • duseMemo for the object and useCallback for the handler
    Show the answer

    Answer: d · useMemo for the object and useCallback for the handler

    useMemo caches the computed object value, while useCallback preserves the function reference so React.memo's Object.is check sees an unchanged prop and skips the child render. Choosing useMemo for the handler confuses the two hooks because useMemo caches the returned value rather than the function reference, and omitting a hook creates a new inline function on every parent render.

    Read the full bite: Explain the difference between useMemo and useCallback

23. Question 23 of 30

    When is useLayoutEffect the most appropriate choice over useEffect?

    • aTo perform data fetching operations immediately after a component renders.
    • bTo optimize performance for non-visual updates by ensuring they run synchronously.
    • cTo execute code that must run after the browser has finished painting the screen.
    • dTo measure a DOM element's dimensions and update its position before the user sees any intermediate layout.
    Show the answer

    Answer: d · To measure a DOM element's dimensions and update its position before the user sees any intermediate layout.

    useLayoutEffect is specifically designed for scenarios where you need to read DOM layout and make synchronous updates to prevent visual flickers before the browser paints. Option D directly describes this primary use case. Option C describes useEffect, which runs asynchronously after the browser has painted.

    Read the full bite: useLayoutEffect: Synchronous Effects Before Browser Paint

24. Question 24 of 30

    Which scenario best illustrates the primary purpose of useImperativeHandle?

    • aA child component needs to receive and process all props passed down from its parent in a declarative manner.
    • bA parent component needs to directly access and modify the child's internal state variables.
    • cA parent component needs to call a specific method on a child, like focus() or reset(), without exposing the child's entire DOM node.
    • dA child component needs to trigger a re-render of its parent when its internal data changes.
    Show the answer

    Answer: c · A parent component needs to call a specific method on a child, like focus() or reset(), without exposing the child's entire DOM node.

    Option C is correct because useImperativeHandle allows a child to expose a limited, intentional API (like specific methods) to a parent via a ref, preventing the parent from accessing the child's full internal DOM or state. Option B describes an anti-pattern that useImperativeHandle is designed to prevent, as it breaks encapsulation and top-down data flow.

    Read the full bite: useImperativeHandle: Expose a Custom Ref API

25. Question 25 of 30

    What fundamental difference distinguishes a custom hook from a HOC when reusing stateful logic in React?

    • aA HOC extracts logic into a plain function while a custom hook injects props implicitly via nesting.
    • bA custom hook extracts logic into a plain function without adding nodes to the component tree.
    • cA custom hook replaces structural composition entirely, making all component wrapping patterns obsolete.
    • dA custom hook is merely syntactic sugar that still creates a wrapper component behind the scenes.
    Show the answer

    Answer: b · A custom hook extracts logic into a plain function without adding nodes to the component tree.

    Custom hooks reuse stateful logic as plain functions without adding nodes to the React tree or hiding prop sources, whereas HOCs wrap components and can create wrapper hell. Option D is tempting because it echoes the common misconception that hooks are just syntactic sugar for HOCs, but they represent a fundamentally different composition mechanism.

    Read the full bite: Compare HOCs and custom hooks for sharing logic

26. Question 26 of 30

    In a useEffect with setInterval reading a state variable, which fix removes the stale closure without leaking or duplicating timers?

    • aStore the state in a useRef and read ref.current in the interval with an empty dependency array
    • bAdd the state variable to the dependency array and return a cleanup that clears the interval
    • cAdd the state variable to the dependency array but omit the cleanup to preserve the original timer
    • dUse the functional state updater inside the interval so it always reads the latest value
    Show the answer

    Answer: b · Add the state variable to the dependency array and return a cleanup that clears the interval

    Adding the state to the dependency array and returning a cleanup that clears the interval recreates the callback with the latest value and prevents leaks. The functional updater distractor is wrong because functional updates only help inside setState, not inside intervals or event listeners where the closure remains stale.

    Read the full bite: What is a stale closure in React hooks?

27. Question 27 of 30

    How does useTransition primarily ensure a responsive UI when handling a slow state update?

    • aBy executing the expensive update in a background thread, separate from the main UI thread.
    • bBy automatically memoizing all components affected by the state change to prevent unnecessary re-renders.
    • cBy pausing all other state updates until the slow transition has fully completed its rendering.
    • dBy allowing urgent user interactions to render immediately while the slow update proceeds in a lower-priority lane.
    Show the answer

    Answer: d · By allowing urgent user interactions to render immediately while the slow update proceeds in a lower-priority lane.

    useTransition creates two rendering lanes: an urgent lane for immediate feedback and a non-urgent 'transition' lane for slower updates, allowing the UI to remain interactive. Option A is incorrect because useTransition manages priority on the main thread, it does not move work to a separate background thread.

    Read the full bite: useTransition: Keep Your UI Responsive During State Changes

28. Question 28 of 30

    Which best describes how useDeferredValue maintains UI responsiveness during an expensive update?

    • aIt postpones the state update until the user interaction ceases, similar to debouncing.
    • bIt prevents the component from re-rendering until all background computations are fully completed.
    • cIt caches the expensive computation results to display them instantly on subsequent renders.
    • dIt first renders with the previous deferred value at high priority, then with the new value at low priority.
    Show the answer

    Answer: d · It first renders with the previous deferred value at high priority, then with the new value at low priority.

    Option D correctly describes the mechanism: React performs an immediate, high-priority render with the old deferred value to keep the UI snappy, then schedules a low-priority, interruptible render with the new value. Option A describes debouncing, which the card explicitly states useDeferredValue is not a replacement for.

    Read the full bite: useDeferredValue: Keep UI Responsive During Renders

29. Question 29 of 30

    What critical characteristic must the getSnapshot function in useSyncExternalStore possess to ensure correct behavior and prevent issues like tearing?

    • aIt must directly invoke a re-render of the component when the external data changes.
    • bIt must execute a deep equality check on the external store's current data.
    • cIt must return a new object reference whenever the external state is modified.
    • dIt must return an immutable, cached value for React's comparison.
    Show the answer

    Answer: d · It must return an immutable, cached value for React's comparison.

    The card states that "your getSnapshot function must return an immutable, cached value." This is crucial because React uses Object.is to compare the returned value, and a stable, cached reference allows React to efficiently determine if a re-render is truly necessary. Option C is incorrect because returning a new reference unnecessarily would cause React to re-render even if the underlying data hasn't logically changed, defeating the purpose of the comparison.

    Read the full bite: useSyncExternalStore: Safely Read from External State

30. Question 30 of 30

    What is the primary advantage of using React Navigation's useNavigation hook compared to passing navigation props?

    • aIt allows navigation logic to be easily shared and reused across different types of navigators.
    • bIt prevents the need to pass navigation objects through multiple layers of nested components.
    • cIt enables class components to access navigation functions directly without any additional wrappers.
    • dIt significantly improves application performance by reducing the number of component re-renders.
    Show the answer

    Answer: b · It prevents the need to pass navigation objects through multiple layers of nested components.

    The useNavigation hook directly addresses the problem of 'prop drilling' by allowing deeply nested components to access the navigation object without it being passed down through every parent. Option C is incorrect because the card explicitly states that hooks do not work in class components directly.

    Read the full bite: Escape Prop Drilling with React Navigation Hooks