How to stop useEffect from making so many requests? Empty Dependencies don't work

Question

I have a component that updates a piece of state but I'm having issues with it

I have the state declared

const [data, setData] = useState([]);  

Then in my useEffect I am

useEffect(() => { 
  const fetchData = async () => {
    await axios
    .get(
      API_URL,
      {
        headers: {
          'Content-Type': 'application/json',
          'X-API-KEY': API_KEY
        },
        params:{
          "titleId": id
        }
      }
    )
    .then((response) => {
      setData(response.data.Item);
    })
    .catch((err) => {
      console.error("API call error:", err.message);
    }); 
  }  

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

If I declare "data" in my dependencies, I get an endless loop of requests which is obviously no good. But if I leave 'data' out from the dependencies it shows nothing, though I am successfully retrieving it in my network's tab and even when I {JSON.styringify(data)} in a div tag aI get the json content too. So the info is in the DOM, but it's not updating the components

How can I do this so I can make an initial request to load the data and not thousands of them?

I've tried the following:

• a setTimeout on the callback function
• the isCancelled way with a return (() => { callbackFunction.cancel(); })
• And there is an Abort way of doing this too but I can't figure it out. Every example I've seen is for class components

Sorry for the vague code. I can't replicate this without lots of coding and an API. Thanks in advance

Answer 1

You want to set the state and then check if is different. I use a custom hook for this which uses the useRef hook:

export function usePrevious(value) {
  const ref = useRef();
  useEffect(() => {
    ref.current = value;
  }, [value]);
  return ref.current;
}

const prevData = usePrevious(data);

I don't know what your data looks like, but build a conditional from it. Inside of your useEffect you'll need something like:

if (data !== prevData) fetchData()

or

if (data.id !== prevData.id) fetchData()

You'll then add prevData to you dependencies:

 [data, prevData, id]