React Hook useEffect has a missing dependency: 'fetchData'

Question

can anyone help me with this error? In useEffect I call a function that makes a request and inserts the response in a redux state.

import React, { useEffect, useState } from "react";
import { BrowserRouter as Router, Switch, Route} from "react-router-dom";
import { useDispatch, useSelector } from 'react-redux'
import { actions } from './actions/actions'
import { I18nProvider } from './i18n'
import axios from 'axios'

import Home from './views/home/home';
import Page1 from './views/page1/page1';
import Page2 from './views/page2/page2'
import Page3 from './views/page3/page3'

const App = () => {

  const [isLoading, setIsLoading] = useState(true)

  const localeDefault = useSelector(state => state.audioGuideReducers.lang)

  const dispatch = useDispatch()
  const setDataRedux= (data) => dispatch(actions.setDataRedux(data))

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

  const fetchData = async () => {
    await axios.get('https://link-api.com/alldata')
      .then((response) => {
        setDataRedux(response.data.data)
        setIsLoading(false)
      })
      .catch( (error) => {
        console.log(error.message);
      })
  }

  return (
    <I18nProvider locale={localeDefault}>
      <Router>
        {
          isLoading ?
            <h1> Loading... </h1>
            :
            <Switch>
              <Route path="/page3/:id" component={Page3} />
              <Route path="/page2" component={Page2} />
              <Route path="/page1" component={Page1} />
              <Route path="/" component={Home} />
            </Switch>
        }
      </Router>
    </I18nProvider>
  );
}

export default App

Although the application is "running", I would like to resolve the following warning that appears: "React Hook useEffect has a missing dependency: 'fetchData'. Include it or remove the dependency matrix react-hooks/exaustive-deps"

if answer(stackoverflow.com/a/64025959/6544460) is helpful for you, please accept/vote for this... Happy coding! — akhtarvahid

Shubham Verma Shubham Verma · Accepted Answer · 2020-09-23T10:31:31

Its because whenever you are using useEffect and if you use something that is outside from useEffect. UseEffect need to make sure when to update when not that's why you need to pass it in its dependency:

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

  const fetchData = async () => {
    await axios.get('https://link-api.com/alldata')
      .then((response) => {
        setDataRedux(response.data.data)
        setIsLoading(false)
      })
      .catch( (error) => {
        console.log(error.message);
      })
  }

Better way if you need only inside useEffect put fetchData inside useEffect:

const setDataRedux = React.useCallback((data) => dispatch(actions.setDataRedux(data)), [])
useEffect(() => {
    const fetchData = async () => {
    await axios.get('https://link-api.com/alldata')
      .then((response) => {
        setDataRedux(response.data.data)
        setIsLoading(false)
      })
      .catch( (error) => {
        console.log(error.message);
      })
  }
    fetchData();
  }, [setDataRedux]);

React Hook useEffect has a missing dependency: 'fetchData'

2 Answers