React Router v6.4 ( v6.4.1 ) - Fetch data with loaders

Learn how to use loaders in React-Router version 6.4 ( 6.4.1 ). A new way to fetch data before your component renders. Implemented with Typescript and Vite.
Code:
github.com/wei...
Article by Dominik about using React-Router in combination with React-Query:
tkdodo.eu/blog...
Support me by subscribing to this channel ❤️
Do you want to master #react, #gatsby, or #svelte fast? ⏩ 🚀 👩‍🚀
Check out my premium courses at www.weibenfalk...
-
Find me somewhere below:
Linkedin: / thomas-weibenfalk-7635...
Twitter: / weibenfalk
Github: github.com/wei...
FreeCodeCamp: www.freecodeca...
Dev.to: dev.to/weibenfalk

[@llwebstylell242]

Спасибо за видео) Разработчики react-router-dom - реально молодцы.

[@callthecapital8631]

Amazing demo, thank you. Could you build the same app with loaders + react query and touch on when we might need to reach for a global state manager?

[@Weibenfalk]

You’ve got context built into react. That’s the only global state manager I use ;)

[@GauthierEHOLOUM]

How to use hook with loader? I've turned supabase sdk client into hook so when tring to access client in loader through hooks can't work

[@kkapgm]

thank you for this video, react-router v6.4.1 looks mazing with new api, hooks and this data loader, but their documentation sucks, I could never get my head around reading their documents, your video makes it simple. Keep making such great, learning videos. if possible please make a video for react-router with react query

[@BenMakerProducer]

Great video ! It would be great to see how to use loaders with useQuery 😄

[@omnimathic]

Hello there, again me. How how can we use useLoaderData hook in nextjs, because I am comfused that nextsj manages routes with in build library without react-router-dom?

[@Weibenfalk]

Yeah this is not for nextjs

[@flowerofash4439]

after this video now i've seen two people explaining react rotuer loader nicely without telling them what to do with the loading delay when the app do the request. not everything is a localhost

[@racine1866]

There is a way to show a loading component while the fetch is going? because if the fetch is slow the user will not know what is happening

[@Weibenfalk]

This is usually the thing with Server side fetching as it's fetching before the page is rendered. If you look at good old Wordpress sites there's no loading spinner. =) The data is being fetched before the HTML is rendered to the DOM. That shouldn't take too long if there's not a lot of data or a slow API. Loading indicators is usually used on Client side fetches.

[@racine1866]

@@Weibenfalk thank you for the response.

[@СемёнЗахаренко-л8з]

Thanks. I found the answer to my question in your video.

[@craigjohnson8279]

I think this is similar to TanStack React Location? Great video Thomas!

[@pyrocentury]

Thank you for the video. I have maybe a dumb question regarding typescript. How were you able to find out that the 'LoaderFunctionArgs' type definition is provided by react-router-dom? I don't see any relevant documentation on their website or github.

[@Weibenfalk]

I checked the files for react-router in the node-modules folder =)

[@MyALPHAguy]

Hey could you make a full tutorial on React Router v6.4.1? Like building something with it using popular methods?

[@Weibenfalk]

I think this one covers a lot of ground on how to structure and build the routes ...

[@koronci]

useQuery and a loading indicator would be useful

[@fotojt79]

Thank you for the video! Is there a way to use useLoaderData for 2 different fetches, for when you need data from 2 api routes pre-loaded?

[@Weibenfalk]

Haven’t tried but guess you can just fetch them and await both of them as usual

[@fahimulhoque9324]

Thanks a lot. Your contents are informative and awesome always.

[@RachitGuptacool]

Please suggest how to integrate redux state with loader.

[@christianangelomsulit3759]

Nice content ☺

[@Weibenfalk]

Thanks, appreciate the support.

[@Sylar7773]

Thank You very much!!! Greate job!!!

[@BobbyW0nder]

Excellent video, it's the perfect introduction to React Router v6.4 with Typescript! Thank you so much 🙏

[@Weibenfalk]

Thanks. Appreciate it. =)

[@AMoktar]

Thanks, what about protected routes ?

[@toxirbekabdullaev2082]

can you also add time code in video, please)

[@omnimathic]

Hello there, I am learnig react now, I have question that Can I pass the pokemon name and image link from Root component to its children when exact pokemon link clicked on Root component, instead of refetching every pokemon on Pokemon component? Thank you in advance!

[@Weibenfalk]

I'm not refetching every pokemon in the Pokemon component. Only the data for that specific Pokemon are fetched. If you want to pass the pokemon name and image link to that specific component from the Root you can do that by URL params and grab them in the Pokemon component as I do now with the name.

[@omnimathic]

@@Weibenfalk Yes, you are absolutely right. I did not relaise you are fetching names first then fetching pakemon data with that names. Thank you. Sorry for misunderstanding.

[@tomaszstec5672]

I liked this one as all your content

[@MightyKingKala]

what's your vs code theme? looks amazing!

[@Weibenfalk]

One monokai 80s

[@samakshgrover7437]

Very well explained 👍

[@johnkucharsky6927]

Hello, can you give me advice where to look for a job as a web developer. Where did you find your job?

[@Weibenfalk]

Hard to guide you there. I’m a freelancer and contact companies that I feel interesting to work with. It can be tough from time to time but don’t give up!

[@johnkucharsky6927]

@@Weibenfalk what part of your earnings comes from youtube? I've just started, i make 600 dollars a month. I'm looking for a ways to impove my skills and make more

[@Weibenfalk]

Everything is possible. But I'm far from it..I can't really understand how you can make 600 dollars a month on your YT channel. Seems impossible if you just started.

[@johnkucharsky6927]

@@WeibenfalkI started working as a web developer, I have a job. I don't have a KZbin channel. Now I want to find another job because I need more money. By the way, great video, I liked it. Also, I watch a lot of KZbin channels about programming and I see that consistency is important here. I do not know if it is worth trying to shoot a video on KZbin. I have no experience, but in any case, most of the audience does not understand programming, so I can shoot maybe short videos, about an hour long, about main concepts, react

[@TheTeup]

Tack för en bra video 😊

[@adityakamble7004]

Awesome as always!!!😍

[@Weibenfalk]

Thanks! =)