FixCode

Fix the Infinite Loop in useEffect

Medium

Challenge 17 of 20

Fix the Infinite Loop in useEffect

Medium

This React component has an infinite loop in its useEffect hook. Find and fix the issue.

Challenge 17 of 20

50 XP

Community Solutions

ReactHooksuseEffectAPIJavaScript

Exit Challenge

Test Cases

0/1 passing

Test Case #1

Input: Render the component

Expected: Should fetch data once and display it without infinite re-renders

Run tests to see results

solution.js

<span class="token keyword">import</span> React, { useState, useEffect } from &#<span <span class="token keyword">class</span>="token number">039</span>;react&#<span <span class="token keyword">class</span>="token number">039</span>;;

<span class="token keyword">function</span> DataFetcher() {
  <span class="token keyword">const</span> [data, setData] = useState([]);
  <span class="token keyword">const</span> [isLoading, setIsLoading] = useState(<span class="token boolean">true</span>);
  
  useEffect(() =>; {
    <span class="token keyword">async</span> <span class="token keyword">function</span> fetchData() {
      setIsLoading(<span class="token boolean">true</span>);
      <span class="token keyword">try</span> {
        <span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// Simulated API call</span>
        <span class="token keyword">const</span> response = <span class="token keyword">await</span> fetch(&#<span <span class="token keyword">class</span>="token number">039</span>;https:<span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>//api.example.com/data&#<span <span class="token keyword">class</span>="token number">039</span>;);</span>
        <span class="token keyword">const</span> result = <span class="token keyword">await</span> response.json();
        setData(result);
      } <span class="token keyword">catch</span> (error) {
        console.error(&#<span <span class="token keyword">class</span>="token number">039</span>;Error fetching data:&#<span <span class="token keyword">class</span>="token number">039</span>;, error);
      } <span class="token keyword">finally</span> {
        setIsLoading(<span class="token boolean">false</span>);
      }
    }
    
    fetchData();
  }, [data]); <span <span class="token keyword">class</span>=<span <span class="token keyword">class</span>="token string">"token comment"</span>>// This dependency causes an infinite loop</span>
  
  <span class="token keyword">return</span> (
    <;div>;
      {isLoading ? (
        <;p>;Loading...<;/p>;
      ) : (
        <;ul>;
          {data.map(item =>; (
            <;li key={item.id}>;{item.name}<;/li>;
          ))}
        <;/ul>;
      )}
    <;/div>;
  );
}

<span class="token keyword">export</span> default DataFetcher;

import React, { useState, useEffect } from 'react';

function DataFetcher() {
  const [data, setData] = useState([]);
  const [isLoading, setIsLoading] = useState(true);
  
  useEffect(() => {
    async function fetchData() {
      setIsLoading(true);
      try {
        // Simulated API call
        const response = await fetch('https://api.example.com/data');
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      } finally {
        setIsLoading(false);
      }
    }
    
    fetchData();
  }, [data]); // This dependency causes an infinite loop
  
  return (
    <div>
      {isLoading ? (
        <p>Loading...</p>
      ) : (
        <ul>
          {data.map(item => (
            <li key={item.id}>{item.name}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default DataFetcher;

Console

Run your code to see output here

Previous ChallengeNext Challenge

Exit