https://beta.reactrouter.com/en/dev/hooks/use-loader-data react-router-dom can invoke a loader function before the component is rendered. I can pass my clj fetch function and it invokes and I can access the data with the (useLoaderData) hook without needing to mess with useEffect. Every time I hit the route I'll trigger the function. The function its configurated at Root app level pairing the component with its loader function. Promising !

https://gist.github.com/geraldodev/1422fa785f6e0f1afa29c4c083815c76

https://gist.github.com/geraldodev/f1a99836fd26b57aab11353ec9cc7fd7

"react-router": "^6.3.0", "react-router-dom": "6.4.0-pre.8",

There is a problem with the newest react-router-dom package the -pre.3, that is the currently package installed by react-router-dom/next as the docs instructs. The package is malformed. (an oversight , that made them deliver typescript code) . So i had to remove ^ and pin point the "6.4.0-pre.8" version that does not have this problem.

React 18 strict mode, fake mounts the component twice, so you have to take care of that if you are using useEffect for fetching. Besides that at the render time is not the right moment to fetch according to https://www.youtube.com/watch?v=95B8mnhzoCM https://remix.run/blog/remixing-react-router https://twitter.com/acdlite/status/1506763056755396618