0

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'?

enter image description here

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>
    );
}
Fotios Tragopoulos
  • 449
  • 1
  • 7
  • 24

0 Answers0