beforeLoad() vs loader()

[mrlubos]

As far as I can tell, there isn't a dedicated section for comparison between these two lifecycle methods. It would be nice to have a mention of recommended usage for both, which method is better for x and which one is better for y.

[gabrielvsantana]

In the meanwhile, it may help to look at the real implementation on this file.

[mrlubos]

Can you provide an overview of the differences?

[caweidmann]

Also not sure which one to use and in which scenario.

[jjhiggz]

I'm not sure 100%, but it seems like it's exactly what it sounds like... It runs the beforeLoad function before the loader function.

The main use case that they are using it for is just to dump auth into the context so that way you can reference the user every time the loaders do run.

If I'm reading this right basically you can think of every request being handled by the router something like this:

req
   |> function beforeLoader({context})
   |> function loader({context}) // but the context in here is modified by the beforeLoader

So in the case of this example for DIY Auth...

in __root.tsx

const Route = createRootRoute({
  beforeLoad(){
     const user = getUserFromSession()
     return {
         user, // <-- the new context
     }
  }
})

Now in this route, or any route nestled inside of this route (because technically you can do this not on the root route too), you can access that user in your loader.

in posts/$postId

const Route = createFileRoute("posts/")({
    // pretty mindboggling that `user` is typesafe here
    loader: ({ user }) => { 
         return getPostsForUser(user)
    }
})

Trying to think of other use cases, but currently can't. There's gotta be some though. In the case of something like queryProvider, you can just pass that in at the top level without a beforeLoad, but I think maybe the hint on when to use beforeLoad, is if you have some data that fetches asynchronously that you need for all of your loaders in some part of your app to work smoothly.