useEffect not running Once While Including a dependency Array in reactjs

Question

My question is regarding including an array that doesn't stop loading even when using useEffect. Other questions do not cover this topic; they cover similar but different approaches.

I am fetching data from my firebasefirestore and setting the data required.

Now I only need the data to run once and to be displayed, but when i use the useEffect hook with the dependency (it doesn't work without the dependency), it starts running continuously and i can see in the network tab that it keeps on fetching the data non stop.

How can I fix this, what can i do to make my useEffect run only once even if it has a dependency array.

Here is my code:

import React, { Component, useEffect, useState, useCallback } from "react";
  const [agentData, setAgentData] = useState([]);
  const [agentID, setAgentID] = useState("");

  const getSalesAgentInformation = async () => {
    await firebase
      .firestore()
      .collection("Employees")
      .where("employeeID", "==", agentID)
      .get()
      .then((snapshot) => {
        const salesAgent = snapshot.docs.map((doc) => doc.data());
        setAgentData(salesAgent);
      });
  };
  useEffect(() => {
    getSalesAgentInformation();
  }, [agentData]);

Answer 1

From the release notes for React v18:

In the future, we’d like to add a feature that allows React to add and remove sections of the UI while preserving state. For example, when a user tabs away from a screen and back, React should be able to immediately show the previous screen. To do this, React would unmount and remount trees using the same component state as before.

This feature will give React apps better performance out-of-the-box, but requires components to be resilient to effects being mounted and destroyed multiple times. Most effects will work without any changes, but some effects assume they are only mounted or destroyed once.

The right way to do this is to keep track of whether or not it’s the first render and use that as a condition for executing your code in the effect. This way, it doesn't matter whether there are zero, one, or many dependencies for the effect. Here's an example which uses a custom hook to track that state:

TS Playground

import {useEffect, useRef} from 'react';

function useIsFirstRender () {
  const ref = useRef(true);
  if (ref.current) {
    ref.current = false;
    return true;
  }
  return false;
}

function Component () {
  const isFirstRender = useIsFirstRender();

  useEffect(() => {
    // If it's not the first render, return early from the function
    if (!isFirstRender) return;
    // else, do other things...
    console.log('First render');
  });

  return null;
}