Как сделать чтобы useEffect выполнялся до монтирования компонента?

Question

[Vann Damm]

Есть компонент который в эффекте вытягивает из localStorage данные, но компонент после монтирования редиректит на страницу авторизации хотя в localStorage есть данные авторизации. Вопрос: как сделать чтобы он монтировался после эффекта, либо проверку какую-нибудь сделать до показа роутов?

const App = (props) => {
  useEffect(() => {
    props.checkIsAuthUser();
  }, []);
  useEffect(() => {
    setTheme("light");
  }, []);
  return (
    <ApolloProvider client={client}>
      <Router>
        <Switch>
          <Route
            path={"/auth"}
            render={(routeProps) => <AuthPage {...routeProps} />}
          />
         {props.isAuth? 
          <>
        <Route
          path={"/app"}
          render={(routeProps) => <Application {...routeProps} />}
        />
        <Route exact path={"/"}>
          <Redirect to={"/app/today"} />
        </Route>
        <Route
          path={"/:err"}
          render={(routeProps) => <RedirectPage {...routeProps} />}
        />
      </>
      :
      <Redirect to={"/auth/login"} />
      }
        </Switch>
      </Router>
    </ApolloProvider>
  );
};

const mapStateToProps = (store) => ({
  isAuth: store.auth.login.state,
});
export default compose(
  withSuspens,
  connect(mapStateToProps, { checkIsAuthUser })
)(App);

Answer 1

[twolegs]

Никак, useEffect всегда вызывается после монтирования компонента.
Выделите контент в отдельную компоненту и рендерите по условию. Только так.

Answer 2

[tervizator]

попробуйте сделать unmount в useEffect

useEffect(() => {
//mount
return () => {
//unmount
}
}, [])