Throttling navigation to prevent the browser from hanging in React App

Question

I am working on Login/Register from in React and I am using firebase auth for authentication. When the user logged in I want to redirect the user on the root path or on App component. But I got into an infinite loop which gives me this error (Throttling navigation to prevent the browser from hanging.)

    import React, { useEffect } from "react";
    import ReactDOM from "react-dom";
    import "semantic-ui-css/semantic.min.css";
    import App from "./App";
    import firebase from "firebase";
    import { BrowserRouter, Switch, Route, withRouter } from "react- 
router-dom";
    import Login from "./components/Login";
    import Register from "./components/Register";

    const Root = props => {
      useEffect(() => {
        firebase.auth().onAuthStateChanged(user => {
          if (user) {
            props.history.push("/");
          }
        });
      });
      return (
        <Switch>
          <Route exact path="/" component={App} />
          <Route path="/login" component={Login} />
          <Route path="/register" component={Register} />
        </Switch>
      );
    };

    const RootWithAuth = withRouter(Root);

    ReactDOM.render(
      <BrowserRouter>
        <RootWithAuth />{" "}
      </BrowserRouter>,
      document.getElementById("root")
    );

score 9 · Accepted Answer · answered Jun 19 '19 at 12:23

Your problem is in useEfect, from React:

If you’re familiar with React class lifecycle methods, you can think of useEffect Hook as componentDidMount, componentDidUpdate, and componentWillUnmount combined.

your infinite loop is because you are using useEfect currently also as componentDidUpdate, just add [ ] at the end of useEfect which will cause useEfect to act as componentDidMount.

useEffect(() => {
        firebase.auth().onAuthStateChanged(user => {
          if (user) {
            props.history.push("/");
          }
        });
      }, []);

I forgot to put it there but finally, it works for me. Thank you so much — Eva, Jun 19 '19 at 12:38

Throttling navigation to prevent the browser from hanging in React App

1 Answers1