React useEffect Dependency Bug with Async Data Fetching

I'm building a React app where I fetch data from an API and update the state. However, I'm facing a bug related to useEffect dependencies, which is causing an infinite re-render loop. Here's the relevant code:

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

const DataComponent = () => {
  const [data, setData] = useState([]);
  const [search, setSearch] = useState('');

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`http://localhost:5000/data?q=${search}`);
        const result = await response.json();
        setData(result);
      } catch (error) {
        console.error('Error fetching data:', error);
      }
    };

    fetchData();
  }, [search, data]);

  return (
    <div>
      <input
        type="text"
        value={search}
        onChange={(e) => setSearch(e.target.value)}
        placeholder="Search..."
      />
      <ul>
        {data.map((item, index) => (
          <li key={index}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
};

export default DataComponent;

Problem:

1. The useEffect dependency array includes data. However, if I remove data from the dependency array, React warns about "missing dependencies."
2. Keeping data in the dependency array causes an infinite re-render loop, as setData updates data, triggering the useEffect again.

What I've Tried:

• Moving the fetchData function outside useEffect, but it didn’t resolve the issue.
• Using a useRef to store the previous state, but the issue persisted.
• Removing data from the dependency array avoids the loop but creates a React warning.

Questions:

1. Why is this infinite loop occurring when data is part of the dependency array?
2. What's the correct way to handle this scenario without triggering React warnings or infinite loops?

I’ve looked at the React docs and other answers, but none specifically address this combination of async functions and dependency handling in useEffect. Any insights or solutions would be greatly appreciated!

Responses to your questions:

1. An infinite loop occurs because useEffect detects that data changes value at each setData, meaning: the value of result is either an object or a different value (string, number). And because you have set data to be a dependency.
2. The correct way: condition the execution of fetchData on if data has been fetched already.

 const fetchData = async () => {
    try {
      const response = await fetch(`http://localhost:5000/data?q=${search}`);
      const result = await response.json();
      setData(result);
    } catch (error) {
      console.error('Error fetching data:', error);
    }
  };

  useEffect(() => {
    if (!data) fetchData();
  }, [search, data]);