React Query in 100 Seconds
Ғылым және технология
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
Пікірлер: 540
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
9 ай бұрын
@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.
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...
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?
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
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.
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!
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.
Even as someone who doesn't code in JavaScript, Fireship's videos always make me entertained.
How you understand so much that you can simplified it into a really short video is really amazing
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.
I already use this , is very powerful .. match with case like updating continuously like crypto market, always refresh with interval 3s or more
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: kzread.info/head/PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2
Would love to see a full fledged tutorial on React Query beyond 100 seconds ❤️
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.
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.
This is the great library I recently used, it’s really great👍🏻
These videos are amazing! Keep up the amazing work!
Super cool, I love how fast these 100 second videos keep coming. I'd really like to see a 100 seconds on ROS
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
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.
Yet again learning about something I never heard about before. I gotta figure out how Fireship finds all this stuff lol
this is video is not one ive been waiting for, but definitely one i needed!
Will take a look, looks awesome!
Thanks for sharing! this was a great find. I'm surprised It hasn't come up in my previous searches.
WOW, this is SO game-changing, I'm going to learn it ASAP.
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
Amazing bro. Amazing. You just explained what chatGPT wasn't able to do for me.
How about 100 seconds of Spark, a very powerful tool Awesome content, keep it up!
Never expected to see Rytmus in a video about programming.
@matcarnring7132
2 жыл бұрын
me too :DD
This is BUSTED so powerful. Thanks for the vid
React query is definitely one of my favorite libraries
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....
RTK Query video is a must now. Good explanation.
We recently migrated from Relay to React Query. It is a massive improvement and is so much more readable.
I must learn this library NOW. Thank you
Ooh, these I had been thinking about that I should learn react query and here you are
Good video! Please do a comparison against similar library like Vercel's SWR
Once again another clean work of art
Even i am using in my project.. React query is awesome... Big shout-out to all
oh nice, just what i'll need for my current project
Confirm, this is really cool library!
A Wild Rytmus Appears! :D
Thank you so much, this thing is insane!
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.
This come to me at such perfect time!
Amazing 🤩..Love ur videos
OK this is fantastic, I didn't know I wanted this until I found it
Been using it since 2020 I think, been in love since then.
Nice and basic. You hit the wave tops for sure.
looks very useful and promising, gonna check this tool out later
Love this library ! 👍😁
Nice. Make one for React-Table too
Hell yeah! React Query is awesome!
U have THE COOLEST visuals lately
I really loved the caching feature
Omg, this was best explanation
This will be so useful!
do you plan on making a video about nim? it definitely deserves some attention!
this absolutely changed my life
One of the favourite libraries for react ever exist
Wow just thought about this library when you upload React js 100sec
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
Interesting library..great video 😍😍
I love ur vids 💓
Wtf I have needed this forever
You are Dr. of this game! :)
Awesome unity tutorial, on the next one you should explain prefabs beacuse im really confused by them.
DAMN! that is amazing
Very amazing, that provides an API similar to apollo client
Jeff, it's about time you fulfill the tutorials you promised. Pleasee
I was using SWR but this just looks like a better version of it, honestly pretty dope
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.
Dang that's insanely helpful
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.
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.
Great Video.
Very great to see react becoming more and more the number one web choice
i wish i knew about this when i started making my current project, guess i'll recode my fetches at some point
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
vue-query is one of my favourite lib, does exactly this, but for vue
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
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
For the vue programmers there is a similar lib called vue-query
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.
WOWW, this is jaw-dropping for me...
Nice library, In Angular it's from day one :)
Thanks!
This library is so amazing
!!user i finally found someone actually use it :D
My god this is beautiful
Why did I just hear of React Query now? God damn, I'm going to start using this.
well explained.
It'd be cool if you could also review Redut-Toolkit-Query & compare it to React-Query
Do you maybe have a course with explained examples of the different things react query can do? I found a couple of courses but the padding it's insane. If using React Query, most likely the user watching already knows basic react concepts and basic javascript concepts. I want a tutorial with the important parts react query offers and how to set up the backend for the infinite scrolling. Thank you for this 100 seconds video. We really need more courses who directly tackle the subject and not just explain everything from zero.
Just when I needed it, does this guy read minds 🤔
I personally use SWR but is good to know other alternatives
Rytmus at 1:28 has made my day.
Thanks for this
Excellent
Great Video! Please keep in mind the illustration shown for spagetti code is the holy flying spagetti monster. As a pastafarian though, I do not get offended by this as our lord told us. Keep it up!