How to detect route hydration completed?
I'm working on migrating a large app from Vike to TanStack Start / Router and am not sure how to know when hydration has completed on my first route component so I can safely update its state based on LocalStorage values and avoid hydration mismatches.
Vike exposes a hydration completed callback which I then use to set state in Zustand, which propagates to my React components via hooks. I've tried lots of different things in TanStack router, from listening to events (e.g.
onBeforeLoad
) to awaiting router.load()
to using a useEffect()
in my <RootComponent>
or a parent/sibiling of <Outlet />
, but they all tend to fire before a useEffect()
fires in my route component.
This would be fine if I had a single route component, but of course I have many routes, and I don't want to have to stick a useEffect()
(or use a wrapper) in every single route component.
I tried to do a minimal reproduction, but concurrent rendering appears to only turn on when I have many routes / lots of business logic. In the attached screenshot, notice how my matches route component <HomePage />
doesn't run useEffect()
until long after it's parent <RootComponent />
or router.load()
resolves.
0 Replies