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
      });
  };

Answer 1

There are multiple ways to handle such warnings.

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

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

2. You can make use of useCallback()

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

Answer 2

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(); }, [])