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,}) => {

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

    return (
            render={({location}) =>
                isLoggedIn ? (
                ) : (
                            pathname: "/page/Login",
                            state: {from: location}

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

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

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



export default App;

Source: React Router Questions