Warning: Can't perform a React state update on an unmounted component , method needs to run only one time

Question

I'm trying to fetch the advertisers list when the component mounts, but it is causing me memory leak, Any suggestions ? i'll be grateful :)

 useEffect(() => {
    const fetchData = async () => {
      const list = await Api.listAdvertisers();
      setAdvertisers(list);
    };
    fetchData();
  }, []);

Answer 1

You can declare your fetchData function on main scope and you can check the function if it is called or not by declaring a didMount variable in useEffect scope.

const didMount = useRef(false);

const fetchData = async () => {
      const list = await beeswaxService.listAdvertisers();
      setAdvertisers(list);
      return;
    };

useEffect(() => {
    if(!didMount.current){
       didMount.current = true;
       fetchData();
    }
    
  }, []);

Answer 2

Maybe the function inside the useEffect is causing memory leak, try this?

const fetchData = async () => {
      const list = await beeswaxService.listAdvertisers();
      setAdvertisers(list);
      return;
    };

useEffect(() => {
    fetchData();
  }, []);