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

  • @de5085
    @de50852 жыл бұрын

    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

    @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

    @quixote5986

    Жыл бұрын

    @@jasoncavanaugh1556 lvl 100 raid boss right here

  • @succatash

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

  • @albertdugba
    @albertdugba2 жыл бұрын

    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

    @skyhappy

    2 жыл бұрын

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

  • @jatmikoherjati6348

    @jatmikoherjati6348

    2 жыл бұрын

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

  • @albertdugba

    @albertdugba

    2 жыл бұрын

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

  • @viallymboma9874

    @viallymboma9874

    2 жыл бұрын

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

  • @motta021
    @motta0212 жыл бұрын

    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

    @skyhappy

    2 жыл бұрын

    Can you explain

  • @outis99

    @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

    @Steel0079

    2 жыл бұрын

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

  • @daniellindegren1182

    @daniellindegren1182

    2 жыл бұрын

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

  • @filmfortbe

    @filmfortbe

    2 жыл бұрын

    How does it work with lazy loading though?

  • @ANUNAYSINHA610
    @ANUNAYSINHA6102 жыл бұрын

    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
    @JimmyGeniusEllis2 жыл бұрын

    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.

  • @paulocbbf
    @paulocbbf2 жыл бұрын

    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!

  • @muhamedmustafa8996
    @muhamedmustafa89962 жыл бұрын

    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.

  • @a3animations
    @a3animations2 жыл бұрын

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

  • @theboringdev
    @theboringdev2 жыл бұрын

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

  • @phoneix24886
    @phoneix24886 Жыл бұрын

    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.

  • @ferdianarid
    @ferdianarid2 жыл бұрын

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

  • @codenamegrant
    @codenamegrant2 жыл бұрын

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

  • @dwanepennant

    @dwanepennant

    2 жыл бұрын

    Which one and would you recommend it?

  • @akshaybhor6330

    @akshaybhor6330

    2 жыл бұрын

    Can you share link to the course?

  • @RexGalilae

    @RexGalilae

    2 жыл бұрын

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

  • @codenamegrant

    @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

  • @melvinlijiabraham4165
    @melvinlijiabraham41652 жыл бұрын

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

  • @demiann4160
    @demiann41602 жыл бұрын

    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.

  • @parkourbee2
    @parkourbee22 жыл бұрын

    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.

  • @locim9201
    @locim92012 жыл бұрын

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

  • @operatorblackbird
    @operatorblackbird2 жыл бұрын

    These videos are amazing! Keep up the amazing work!

  • @Landon_S2
    @Landon_S22 жыл бұрын

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

  • @jakhongirabdukhamidov2796
    @jakhongirabdukhamidov27962 жыл бұрын

    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

    @mohamedshahrul1750

    2 жыл бұрын

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

  • @allone258

    @allone258

    Жыл бұрын

    @@mohamedshahrul1750 yes

  • @PhongNguyen-jd3fw
    @PhongNguyen-jd3fw2 жыл бұрын

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

  • @cakemnstr42

    @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

    @krishgarg2806

    2 жыл бұрын

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

  • @philheathslegalteam

    @philheathslegalteam

    2 жыл бұрын

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

  • @mileslemon

    @mileslemon

    2 жыл бұрын

    @@krishgarg2806 what are you talking about

  • @krishgarg2806

    @krishgarg2806

    2 жыл бұрын

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

  • @thatprogrammersleigh8433
    @thatprogrammersleigh84332 жыл бұрын

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

  • @4ortson
    @4ortson2 жыл бұрын

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

  • @aaronmendez3302
    @aaronmendez33022 жыл бұрын

    Will take a look, looks awesome!

  • @rodrigocornidez1917
    @rodrigocornidez19172 жыл бұрын

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

  • @CaioCodes
    @CaioCodes2 жыл бұрын

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

  • @WillAmaral29
    @WillAmaral292 жыл бұрын

    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

    @dosomecoding

    2 жыл бұрын

    i used both react query is much better than rtk

  • @cakemnstr42

    @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

    @Wardret

    2 жыл бұрын

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

  • @petarp3938

    @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

    @Wardret

    2 жыл бұрын

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

  • @syedsadiq8591
    @syedsadiq85919 ай бұрын

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

  • @Geibelt
    @Geibelt2 жыл бұрын

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

  • @hexerei02021
    @hexerei020212 жыл бұрын

    Never expected to see Rytmus in a video about programming.

  • @matcarnring7132

    @matcarnring7132

    2 жыл бұрын

    me too :DD

  • @user-ih5gm7mp9w
    @user-ih5gm7mp9w4 ай бұрын

    This is BUSTED so powerful. Thanks for the vid

  • @collins4359
    @collins43592 жыл бұрын

    React query is definitely one of my favorite libraries

  • @MrRishi24
    @MrRishi242 жыл бұрын

    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

    @AkshayAradhya

    2 жыл бұрын

    You still need redux

  • @Ivcota

    @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

    @vivarantx

    2 жыл бұрын

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

  • @Ivcota

    @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

    @Ivcota

    2 жыл бұрын

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

  • @BlinkByteChannel
    @BlinkByteChannel2 жыл бұрын

    RTK Query video is a must now. Good explanation.

  • @Nobody-md5kt
    @Nobody-md5kt2 жыл бұрын

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

  • @0xBerto
    @0xBerto2 жыл бұрын

    I must learn this library NOW. Thank you

  • @a.anvarbekov
    @a.anvarbekov2 жыл бұрын

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

  • @vyonizr
    @vyonizr2 жыл бұрын

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

  • @Brlitzkreig
    @Brlitzkreig Жыл бұрын

    Once again another clean work of art

  • @haeckerzz
    @haeckerzz2 жыл бұрын

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

  • @rainbot32
    @rainbot322 жыл бұрын

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

  • @eugeneponomarov7429
    @eugeneponomarov74292 жыл бұрын

    Confirm, this is really cool library!

  • @SeySvK
    @SeySvK2 жыл бұрын

    A Wild Rytmus Appears! :D

  • @tinmank
    @tinmank2 жыл бұрын

    Thank you so much, this thing is insane!

  • @muhammadzaakirmungrue3146
    @muhammadzaakirmungrue31462 жыл бұрын

    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.

  • @romelian3754
    @romelian37542 жыл бұрын

    This come to me at such perfect time!

  • @akshayindraganti
    @akshayindraganti2 жыл бұрын

    Amazing 🤩..Love ur videos

  • @GlitchyPSI
    @GlitchyPSI2 жыл бұрын

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

  • @TehLeviter
    @TehLeviter Жыл бұрын

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

  • @gixxerblade
    @gixxerblade2 жыл бұрын

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

  • @lucienchu9649
    @lucienchu96492 жыл бұрын

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

  • @kevinc4736
    @kevinc47362 жыл бұрын

    Love this library ! 👍😁

  • @amjed-ali-k
    @amjed-ali-k2 жыл бұрын

    Nice. Make one for React-Table too

  • @ontime8109
    @ontime81092 жыл бұрын

    Hell yeah! React Query is awesome!

  • @John69
    @John692 жыл бұрын

    U have THE COOLEST visuals lately

  • @karthiknayak8948
    @karthiknayak89482 жыл бұрын

    I really loved the caching feature

  • @swapnildadamode662
    @swapnildadamode6622 жыл бұрын

    Omg, this was best explanation

  • @ClocianClokes
    @ClocianClokes2 жыл бұрын

    This will be so useful!

  • @bobuccman1424
    @bobuccman14242 жыл бұрын

    do you plan on making a video about nim? it definitely deserves some attention!

  • @luisgustavofeitoza2892
    @luisgustavofeitoza28922 жыл бұрын

    this absolutely changed my life

  • @shadowyt1727
    @shadowyt17274 ай бұрын

    One of the favourite libraries for react ever exist

  • @parthipankalayini8
    @parthipankalayini82 жыл бұрын

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

  • @npc73x
    @npc73x2 жыл бұрын

    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

  • @vikram87in
    @vikram87in2 жыл бұрын

    Interesting library..great video 😍😍

  • @gameboyrotterdam9342
    @gameboyrotterdam93422 жыл бұрын

    I love ur vids 💓

  • @alvesvaren
    @alvesvaren2 жыл бұрын

    Wtf I have needed this forever

  • @user-ol6tq5hw7s
    @user-ol6tq5hw7s2 жыл бұрын

    You are Dr. of this game! :)

  • @Mik-kv8xx
    @Mik-kv8xx2 жыл бұрын

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

  • @jacobtb1
    @jacobtb1 Жыл бұрын

    DAMN! that is amazing

  • @blidnightd7880
    @blidnightd78802 жыл бұрын

    Very amazing, that provides an API similar to apollo client

  • @manaspatil3996
    @manaspatil39962 жыл бұрын

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

  • @beybladetunada5697
    @beybladetunada5697 Жыл бұрын

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

  • @abhiramh4087
    @abhiramh40872 жыл бұрын

    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

    @khaki32

    2 жыл бұрын

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

  • @nro337
    @nro3372 жыл бұрын

    Dang that's insanely helpful

  • @benchracer2171
    @benchracer217110 ай бұрын

    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.

  • @mohamedelidrissi810
    @mohamedelidrissi8102 жыл бұрын

    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.

  • @PalaniSamy-ed2ss
    @PalaniSamy-ed2ss Жыл бұрын

    Great Video.

  • @sonmangaking
    @sonmangaking2 жыл бұрын

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

  • @334Bena
    @334Bena2 жыл бұрын

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

  • @brascoarts2634
    @brascoarts26342 жыл бұрын

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

  • @ulisesavila2879

    @ulisesavila2879

    2 жыл бұрын

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

  • @s4ndeep1203
    @s4ndeep12032 жыл бұрын

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

  • @SBamniya
    @SBamniya2 жыл бұрын

    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

    @vaibhav1180

    2 жыл бұрын

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

  • @avishapiro8592

    @avishapiro8592

    2 жыл бұрын

    @@vaibhav1180 useContext

  • @vaibhav1180

    @vaibhav1180

    2 жыл бұрын

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

  • @avishapiro8592

    @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

    @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

  • @nat4466
    @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

    @AbishekMahe

    Жыл бұрын

    wut, how is this supposed to help with useContext ?

  • @nat4466

    @nat4466

    Жыл бұрын

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

  • @renanbrayner984
    @renanbrayner9842 жыл бұрын

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

  • @stareddragon555
    @stareddragon5552 жыл бұрын

    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

    @rashad1330

    2 жыл бұрын

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

  • @muhamadrafipamungkas4465
    @muhamadrafipamungkas44652 жыл бұрын

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

  • @partharanjan
    @partharanjan2 жыл бұрын

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

  • @andrzejdaniel7102
    @andrzejdaniel710210 ай бұрын

    Thanks!

  • @Monstermash355
    @Monstermash3552 жыл бұрын

    This library is so amazing

  • @web_dev_cz
    @web_dev_cz2 жыл бұрын

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

  • @deathdefier45
    @deathdefier45 Жыл бұрын

    My god this is beautiful

  • @Draghful
    @Draghful2 жыл бұрын

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

  • @samartajshaikh2601
    @samartajshaikh26012 жыл бұрын

    well explained.

  • @_4ertilo
    @_4ertilo Жыл бұрын

    It'd be cool if you could also review Redut-Toolkit-Query & compare it to React-Query

  • @HeinerAngarita
    @HeinerAngarita25 күн бұрын

    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.

  • @jesulobajohn8468
    @jesulobajohn84682 жыл бұрын

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

  • @Centorios
    @Centorios2 жыл бұрын

    I personally use SWR but is good to know other alternatives

  • @mireksirina8302
    @mireksirina83022 жыл бұрын

    Rytmus at 1:28 has made my day.

  • @The-Empowerment-Engine
    @The-Empowerment-Engine2 жыл бұрын

    Thanks for this

  • @DanelonNicolas
    @DanelonNicolas2 жыл бұрын

    Excellent

  • @TheGamingMaik
    @TheGamingMaik2 жыл бұрын

    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!

Келесі