DeployU
Interviews / Frontend Engineering / This data fetching component is causing an infinite loop. How do you fix it?

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 data fetching component is causing an infinite loop. How do you fix it?

debugging Data Fetching Interactive Quiz Code Examples
Wrong Approach

I'm not sure why it's looping. Maybe debounce the fetch?

Right Approach

The useEffect is missing its dependency array. Without it, the effect runs after every render. Since setItems triggers a re-render, you get an infinite loop:

The Loop:

  1. Component renders
  2. useEffect runs (no dependency array = runs every render)
  3. setItems() updates state → triggers re-render
  4. Back to step 1… forever

The Fix: Add an empty dependency array [] to run the effect only once on mount.

ItemList - Fix the Infinite Loop
Your Code 
import React, { useState, useEffect } from 'react';

const fetchItems = () => {
  console.log('Fetching data...');
  return new Promise(resolve => {
    setTimeout(() => resolve(['Item 1', 'Item 2', 'Item 3']), 500);
  });
};

export default function ItemList() {
  const [items, setItems] = useState([]);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // THE BUG: Missing dependency array!
    fetchItems().then(data => {
      setItems(data);
      setLoading(false);
    });
  }); // ← Add [] here

  if (loading) return <div>Loading items...</div>;

  return (
    <ul>
      {items.map((item, index) => <li key={index}>{item}</li>)}
    </ul>
  );
}
Click "Run Code" to see output...
Click "Run Code" to see test results...

The Solution

useEffect(() => {
  fetchItems().then(data => {
    setItems(data);
    setLoading(false);
  });
}, []); // Empty array = run once on mount

Dependency Array Rules:

  • [] → Run once on mount (like componentDidMount)
  • [dep1, dep2] → Re-run when dependencies change
  • No array → Run every render (almost never what you want)

Practice Question

What is the purpose of the dependency array in a useEffect hook?