DeployU
Interviews / Frontend Engineering / This `useEffect` is logging a stale value. How do you fix its dependency array?

Questions

A critical component is crashing in production. How would you debug it?
Q
This component makes duplicate API calls in development. How does Strict Mode help identify the bug?
Q C
This component is crashing the entire app. Implement an Error Boundary to gracefully handle the error.
Q C
This statically generated page is showing stale data. How do you fetch and display live data on the client?
Q C
This component is failing its test. Fix the component to make the test pass.
Q C
This form doesn't reset correctly. Fix the bug and refactor to a more robust solution.
Q C
Your app's state management is a mess. How would Flux architecture help?
Q
This button should increment twice, but only increments once. How do you fix it?
Q C
This application suffers from 'prop drilling.' How do you fix it?
Q C
This component's UI is not updating. Why is direct state mutation problematic?
Q C
This component's state logic is complex. Refactor it with `useReducer`.
Q C
An expensive component is re-rendering unnecessarily. How would you fix this state management issue?
Q C
This list re-renders inefficiently. How does React's reconciliation algorithm explain why?
Q C
This component re-renders unnecessarily due to context object reference changes. How do you fix it?
Q C
An expensive component is re-rendering unnecessarily. How would you fix this state management issue?
Q C
This optimized component re-renders unnecessarily. How do you fix it with `useCallback`?
Q C
This large component is slowing down initial load. Implement code splitting.
Q C
This component performs expensive calculations unnecessarily. Optimize it with `useMemo`.
Q C
This component re-renders unnecessarily. How do you prevent it?
Q C
This data fetching component has a race condition. How do you fix it?
Q C
This data fetching component is causing an infinite loop. How do you fix it?
Q C
This component causes a hydration mismatch error. Why and how to fix it?
Q C
This component has hardcoded text. Refactor it to support multiple languages.
Q C
This component is not reusable. Refactor it using the composition pattern.
Q C
This modal is clipped by its parent. Fix it using a React Portal.
Q C
This component is breaking layout. Fix it using a React Fragment.
Q C
This custom component is not forwarding its ref. How do you fix it?
Q C
These components duplicate logic. Refactor them using a Higher-Order Component.
Q C
These components duplicate logic. Refactor them using the Render Props pattern.
Q C
This component manages loading state imperatively. Refactor it to use React Suspense.
Q C
This legacy class component mixes logic and UI. Refactor it to a modern functional component using Hooks.
Q C
Why does this component log the old state value after calling a useState setter?
Q C
Clarify the core React concepts: Element, Component, and Node.
Q
Your team is evaluating React. How would you explain its core benefits?
Q
This component is crashing with a JSX syntax error. How do you fix it?
Q C
A child component is failing to update the parent's state. Why is this happening and how do you fix it?
Q C
This component is trying to modify a prop directly. How do you fix it?
Q C
Your UI freezes during large updates. How does React Fiber help?
Q
This component has accessibility ID issues. Fix it with `useId`.
Q C
This component flickers when resizing. Fix it using the correct effect hook.
Q C
This component is crashing due to a 'Rules of Hooks' violation. How do you fix it?
Q C
This `useEffect` is logging a stale value. How do you fix its dependency array?
Q C
This component has issues managing a timer ID. Fix it with `useRef`.
Q C
These components duplicate stateful logic. Refactor them using a custom Hook.
Q C
This form uses an uncontrolled input. Refactor it to be a controlled component.
Q C

This `useEffect` is logging a stale value. How do you fix its dependency array?

debugging Hooks & Patterns Interactive Quiz Code Examples
Wrong Approach

Just remove the setInterval and use a different approach.

Right Approach

This is a classic stale closure bug. The empty dependency array means the effect captures the initial count (0) forever. The fix is to include count in the dependency array:

Why It’s Stale:

  • Empty [] = effect runs once on mount
  • The setInterval callback “closes over” count = 0
  • Even when state updates, the callback still sees count = 0

The Fix: Add count to the dependency array. The effect will re-run when count changes, recreating the interval with the fresh value.

Counter - Fix the Stale Closure
Your Code 
import React, { useState, useEffect } from 'react';

export default function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // THE BUG: Captures initial count (0) due to empty []
    const intervalId = setInterval(() => {
      console.log(`Count from useEffect: ${count}`);
    }, 2000);

    return () => clearInterval(intervalId);
  }, []); // ← Should include count

  return (
    <div>
      <h1>Count: {count}</h1>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
      <p>Check console - it always logs 0!</p>
    </div>
  );
}
Click "Run Code" to see output...
Click "Run Code" to see test results...

The Solution

useEffect(() => {
  const intervalId = setInterval(() => {
    console.log(`Count from useEffect: ${count}`);
  }, 2000);

  return () => clearInterval(intervalId); // Cleanup is crucial!
}, [count]); // Re-run when count changes

The cleanup function clears the old interval before creating a new one, preventing multiple intervals from stacking up.

Practice Question

What is the consequence of omitting a dependency from a useEffect's dependency array when that dependency is used inside the effect?