React Query in 100 Seconds

Подписаться 3,1 млн

Просмотров 622 тыс.

50% 1

React Query is a tool that makes your data fetching code faster, easier, and more powerful. Learn how to use React Query it in a real application in the Full React Course fireship.io/courses/react
#js #webdev #100SecondsOfCode
🔗 Resources
React Query Docs react-query.tanstack.com/
100 Seconds of React • React in 100 Seconds
Fetch API developer.mozilla.org/en-US/d...
🔥 Get More Content - Upgrade to PRO
Upgrade to Fireship PRO at fireship.io/pro
Use code lORhwXd2 for 25% off your first payment.
🎨 My Editor Settings
- Atom One Dark
- vscode-icons
- Fira Code Font
🔖 Topics Covered
- React Query tutorial
- How to fetch data in react?
- Advanced data fetching in JS
- Implement infinite scroll in react
- How to implement optimistic updates in react
- Alternatives to react redux

Наука

Опубликовано:

8 июл 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 542

@de5085 2 года назад

I've just joined a company and they used react query and my life was never been simpler thank god for whomever created this

@jasoncavanaugh1556 Год назад

@@droiddevx03 No it should be "whomever" because it is the object of a preposition ("for" in this case). "Whom" is for objects, and "who" is for subjects. If you're gonna be petty and police people's grammar, at least be correct about it lmao.

@quixote5986 Год назад

@@jasoncavanaugh1556 lvl 100 raid boss right here

@succatash 10 месяцев назад

@jasoncavanaugh1556 just curious, weren't they talking about the person that created it not react query. I'm awful at grammar and actually curious. Your comment made me smarter today.

@hellowill 5 дней назад

We are using redux saga for everything lol

@albertdugba 2 года назад

Been using react-query for a while, convinced my company and we moved managing our server side state from redux to react-query has seen tremendous increase in performance. Shout outs to Tanner Linsley

@skyhappy 2 года назад

Why would you use react in the server side anyway it's a client side library

@jatmikoherjati6348 2 года назад

@@skyhappy Maybe, he wanted to say server side state or simply server state

@albertdugba 2 года назад

@@skyhappy oh right, I meant keeping my server side state in sync with the client

@viallymboma9874 2 года назад

@@skyhappy he means whatever data comes from server to the client...

@motta021 2 года назад

if there's one library that is a game-changing, is this one. It solve SO many problems and keep things SO simple, that I like to compare with Javascript and Typescript. Once you migrate, it gets so hard and annoying to deal with codebases without it.

@skyhappy 2 года назад

Can you explain

@outis99 2 года назад

I am switching to typescript right now, but my vs code has become incredibly slow. For example I'll type something that contains an error but vs code will take like 10 seconds to underline it. My computer has a good CPU and 16GB ram. Tried googling it but found no solutions

@Steel0079 2 года назад

@@outis99 check task manager to see what is slowing down your PC and kill anything that's not needed.

@daniellindegren1182 2 года назад

Agreed. If you're using Redux though, RTK Query is the way to go.

@filmfortbe 2 года назад

How does it work with lazy loading though?

@ANUNAYSINHA610 2 года назад

Have been using this library for over a year now and is truly mind-blowing. Solves syncing server state in the app like you make videos, pure awesomeness

@JimmyGeniusEllis 2 года назад

Thank you. Never stop making these.mi don’t care if you don’t get enough likes or subscribes. The people who do watch these get the maximum amount of learning from them. Thank you very much.

@a3animations 2 года назад

Even as someone who doesn't code in JavaScript, Fireship's videos always make me entertained.

@theboringdev 2 года назад

How you understand so much that you can simplified it into a really short video is really amazing

@paulocbbf 2 года назад

I love this channel so much to describe! It's impossible not to understand the videos, the methodology here is crystal clear and pleasant to digest. Keep rocking, guys!

@ferdianarid 2 года назад

I already use this , is very powerful .. match with case like updating continuously like crypto market, always refresh with interval 3s or more

@muhamedmustafa8996 2 года назад

Good job man, I love react-query I used it months ago on my company project, the good thing about this library is that you can create custom hooks for your API calls and invoke them when ever you need.

@melvinlijiabraham4165 2 года назад

Would love to see a full fledged tutorial on React Query beyond 100 seconds ❤️

@phoneix24886 2 года назад

I love your channel. As a backend guy there is so much to know and learn about front end and this channel helps me stay updated with the front end tech.

@parkourbee2 2 года назад

This was perfectly timed for me. Trying to build a blitz js web app that uses capacitor to also act as a mobile app, and I've been trying to use this library for remote calls to the server.

@mireksirina8302 2 года назад

Rytmus at 1:28 has made my day.

@codenamegrant 2 года назад

I just finished a react query course, but this is a great intro for my collegues. Thanks.

@dwanepennant 2 года назад

Which one and would you recommend it?

@akshaybhor6330 2 года назад

Can you share link to the course?

@RexGalilae 2 года назад

@@dwanepennant I personally recommend TheNetNinja. He explains so well even my dumbass understood it

@codenamegrant 2 года назад

While the Net Ninja is great, I would describe his as a crash course, I preferred CodeEvolution, it was far more in-depth: ru-vid.com/group/PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2

@PhongNguyen-jd3fw 2 года назад

swr from vercel is another great alternative to react-query, it seems to be simpler and it does not require a Provider

@cakemnstr42 2 года назад

react-query doesn't either, it's optional and to be used if you want to apply query options (e.g. sending all errors to some error logging tool) globally. SWR actually also has a provider like that for the same purpose

@krishgarg2806 2 года назад

@@cakemnstr42 swr is 4kb and react-query is 12kb. So that's one thing you can compare them on.

@philheathslegalteam 2 года назад

@@krishgarg2806 We use SWR in production for very very advanced use cases. So does Vercel.

@mileslemon 2 года назад

@@krishgarg2806 what are you talking about

@krishgarg2806 2 года назад

@@philheathslegalteam I mean yes it can be, was just telling my personal preference.

@Nobody-md5kt 2 года назад

We recently migrated from Relay to React Query. It is a massive improvement and is so much more readable.

@demiann4160 2 года назад

Thank you for this and for all your content. Jeff style to communicate so much in the less time possible is unique and so valuable to tech.

@MrRishi24 2 года назад

react-query is one of the most useful react libraries and yes, it almost eliminates the need for any other client-side state management library.

@AkshayAradhya 2 года назад

You still need redux

@Ivcota 2 года назад

@@AkshayAradhya lol no you don't. If you need stale global data in the state, just use something like Zustand. Redux is too much for most cases now.

@vivarantx 2 года назад

@@Ivcota you must be a noob, if you use redux toolkit it's even easier than react query

@Ivcota 2 года назад

@@vivarantx how am I a noob for saying you don't need redux? Everyone would agree. I use whatever is required of me. However right now I'm using codegen graphql with react query. But I can codegen on rtk too and it's basically the same workflow.

@Ivcota 2 года назад

@@vivarantx lol you're basically saying there's only one way to manage state in react 😂😂 okay....

@operatorblackbird 2 года назад

These videos are amazing! Keep up the amazing work!

@jakhongirabdukhamidov2796 2 года назад

He saves so much of my time, Googling the use cases and differences of tools, with very good examples in such a short time. Can't wait full crash course on React Query.

@mohamedshahrul1750 2 года назад

just wanna ask.. if i use react query, i dont need redux anymore is it?

@allone258 Год назад

@@mohamedshahrul1750 yes

@collins4359 2 года назад

React query is definitely one of my favorite libraries

@locim9201 2 года назад

This is the great library I recently used, it’s really great👍🏻

@Landon_S2 2 года назад

Super cool, I love how fast these 100 second videos keep coming. I'd really like to see a 100 seconds on ROS

@4ortson 2 года назад

this is video is not one ive been waiting for, but definitely one i needed!

@CaioCodes 2 года назад

WOW, this is SO game-changing, I'm going to learn it ASAP.

@hexerei02021 2 года назад

Never expected to see Rytmus in a video about programming.

@matcarnring7132 2 года назад

me too :DD

@WillAmaral29 2 года назад

I use RTK Query, which has a very similar API, with the familiar redux ecosystem. But React Query seems to be the preferred choice in the community. Would love to see a comparison between them and the trade offs.

@dosomecoding 2 года назад

i used both react query is much better than rtk

@cakemnstr42 2 года назад

well one drawback of RTK Query is that you need to use Redux. IMHO a major drawback, I do not like Redux one bit.

@Wardret 2 года назад

RTK Query is awesome and I dont mind using Redux tbh. Redux toolkit is rly nice.

@petarp3938 2 года назад

@@Wardret Yeah I feel people mostly talk about the old redux without even having tried RTK when saying they don't like redux.

@Wardret 2 года назад

@@petarp3938 ye you are so right, they need to give Redux one more chance and go through their newer docs

@thatprogrammersleigh8433 2 года назад

Yet again learning about something I never heard about before. I gotta figure out how Fireship finds all this stuff lol

@muhammadzaakirmungrue3146 2 года назад

This will be a game changer if we can have some sort of control over the size and number of objects in the cache. This is still a good start once data is fetched once then, every other time it gets fetched it will come from the the cache very quickly.

@aaronmendez3302 2 года назад

Will take a look, looks awesome!

@user-ih5gm7mp9w 4 месяца назад

This is BUSTED so powerful. Thanks for the vid

@haeckerzz 2 года назад

Even i am using in my project.. React query is awesome... Big shout-out to all

@TehLeviter 2 года назад

Been using it since 2020 I think, been in love since then.

@shadowyt1727 4 месяца назад

One of the favourite libraries for react ever exist

@GlitchyPSI 2 года назад

OK this is fantastic, I didn't know I wanted this until I found it

@0xBerto 2 года назад

I must learn this library NOW. Thank you

@luisgustavofeitoza2892 2 года назад

this absolutely changed my life

@Geibelt 2 года назад

How about 100 seconds of Spark, a very powerful tool Awesome content, keep it up!

@BlinkByteChannel 2 года назад

RTK Query video is a must now. Good explanation.

@rodrigocornidez1917 2 года назад

Thanks for sharing! this was a great find. I'm surprised It hasn't come up in my previous searches.

@syedsadiq8591 10 месяцев назад

Amazing bro. Amazing. You just explained what chatGPT wasn't able to do for me.

@Brlitzkreig 2 года назад

Once again another clean work of art

@rainbot32 2 года назад

oh nice, just what i'll need for my current project

@eugeneponomarov7429 2 года назад

Confirm, this is really cool library!

@npc73x 2 года назад

even it has a support of selectors, really they thought of everything. it's not just library for data fetching, it becomes a new way of doing things

@a.anvarbekov 2 года назад

Ooh, these I had been thinking about that I should learn react query and here you are

@romelian3754 2 года назад

This come to me at such perfect time!

@ontime8109 2 года назад

Hell yeah! React Query is awesome!

@karthiknayak8948 2 года назад

I really loved the caching feature

@tinmank 2 года назад

Thank you so much, this thing is insane!

@John69 2 года назад

U have THE COOLEST visuals lately

@kevinc4736 2 года назад

Love this library ! 👍😁

@SeySvK 2 года назад

A Wild Rytmus Appears! :D

@gixxerblade 2 года назад

Nice and basic. You hit the wave tops for sure.

@nickwang8595 2 года назад

Literallly don't understand how people manage data fetching without this.

@swapnildadamode662 2 года назад

Omg, this was best explanation

@brascoarts2634 2 года назад

That's why I love angular, I feel it's underrated!

@ulisesavila2879 2 года назад

The non change paradigm people will tell you that rxjs for http call is hard and all that

@lucienchu9649 2 года назад

looks very useful and promising, gonna check this tool out later

@vyonizr 2 года назад

Good video! Please do a comparison against similar library like Vercel's SWR

@manaspatil3996 2 года назад

Jeff, it's about time you fulfill the tutorials you promised. Pleasee

@amjed-ali-k 2 года назад

Nice. Make one for React-Table too

@jacobstamm 2 года назад

So much simpler than RxJS for HTTP calls.

@ClocianClokes 2 года назад

This will be so useful!

@vikram87in 2 года назад

Interesting library..great video 😍😍

@muhamadrafipamungkas4465 2 года назад

WOWW, this is jaw-dropping for me...

@alvesvaren 2 года назад

Wtf I have needed this forever

@mohamedelidrissi810 2 года назад

So happy I discovered this library a few weeks ago, it's a life-saver and takes away the complexity of fetching and caching data.

@SBamniya 2 года назад

Been using it for more than a year now, and haven’t thought of using redux in any of the project I recently worked. Loving it

@vaibhav1180 2 года назад

But what if you need some property in almost every other component of the project?

@avishapiro8592 2 года назад

@@vaibhav1180 useContext

@vaibhav1180 2 года назад

@@avishapiro8592 But man using Context API in a big project? That'll be another nightmare, I would happily use Redux

@avishapiro8592 2 года назад

@@vaibhav1180 You should try it. React-Query handles the data from server, and Context handles the rest. With custom hooks for everything, it's very maintainable. React-Query makes life easier.

@lord_kh4n 2 года назад

@@vaibhav1180 By using RQ, I think you don't need to use useContext anymore, because it handles deduplication. Just call useQuery everywhere in your components

@stareddragon555 2 года назад

Its actually pretty similar to react apollo, it uses graphql schema to fetch data and the hooks syntax is almost the same in react query.

@rashad1330 2 года назад

I was looking for this comment. Not a lot of GraphQL users here I guess.

@Monstermash355 2 года назад

This library is so amazing

@user-ol6tq5hw7s 2 года назад

You are Dr. of this game! :)

@nro337 2 года назад

Dang that's insanely helpful

@sonmangaking 2 года назад

Very great to see react becoming more and more the number one web choice

@renanbrayner984 2 года назад

For the vue programmers there is a similar lib called vue-query

@beybladetunada5697 Год назад

I was using SWR but this just looks like a better version of it, honestly pretty dope

@parthipankalayini8 2 года назад

Wow just thought about this library when you upload React js 100sec

@misaelpereira9679 2 года назад

This moment, this tiny moment of my life is called: happiness

@nat4466 Год назад

I am currently developing my first web app product and struggling with useContext hook. I cannot describe how thankful I am that I came across your vid.

@AbishekMahe Год назад

wut, how is this supposed to help with useContext ?

@nat4466 Год назад

@@AbishekMahe accessing fetched data from queries anywhere in the app through query keys

@Deevicode День назад

🔥🔥💯 great explanation

@blidnightd7880 2 года назад

Very amazing, that provides an API similar to apollo client

@omergronich778 2 года назад

Would love to see storybook in 100 seconds

@xtrappin 2 года назад

For anyone wondering, react-query is a godsent :)

@gameboyrotterdam9342 2 года назад

I love ur vids 💓

@web_dev_cz 2 года назад

!!user i finally found someone actually use it :D

@jesulobajohn8468 2 года назад

Just when I needed it, does this guy read minds 🤔

@abhiramh4087 2 года назад

Great video! Here's an idea for the 100 second series: Blender in 100 seconds. Now you might wonder what does a 3D program have to do with code? Actually, you can run python scripts in blender and I believe the majority of the community don't use the feature (including myself). Maybe you can get creative and give us a few cool tricks using it!

@khaki32 2 года назад

That could be interesting for a longer video, like the video made through code.

@deathdefier45 2 года назад

My god this is beautiful

@CutiePi 2 года назад

Yep, it’s insanely good, migrated from flux and redux

@334Bena 2 года назад

i wish i knew about this when i started making my current project, guess i'll recode my fetches at some point

@s4ndeep1203 2 года назад

vue-query is one of my favourite lib, does exactly this, but for vue

@benchracer2171 11 месяцев назад

Fantastic. I actually watched this 0.5x. The guy behind React Query is brilliant. Some of react just feels like brain spaz. Like something as fundamental as global state should have been simple from the jump.

@Mik-kv8xx 2 года назад

Awesome unity tutorial, on the next one you should explain prefabs beacuse im really confused by them.

@voidtraveller01 2 года назад

My dopamine hit so bad when fireship release new video

@Draghful 2 года назад

Why did I just hear of React Query now? God damn, I'm going to start using this.

@60RPM Год назад

React Query is sooooooo good 👌

@MohitKumargritch 2 года назад

They really have thought of everything.

@partharanjan 2 года назад

Nice library, In Angular it's from day one :)

@krtirtho 2 года назад

*React Query + Zustand* is the best combination in the world for react state management

@multiarray2320 2 года назад

Zustand?

@locim9201 2 года назад

@@multiarray2320 another state manager tools and looks much simpler than redux. And also clean on async handling. P.S. didn’t use it yet, wanna know more opinion on that too

@multiarray2320 2 года назад

@@locim9201 ok. the word confused me because i am from germany (Zustand=state).

@locim9201 2 года назад

@@multiarray2320 wow, thanks, author of Zustand should be a German too