Error [render methods should be a pure function of props and state] during state change

Viewed 61

When I was using react-nprogress, I get the following problem in my console:

image

Here's my code:

const NTTracker = () => {
  const [isLoading, setIsLoading] = useState(false);
  const [state, dispatch] = useContext(NTTrackerContext);

  return (
    <>
      <Router>
        <Route
          render={({ location }) => (
            <>
              <Progress isAnimating={isLoading} key={location.key} />
              <TransitionGroup className="body-dom">
                <CSSTransition
                  classNames="fade"
                  key={location.key}
                  onEnter={() => {setIsLoading(true)}}
                  onEntered={() => {setIsLoading(false)}}
                  timeout={450}
                  in={true}
                >
                  <Switch location={location}>
                    <Route exact path="/"><h1>Home</h1></Route>
                    // code for Login and APIHome below
                    <Route exact path="/accounts/login"><Login/></Route>
                    <Route exact path="/api/:teamname"><APIHome/></Route>
                    <Route exact path="*" component={NoMatch} />
                  </Switch>
                </CSSTransition>
              </TransitionGroup>
              <Footer/>
            </>
          )}
        />
      </Router>
    </>
  );
};

Please note that NTTracker is wrapped in a context provider.

return (
  <NTTrackerContextProvider initState={initialState}>
    <NTTracker/>
  </NTTrackerContextProvider>
)

This is pretty similar (if not the same) with the demo usage. The problem is that nprogress seems unable to handle redirections with state change correctly, per the output above.

More specifically, the error occurred with these steps:

  1. the user clicks "log out," at URL /api/team1 and the state of the application is changed (state.user.authenticated changed from true to false).
  2. when the state is changed, the code below detects the change and redirects the user to /accounts/login
  3. when the page completed the redirection, the error above occurred.

The URL http://127.0.0.1:3000/api/team1 is defined as:

function APIHome() {
  if (!state.user.authenticated) history.push("/accounts/login");
  // ...
}

The redirected URL http://127.0.0.1:3000/accounts/login is defined as:

function Profile() {
  // if you need anything in here, please let me know

My description and logging may not be exactly accurate. If there are any inquiries or potential problems in my error description, please comment below.

Unfortunately, I can't put this into a sandbox because it will essentially be hosting the entire project as the bug depends on the change of state (where the data are retrieved from a separate backend server).

Thanks in advance.

0 Answers
Related