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:
netninja.dev/p...
🐱‍💻 Access the course files on GitHub:
github.com/iam...
🐱‍💻 React Tutorial:
On Net Ninja Pro - netninja.dev/p...
On KZbin - • Full React Tutorial #1...
🐱‍💻 React Router Docs - reactrouter.co...
🐱‍💻 VS Code - code.visualstu...

[@donnmichaelcleofe7132]

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

[@stefanmasic1287]

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

[@Spyder22dz]

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

[@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?

[@aymanechaaba]

use Suspense or state from useNavigation hook provided by React Router. let me know if this helped

[@masterwayne9790]

@@aymanechaaba Suspense component might help with his case as you mentioned

[@AdsCity24]

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!

[@2pac2pac2pac]

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

[@muhammedrashid3957]

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

[@michaelkurzewski2937]

Elooo. I think we could abandon react router, and turn our attention to tanstack.

[@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`

[@onigbindedavid6630]

Please how do I use ds for firebase authentication since i can't use hooks with ds

[@souviknag]

is this possible to call multiple loaders, passing the redux store? ...... { path: "overview", element: , loader: [viewLoader(store), viewWorkLoader(store)], } .......

[@GethushanRavichandran]

Please create a Playlist about "Creating E-Commerce Website using Strapi , MongoDB, React , and Stripe"

[@siralone3646]

Does anyone know how should I combine a React Router and RTK Query? RTK Query creates a Hook, should I use that hook on my loader function? Thx

[@iganic7574]

but what about error? what if error generate while making api req?

[@RoyaLearns]

Hi I did all the steps but I'm getting this error : Failed to fetch Failed to load resource: net::ERR_CONNECTION_REFUSED What should I do?

[@ВіталійБілоус-э2в]

Try to add some latency and you will be wondered with this approach

[@yhuukee7053]

Loader can be used with custom hook?

[@maskman4821]

Nope, it can't, it fetches data and render before dom mounted, it works kind of like sever side render.

[@yhuukee7053]

@@maskman4821 ok, thank you!

[@mm6710]

i tried to use it with ContextAPI but i got an error saying ( i can't use 'useLoaderData' outside of a route ). suks but understandable

[@hervinsonsamson1531]

Is this a good idea to put my authentication in the loader fn?

[@orionsquare]

@3:41 does not work for me. Put up a comment but was deleted?

[@dapolcio3405]

Isn't it a bad practice to fetch data from server every time we go to career page? Isn't it better to fetch it once with useEffect hook?

[@andrewtran9870]

Complete beginner here, but if you used useEffect to call the API, wouldn't it still need to call the API and fetch data from the server every time the career page is accessed?

[@rumble1925]

No don’t optimise prematurely

[@lovelynduru-magnus3233]

I'm getting "assignment to undeclared variable res" when i click on the careers link. Am i missing something? @NetNinja

[@Jamie-qz7vm]

There is no outlet component specified .

[@michalnowak2181]

thx

[@mohamedyoussef8835]

Awesome video +++++++++++ 😀

[@towatch]

♥️♥️✌🏻

[@flowerofash4439]

I am stil not sure why that hook is made, we can just make the same behaviour with useEffect. also what if it is used in real world where upload and download speed is a thing, there is no mentioned way to tell the user that "the app is not frozen but we are downloading something", while using useEffect everybody know how to handle it.

[@emuemhonjieonosereme2495]

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?

[@AmitKumar-cp6mx]

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?

[@shineLouisShine]

I wish someone who knows the answers would have respond to you... 🧐

[@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.

[@paulclarke4099]

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

[@maskman4821]

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 😘

[@ssumit196]

but it doesn't provide cache and other features like react-query and swr right?

[@adiii41]

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

[@Dakun]

Actual information starts at 4:34

[@dennisogbonnaya5923]

How do you handle server errors with the useLoder hook?

[@niraz9130]

9:30

[@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!

[@1910X3]

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

[@nickwoodward819]

is there any way to have reduxTK deal with the request? like maybe dispatching an action from within careersLoaded? (~ @3:30) would that work?

[@nishantnimish7825]

Is loader worth using over useeffect except the memory it saves us?

[@fariadworld446]

Why are you using Loaders to fetch data and not useEffect?

[@lenvonahom]

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

[@GhanayemOmar]

how can i pass data to the loader fun?

[@a13519]

Your are the best on KZbin

[@suzunome47]

Does anyone know how to use useContext in a loader function? I need to access some data in my global context but apparently you can't use hooks outside of a React component.

[@vasylmashkarynec7078]

It's impossible for the moment, or at least it's not suppose to be used there, router developers stated that loaders and actions was introduced in order to decouple fetching data and rendering, however there is voting to introduce this functionality like element: ... loader: ... context: ...

[@swagfinger]

so good

[@muhammadrifqy24]

I am trying to use useLoaderData in the other page, but the result is being read as 'undefined'. Does this mean that useLoaderData can be used only in the route component in which loader has been used. If yes, then how can I use the result returned in the other page? 🙏

[@RustemmKh]

useFetcher()

[@codewithluq]

Does the loader function make useState and useEffect ways of fetching data sort of obsolete??

[@Tussu17]

I think the same!

[@annametel9638]

Thank you You are my favourit teacher!💓

[@NetNinja]

Wow, thank you! :) that means a lot

[@taofeekiyanda3050]

Amazing 😍. Just at the right time

[@NetNinja]

Hope it's helpful Taofeek!

[@517nickyj]

Can you use the useLoaderData hook in subroutes and treat it as a sort of context for all child routes?

[@dennisgiovanniaguirreherna9361]

I think useLoaderData should work with that, is also included with React router 6

[@rumble1925]

userouteloaderdata(routeId) does this

[@ReadingNotAllowed]

Anyone else getting """ Unhandled Thrown Error! - NetworkError when attempting to fetch resource. """ when entering localhost:3000/careers ?

[@flyflor599]

powershell Set-ExecutionPolicy -Scope "CurrentUser" -ExecutionPolicy "RemoteSigned"

[@mambaa11]

@@flyflor599 for some reason it does not work for me. it just says command not found

[@chasemorin1843]

getting same error output to browser, no errors in the terminal

[@chasemorin1843]

add "proxy": "localhost:4000/" in your package.json file. In your careers loader function use a relative path in your fetch command ('/careers') is stead of the whole domain path.

[@hahahahm6003]

use npx before the command he typed