How to fix missing dependency warning when using useEffect Hook

Question

How I'm currently using useEffect() (which I only want to run once in the beginning similar to componentDidMount()):

useEffect(() => {
    fetchBusinesses();
  }, []);
const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"}
    )
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };

Easiest way is to just move the code inside the `fetchBusinesses` function inside the `useEffect` hook and get rid of `fetchBusinesses` function. You could also move the entire function inside the `useEffect` hook. — Yousaf, Dec 27 '21 at 04:59
does this answer? https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook — sandeep.kgp, Dec 27 '21 at 06:57

score 1 · Answer 1 · answered Dec 27 '21 at 05:07

There are multiple ways to handle such warnings.

As @Yousaf said, just add the whole function inside your useEffect.

useEffect(() => {
function fetchBusinesses() {
...
}
fetchBusinesses()
}, []);

You can make use of useCallback()

    const fetchBusinesses = useCallback(() => {
      ...
    }, [])
    useEffect(() => {
      fetchBusinesses()
    }, [fetchBusinesses]);

score 0 · Answer 2 · answered Dec 27 '21 at 05:02

useEffect(() => {
  const fetchBusinesses = () => {
    return fetch("theURL", {method: "GET"})
      .then(res => normalizeResponseErrors(res))
      .then(res => {
        return res.json();
      })
      .then(rcvdBusinesses => {
        // some stuff
      })
      .catch(err => {
        // some error handling
      });
  };

  fetchBusinesses();
}, [])

How to fix missing dependency warning when using useEffect Hook

2 Answers2