Using <Navigate /> causes "Maximum update depth exceeded"

Hey! I came across a weird bug that I'm not sure how to fix.

Basically, I have some logic like auth etc. that redirects logged out users back to the login page. I noticed that if I'm using the

<Navigate />

<Navigate />

component to redirect them, it causes a "Maximum update depth exceeded", or more specifically, this error:

Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at getRootForUpdatedFiber (react-dom_client.js?v=83969dac:3526:128)
    at enqueueConcurrentHookUpdate (react-dom_client.js?v=83969dac:3510:16)
    at dispatchSetStateInternal (react-dom_client.js?v=83969dac:6832:20)
    at dispatchSetState (react-dom_client.js?v=83969dac:6803:9)
    at Transitioner.router.startTransition (Transitioner.js?v=83969dac:23:5)
    at router.js?v=83969dac:596:14
    at new Promise (<anonymous>)
    at RouterCore.load (router.js?v=83969dac:595:21)
    at RouterCore.commitLocation (router.js?v=83969dac:451:14)
    at RouterCore.buildAndCommitLocation (router.js?v=83969dac:514:19)

Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at getRootForUpdatedFiber (react-dom_client.js?v=83969dac:3526:128)
    at enqueueConcurrentHookUpdate (react-dom_client.js?v=83969dac:3510:16)
    at dispatchSetStateInternal (react-dom_client.js?v=83969dac:6832:20)
    at dispatchSetState (react-dom_client.js?v=83969dac:6803:9)
    at Transitioner.router.startTransition (Transitioner.js?v=83969dac:23:5)
    at router.js?v=83969dac:596:14
    at new Promise (<anonymous>)
    at RouterCore.load (router.js?v=83969dac:595:21)
    at RouterCore.commitLocation (router.js?v=83969dac:451:14)
    at RouterCore.buildAndCommitLocation (router.js?v=83969dac:514:19)

but if I use

useEffect

useEffect

and

navigate = useNavigate()

navigate = useNavigate()

, then I don't get this error.

I can't figure out the exact reason it's happening though...

Code examples below...

My versions are the following:

    "@tanstack/react-query": "^5.66.5",
    "@tanstack/react-router": "^1.132.0",
    "@tanstack/react-router-ssr-query": "^1.131.7",
    "@tanstack/react-start": "^1.132.0",
    "@tanstack/router-plugin": "^1.132.0",

    "@tanstack/react-query": "^5.66.5",
    "@tanstack/react-router": "^1.132.0",
    "@tanstack/react-router-ssr-query": "^1.131.7",
    "@tanstack/react-start": "^1.132.0",
    "@tanstack/router-plugin": "^1.132.0",

Thanks!

TanStack•4mo ago•

5 replies

uncertain-scarlet

Using <Navigate /> causes "Maximum update depth exceeded"

Hey! I came across a weird bug that I'm not sure how to fix.

Basically, I have some logic like auth etc. that redirects logged out users back to the login page. I noticed that if I'm using the

<Navigate />

<Navigate />

component to redirect them, it causes a "Maximum update depth exceeded", or more specifically, this error:

Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at getRootForUpdatedFiber (react-dom_client.js?v=83969dac:3526:128)
    at enqueueConcurrentHookUpdate (react-dom_client.js?v=83969dac:3510:16)
    at dispatchSetStateInternal (react-dom_client.js?v=83969dac:6832:20)
    at dispatchSetState (react-dom_client.js?v=83969dac:6803:9)
    at Transitioner.router.startTransition (Transitioner.js?v=83969dac:23:5)
    at router.js?v=83969dac:596:14
    at new Promise (<anonymous>)
    at RouterCore.load (router.js?v=83969dac:595:21)
    at RouterCore.commitLocation (router.js?v=83969dac:451:14)
    at RouterCore.buildAndCommitLocation (router.js?v=83969dac:514:19)

Uncaught (in promise) Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.
    at getRootForUpdatedFiber (react-dom_client.js?v=83969dac:3526:128)
    at enqueueConcurrentHookUpdate (react-dom_client.js?v=83969dac:3510:16)
    at dispatchSetStateInternal (react-dom_client.js?v=83969dac:6832:20)
    at dispatchSetState (react-dom_client.js?v=83969dac:6803:9)
    at Transitioner.router.startTransition (Transitioner.js?v=83969dac:23:5)
    at router.js?v=83969dac:596:14
    at new Promise (<anonymous>)
    at RouterCore.load (router.js?v=83969dac:595:21)
    at RouterCore.commitLocation (router.js?v=83969dac:451:14)
    at RouterCore.buildAndCommitLocation (router.js?v=83969dac:514:19)

but if I use

useEffect

useEffect

and

navigate = useNavigate()

navigate = useNavigate()

, then I don't get this error.

I can't figure out the exact reason it's happening though...

Code examples below...

My versions are the following:

    "@tanstack/react-query": "^5.66.5",
    "@tanstack/react-router": "^1.132.0",
    "@tanstack/react-router-ssr-query": "^1.131.7",
    "@tanstack/react-start": "^1.132.0",
    "@tanstack/router-plugin": "^1.132.0",

    "@tanstack/react-query": "^5.66.5",
    "@tanstack/react-router": "^1.132.0",
    "@tanstack/react-router-ssr-query": "^1.131.7",
    "@tanstack/react-start": "^1.132.0",
    "@tanstack/router-plugin": "^1.132.0",

Thanks!

Using <Navigate /> causes "Maximum update depth exceeded"

Similar Threads

Using <Navigate /> causes "Maximum update depth exceeded"

Similar Threads

Similar Threads

Similar Threads