React Router in Depth #6 - Loaders

In this React Router tutorial you'll learn about loaders - a newer way to fetch component data.

⭐⭐ Watch the whole course now (without ads) on Net Ninja Pro:

🐱‍💻 Access the course files on GitHub:

🐱‍💻 React Tutorial:

[jerrerock]

I am following a course on CodecAdemy but for many parts I am also watching your tutorials which are explaining it a lot better!

[donnmichaelcleofe]

I really appreciate when the tutorials are up to date. Pls keep the good job

[Spyderdz]

thanks for the tutorial, now my search bar works just fine with this loader method

[maskman]

Wow, React has evolved, the loader function is one of the feature Sveltekit provides, it fetches data and render right before component mounted, this way we get better user experience because we don't need a loader indication and user won't see empty content. I think React is pushed to Server side render way, all these popular frontend frameworks has SSR capability right now in order to survive, because meta-frameworks such as Sveltekit, Next, Nuxt, Remix are taking over, it is good to know we can do this with React 😘

[m_miko]

You're the first guy I recommend to anyone I know when we come to programming staff,

I question I this you can return your loader with a defer like

return defer({ value: somethingHere });

can you do a video on that too please.

[stefanmasic]

I'm just enjoying and learning. Super perfect. Thanks 1.000.000 times.

[nefouwe]

you are just master of all code i got all i need for the semester in just you 1 series of video thanks a lot your are really being helpful

[AmitKumar-cpmx]

I have a couple of questions?
1) What if data fetching take some time?, how can we add spinner ?
2) how to use data in other pages?
Cuz fetching data everytime is a bad practice.

(I think if we dispatch an action or setState in the rendered component then it can work otherwise we can't use hooks and rtk outside the react component)

3.Can useLoader completely replace
useEffect in data fetching?

[X]

Very nice tutorial about "React Router"! Hope you can make a series tutorials about "Remix Run" of React!

[paulclarke]

Can't wait for you to do a SvelteKit 1.0 course, now that its officially released 😀👍

[emuemhonjieonosereme]

Sir for this loader async function we use await but there is no try catch block.. What if the route localhost:4000/careers cannot be found ie it throws an error, will the react router automatically render the error element?

[ggrlmon]

I've been following your other videos and it really helped me have a better understanding of how react router works. Regrading loaders I think you missed one fundamental concept here, which is the wait time. Since you're loading your data from a static file there's no wait time. Using this loader approach when calling actual api's there would be a delay before the page renders. With the useeffect you can handle that delay by adding a spinner or something, informing the user that the page is loading. Is there a way to do that with the loader?

[annametel]

Thank you You are my favourit teacher!💓

[AdsCity]

That's a really great lesson course and easy to understand, good job Sir 🤩🤩. It'd be a salvation if you could make a tutotial on how to host a React App, as you are using react-router-dom hook. I am struggling on something called Client Side Rendering & Server Side Rendering (which returns a 404 page not found, in my case). Would appreciate, Sir ✨✨

[willysnowman]

I watched the whole tutorial. Thank you!! Loaders seem to work well for /componentA/componentB/:id. My data, however, is dynamic so I cannot point to :id as the id may change as the data changes. So my path ended up /loader where useEffect loads the data into session memory then redirects to /componentA which reads the data from session memory. I could also useContext, but session memory works for now. Just pointing this out for others since it took me a while to realize it. Once you redirect all the state and params are gone!

[muhammedrashid]

is loader replaces useEffect hooks? I don't understand when to use loader function exactly can anyone explain?

[kelsey_roy]

Alternatively, you could put this in `your package.json` scripts section: `"start-db": "npx json-server --watch data/db.json --port 4000"` . To call it, just do: `npm run start-db`

[pacpacpac]

the end point created automatically but how it got the /careers from where it got this

[adiii]

It would be much nicer if you could put any hooks inside loader. Now for example im wondering how the heck use lodaing screen while loader is fetching data :D

[souviknag]

is this possible to call multiple loaders, passing the redux store?

{
path: "overview",
element: <Ks.OverView />,
loader: [viewLoader(store), viewWorkLoader(store)],
}