Okay.
And up next, let's discuss loaders.
So just like we have actions, we also have loaders and loaders essentially allow us to provide data
to the route before it renders.
So unlike the typical setup where, for example, we would set up the use effect and then when the component
mounts, that's when we fetch and all that.
In this case, we'll right away provide the data so you can think of it as pre fetching the data, which
is obviously super, super cool.
And we'll start with the very basic setup and then of course we'll work on the actual setup in the dashboard
layout.
So for starters, here's what I want to do.
We're going to navigate to App JS and I can tell you right away that the setup is almost the same.
The only thing we need to keep in mind that of course the property is going to be different Now why
am I telling you that?
Because.
I want you to understand that of course you can set up the functionality in here as well in the app,
but just like with actions, I'll set it up in the actual page, in the dashboard layout page and I'll
just export from the page and set it here equal to a property.
So instead of action, we're looking for loader.
And again, if you want, you can set up the function over here.
But in my case I'll actually do it in the page.
So let me navigate back and I'm going to do it below or above.
Doesn't really matter.
The create context.
Same deal.
I'm not going to be particularly original and I'm going to call this lower.
And this is going to be our function.
Same deal.
We want to always, always return something from this function.
And for now, I'm just going to say hello, world.
Let's save it.
Since we're exporting, we want to go back to App JS and we want to import.
In this case, of course it's a loader, so we're going to go here with Loader as and then let's call
it dashboard loader.
And now we just need to look for the page.
So from then pages and more specifically dashboard layout, let's scroll down, let's look for our loader
and we're going to go with the dashboard loader.
And what's really awesome, whatever we return from this function is going to be right away available
in our component.
So again, we're not setting up the use effect.
This is not going to be available only after the component renders.
No, pretty much immediately we'll have access to this data.
So we'll fetch it here and we'll make it available in the component.
Now how we can make it available?
Well, we need to use the use loader data hook and you're not.
Again, same deal.
I'll just import the redirect and use loader data to save on typing.
Basically, we already have the outlet, so we grab this hook.
And now let me showcase this.
So for now, I'm just going to call this data.
And we're going to go with user loader data.
We will invoke it and we're going to log it.
So I'll get over here.
And now notice.
The moment pretty much.
I refresh.
I'll have access to this Hello world.
And of course, eventually we can set up some awesome functionality where we can fetch the jobs, we
can fetch the user.
If there is an error, we can do something.
We can either redirect the user or we can just showcase the error message and all that cool stuff.
Again, super super useful function a loader one which allows us to get the data before the component
even renders.
And same deal as with action.
You always, always, always want to return something from this function if you're just going to go
with nothing.
Same deal you have this something went wrong.
And if you take a look at the error message, they basically confirm what I was just saying.
And with this in place now, we can set up a request to get the current user in the dashboard layout
page.