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