How to fix "React Hook useEffect has missing dependencies: 'isError' and 'isLoading'" when using useEffect React Hook? [duplicate]

If I remove the dependencies array at the end then the component goes on a loop that keeps fetching data. If I add the 'isError' and 'isLoading' inside the array then the error disappears but I still go on a loop. Why is this happening in the 'isError' and 'isLoading' and not in the 'data'?

export default function App() { const [data, setData] = useState({}); const [isError, setIsError] = useState(false); const [isLoading, setIsLoading] = useState(false); useEffect(() => { const fetchData = async () => { try { setIsError(false); setIsLoading(true); console.log('[isLoading]: ' + isLoading); const response = await axios( 'http://localhost:4000/website', ); setData(response.data); setIsLoading(false); } catch (error) { setIsError(true); console.log('[error]: ' + isError); } }; fetchData().then(r => console.log('[### fetchData]: Successful')); }, []); console.log(data); return ( <Provider store={store}> <Router> {isLoading ? ( <div>Loading ...</div> ) : ( <div className="App"> <Navbar /> <Route exact path="/" component={Landing} /> <Route exact path="/register" component={Register} /> <Route exact path="/login" component={Login} /> <Switch> <PrivateRoute exact path="/dashboard" component={Dashboard} /> </Switch> </div> )} </Router> </Provider> ); }