TanStackT
TanStack•2mo 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 /> 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)


but if I use 
useEffect
 and 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",


Thanks!
Was this page helpful?