Почему я получаю ошибку «Maximum update depth exceeded»?

Question

[Incold]

Здравствуйте! После того как я добавил проверку на авторизованного пользователя в роутах, стал получать ошибку бесконечного ререндэра.
App.js:

function App(props) {

    useEffect(() => props.checkUserToken() , []); // action проверяющий, есть ли JWT в localStorage, если да, то меняет props.isLogin на true
  
    return (
        <div className="d-flex align-items-center justify-content-center">
            <Switch>
                <Route path='/authorization'
                       render={props => !props.isLogin ? <Login {...props} /> : <Redirect to='/main' />}
                />

                <Route path='/main'
                       render={props => props.isLogin ? <MainPage {...props} /> : <Redirect to='/authorization' />}
                />
                <Route
                    render={props => <Redirect to={props.isLogin ? '/main' : '/authorization'} />}
                />
            </Switch>
            {
                props.loading && <Loading />
            }
        </div>
    )
}

Вот, что выводит redux-logger:

Сначала вызывается action "CHECK_TOKEN" (на persist не обращайте внимания), который слушается сагой и в зависимости от результата проверки вызывает action "TOKEN_EXIST", который меняет isLogin на true
По идее, дальше должен перерендериться App, опять "зайти" на роут authorization и там редиректить на main, но вылазит ошибка.
Сначала, я подумал, дело в проверке токена, поэтому закоментил хук, заново залогинился, но всё повторилось, авторизация прошла успешно, данные получены, isLogin стал true, но опять вылезла эта ошибка.
Так в чём проблема и как исправить эту ошибку?
Заранее, спасибо, за любую помощь!

Comments

[Incold]

Немного дополню инфы.
Полный скрин ошибки:

Answer 1

[Incold]

Нашёл! Как всегда ошибка заключается в мелочи)

<Route path='/authorization'
                       render={props => !props.isLogin ? <Login {...props} /> : <Redirect to='/main' />}
 />

В подобной записи, props.isLogin берётся из LE (Lexical Environment) функции в render, и там оно равно undefined, поэтому постоянно срабатывает ложное условие, и происходит бесконечный редирект c /main на /authorization.
Решением является изменение названия параметра props на любое другое имя)
Пример:

<Route path='/authorization'
                       render={lalala => !props.isLogin ? <Login {...lalala} /> : <Redirect to='/main' />}
 />

Answer 2

[hzzzzl]

а это точно в function App происходит, не пишет подробнее, в каком именно компоненте update depth exceeded?

Comments

[Incold]

Здравствуйте! Скорее всего да, т.к. debugger и console.log не срабатывают если их поставить в MainPage, в action и sagas я тоже уверен, т.к. они все прекрасно работали (и сейчас работают), пока я не изменил роуты (сделал проверку)
+ как я уже писал выше, эта ошибка вылазит, только когда isLogin меняется на true и должен произойти редирект (полный код ошибки приложил к комментариям к вопросу)

Answer 3

[lnked]

попробуйте так

useEffect(() => props.checkUserToken() , [props.checkUserToken]);

Comments

[Incold]

Здравствуйте! Это не помогло, с [props.isLogin] тоже