How do I cleanup resources on route change? ie event listeners
I'm using tanstack file based routing and have a page that instantiates a bunch of resources that need to be disposed when i change routes. How do I deal with this? I'm already trying useEffect cleanup functions without success
8 Replies
xenial-black•9mo ago
what kind of resources?
flat-fuchsiaOP•9mo ago
a webworker, mouse listeners and keyboard listeners
xenial-black•9mo ago
and how does that relate to the router?
where do you create those resources
flat-fuchsiaOP•9mo ago
on a route, it relates to the router because i want to clean up these resources on route change and they aren't being cleaned up on component unmount
i have useEffect hooks that return a cleanup function and that cleanup function isn't called on route change when i use the back and forward buttons for navigation
haven't tried other types of navigation
xenial-black•9mo ago
what does "on a route" mean?
in a route component?
if yes, how would you access the resource outside of that component for any cleanup?
anyhow you could look into the onEnter/onLeave route hooks
flat-fuchsiaOP•9mo ago
that's why im curious about how any cleanup happens of things like event listeners when using tanstack router and a route change happens
I'm surprised I don't see anything logged from the useEffect return callback when a route change happens, I thought that callback was supposed to be called when a component unmounted
for now im forcing a document reload when navigating around this page but it's not ideal
xenial-black•9mo ago
what is a "route change"?
just changing a path param but the sam route is rendered ?
if yes you can force remounting the route component using remountDeps
flat-fuchsiaOP•9mo ago
By route change i mean: Lets say i have a path / and go to path /game. Both of those routes have different file based routes that tanststack router uses. Does that make sense?
Ill try remountdeps
Remount Deps did it!
the cleanup happens and everything, nice!