React Router in Depth #6 - Loaders

[@donnmichaelcleofe7132]

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

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

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

[@stefanmasic1287]

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

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

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

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

[@Michael.design]

Perfectly explained❤ Better than the paid course I’m following😂

[@NetNinja]

Thanks Michael! :) more at NetNinja.dev

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

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

[@ITLearning-ug2hp]

I have the same question as you

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

[@orionsquare]

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

[@Spyder22dz]

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

[@annametel9638]

Thank you You are my favourit teacher!💓

[@NetNinja]

Wow, thank you! :) that means a lot

[@1910X3]

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

[@dennisogbonnaya5923]

How do you handle server errors with the useLoder hook?

[@a13519]

Your are the best on KZbin

[@adscity-25]

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 ✨✨

[@pjc825]

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

[@nishantnimish7825]

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

[@muhammedrashid3957]

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

[@2pac2pac2pac]

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

[@codewithluq]

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

[@Tussu17]

I think the same!

[@hervinsonsamson1531]

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

[@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()

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

[@Dakun]

Actual information starts at 4:34

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

[@taofeekiyanda3050]

Amazing 😍. Just at the right time

[@NetNinja]

Hope it's helpful Taofeek!

[@onigbindedavid6630]

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

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

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

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

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

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

[@fariadworld446]

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

[@GhanayemOmar]

how can i pass data to the loader fun?

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

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

[@Jamie-qz7vm]

There is no outlet component specified .

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

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

[@GethushanRavichandran]

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

[@towatch]

♥️♥️✌🏻

[@mohamedyoussef8835]

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

[@michalnowak2181]

thx

[@michaelkurzewski2937]

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

[@pen.is.leaking]

so good

[@souviknag]

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

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

[@niraz9130]

9:30

[@lovelynduru-magnus3233]

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

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