Error: Maximum update depth exceeded (again!)

I’m guessing that this is React 101 and has been asked a stack of times, but I can’t see what I’m doing wrong.

Something is causing this code to get into an endless render loop and crash. I suspected the isLoggedIn flag, but am not so sure now. x.loginSlice.isLoggedIn is a straight boolean which is being set in reducer created by redux-toolkits createSlice helper. I assume that it’s not violating any of the ‘don’t mutate state’ rules.

My assumption is that this should only re-render when the equality check function on useSelector detects a change in the redux store. Perhaps something else is doing it? Location perhaps? It’s still eluding me as to exactly how location is being passed in ‘magically’ via react-router.

Can anyone see what I’m doing wrong?

Thank you 🙂

const PrivateRoute: React.FC<{ path: string, exact: boolean, children: ReactNode }> = ({children, ...rest}) => {

    const isLoggedIn = useSelector((x: RootState) => x.loginSlice.isLoggedIn, (x, y) => x===y)
    console.log('rendering privateRoute')

    return (
        <Route
            {...rest}
            render={({location}) =>
                isLoggedIn ? (
                    children
                ) : (
                    <Redirect
                        to={{
                            pathname: "/page/Login",
                            state: {from: location}
                        }}
                    />
                )
            }
        />
    );
}

const App: React.FC = () => {
        core.RunSetup()
        const darkMode = useAppSelector(x => x.settings.darkMode)
        return (
            <IonApp className={darkMode === 'dark' ? 'dark-theme' : ''}>
                <IonReactRouter>
                    <IonSplitPane contentId="main">
                        <IonRouterOutlet id="main">
                            <Route path="/" exact={true}>
                                <Redirect to="/page/Login"/>
                            </Route>

                            <Route path="/page/:name" exact={true}>
                                <Page/>
                            </Route>

                            <PrivateRoute path="/study/Counter" exact={true}>
                                <LearningPageWrapper page={TestPages.counter}/>
                            </PrivateRoute>

                        </IonRouterOutlet>

                        <Menu/>
                    </IonSplitPane>;
                </IonReactRouter>
            </IonApp>
        );
    }
;

export default App;

Source: React Router Questions

LEAVE A COMMENT