useOutlet Hook (for animated outlets)

[ViewableGravy]

My company is currently looking at migrating to Tanstack router from react router v5. One of the things that we have identified as a potential issue is route transition animations and how the approach would differ from v5's.

There is a discussion post on how you could potentially use current options to implement this, but the accepted answer suggests cloning the router during the animation phase so that outlets render previous elements (since the router context would be the pre-navigation context). This solution doesn't particularly feel like a good approach in my opinion and so instead we were looking at other more robust options:
#823

One such approach that is used in react-router v6 is to use their useOutlet hook to get back a reference to the element and then check for whether this element changes reference. This would allow for easily creating a custom <AnimatedOutlet> component or any other variation of the Outlet without requiring the internal functionality to be reimplemented (and potentially desynced from the libraries implementation).

Would adding a useOutlet hook be something that could be considered in the future? Realistically from what I can see, internally the Outlet component just does some checks and returns a nextMatch or nextMatch wrapped in a suspense boundary, so I'd imagine a use outlet would do the exact same thing, but would leave the memoization and handling of the final rendered component up to the consuming component.

I'm happy to make an example PR of what this might look like if this is something that maintainers think would benefit the library.

Note: I made this a separate discussion message to the above linked discussion because a useOutlet hook does not specifically apply to animations, although it is one use case, any custom Outlet implementation would ideally be able to access this logic.

[schiller-manuel]

Would adding a useOutlet hook be something that could be considered in the future?

sounds interesting!
it really depends on the details of the implementation and how/if animations would be supported through it.
so creating an initial draft PR would be best to kick this off.
looking forward to it.

[ViewableGravy]

Thankyou for the reply.

I've spent a few hours looking into a potential implementation for such a hook and while it's completely possible to make a useOutlet hook by simply abstracting the logic of the <Outlet /> component into a hook, it unfortunately doesn't seem to provide any major benefits, at least in terms of animation.

Fundamentally, it looks like the problem with animating outlets is that the Match component that is used inside the Outlet component still gets the actual component from the router context and throws an error if a routeId cannot be found from the matchId. This obviously does not work with the idea of animating out a component when you transition route, because choosing to render the component for X duration after the route has changed will cause it to crash because the component can no longer be found from the matches.

If anyone can think of a reasonable use case for a useOutlet hook (which would fundamentally just be a hook variant of the Outlet component) then it could still be worth implementing.

On the animation note. I've noticed that you can get any component using the flatRoutes object in the router, so perhaps storing the previous route and rendering the component from here could potentially work, but I also don't doubt that there is many unforeseen holes in this plan so we'll see.

I'm going to keep this discussion open for a couple more days so that I can continue looking into some solutions around useOutlet or at least consider if there is any real reason to even create it as a hook:

For reference, since I did not link this in the original post. The reason I thought that creating a useOutlet hook might provide a solution was because of this article / code sandbox for react router v6, but clearly the implementations are very different: https://medium.com/@antonio.falcescu/animating-react-pages-with-react-router-dom-outlet-and-framer-motion-animatepresence-bd5438b3433b

[tannerlinsley]

Animations would require simultaneously rendering the states for both the previous and next trees. If we were using standard react state primitives like use state, this would be port straight forward with context, but then we would lose fine grained component subscriptions. Currently we use useSyncExternalStore, so we can’t do that. We could technically look into state forking at the TanStack Store level, which would presumably allow us to override a store context, but even this would be a stretch.

@crutchcorn, ideas?