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.
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
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
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.
