React Hook useEffect has a missing dependency

./src/components/BusinessesList.js

Line 51:  React Hook useEffect has a missing dependency: 'fetchBusinesses'.

Either include it or remove the dependency array  react-hooks/exhaustive-deps

It's not JS/React error but eslint (eslint-plugin-react-hooks) warning.

It's telling you that hook depends on function fetchBusinesses, so you should pass it as dependency.

useEffect(() => {

  fetchBusinesses();

}, [fetchBusinesses]);

It could result in invoking function every render if function is declared in component like:

const Component = () => {

  /*...*/

  //new function declaration every render

  const fetchBusinesses = () => {

    fetch('/api/businesses/')

      .then(...)

  }

  useEffect(() => {

    fetchBusinesses();

  }, [fetchBusinesses]);

  /*...*/

}

Correct way of doing this stuff is:

const Component = () => {

  /*...*/

  // keep function reference

  const fetchBusinesses = useCallback(() => {

    fetch('/api/businesses/')

      .then(...)

  }, [/* additional dependencies */]) 

  useEffect(() => {

    fetchBusinesses();

  }, [fetchBusinesses]);

  /*...*/

}

or just defining function in useEffect

References:

https://stackoverflow.com/questions/55840294/how-to-fix-missing-dependency-warning-when-using-useeffect-react-hook