React Query in 100 Seconds

Поділитися
Вставка
  • Опубліковано 29 жов 2024

КОМЕНТАРІ • 549

  • @de5085
    @de5085 2 роки тому +268

    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 Рік тому +34

      @@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 Рік тому +31

      @@jasoncavanaugh1556 lvl 100 raid boss right here

    • @succatash
      @succatash Рік тому +2

      ​@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
      @hellowill 3 місяці тому

      We are using redux saga for everything lol

  • @albertdugba
    @albertdugba 2 роки тому +379

    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 роки тому +7

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

    • @jatmikoherjati6348
      @jatmikoherjati6348 2 роки тому +16

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

    • @albertdugba
      @albertdugba 2 роки тому +8

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

    • @viallymboma9874
      @viallymboma9874 2 роки тому +12

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

  • @motta021
    @motta021 2 роки тому +715

    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 роки тому +1

      Can you explain

    • @outis99
      @outis99 2 роки тому +11

      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 роки тому +18

      @@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
    @ANUNAYSINHA610 2 роки тому +13

    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
    @JimmyGeniusEllis 2 роки тому +12

    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.

  • @codenamegrant
    @codenamegrant 2 роки тому +133

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

    • @dwanepennant
      @dwanepennant 2 роки тому +1

      Which one and would you recommend it?

    • @akshaybhor6330
      @akshaybhor6330 2 роки тому +1

      Can you share link to the course?

    • @RexGalilae
      @RexGalilae 2 роки тому +16

      @@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:
      ua-cam.com/play/PLC3y8-rFHvwjTELCrPrcZlo6blLBUspd2.html

  • @MrRishi24
    @MrRishi24 2 роки тому +49

    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 роки тому +2

      You still need redux

    • @Ivcota
      @Ivcota 2 роки тому +9

      @@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 роки тому +2

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

    • @Ivcota
      @Ivcota 2 роки тому +12

      @@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 роки тому +5

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

  • @theboringdev
    @theboringdev 2 роки тому +5

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

  • @a3animations
    @a3animations 2 роки тому +13

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

  • @WillAmaral29
    @WillAmaral29 2 роки тому +269

    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 роки тому +18

      i used both react query is much better than rtk

    • @cakemnstr42
      @cakemnstr42 2 роки тому +29

      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 роки тому +27

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

    • @petarp3938
      @petarp3938 2 роки тому +39

      @@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 роки тому +2

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

  • @ferdianarid
    @ferdianarid 2 роки тому +13

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

  • @jakhongirabdukhamidov2796
    @jakhongirabdukhamidov2796 2 роки тому +18

    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 2 роки тому

      @@mohamedshahrul1750 yes

  • @melvinlijiabraham4165
    @melvinlijiabraham4165 2 роки тому +19

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

  • @paulocbbf
    @paulocbbf 2 роки тому +11

    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!

  • @PhongNguyen-jd3fw
    @PhongNguyen-jd3fw 2 роки тому +106

    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 роки тому +11

      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 роки тому +3

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

    • @philheathslegalteam
      @philheathslegalteam 2 роки тому +4

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

  • @hexerei02021
    @hexerei02021 2 роки тому +10

    Never expected to see Rytmus in a video about programming.

  • @mireksirina8302
    @mireksirina8302 2 роки тому +3

    Rytmus at 1:28 has made my day.

  • @muhamedmustafa8996
    @muhamedmustafa8996 2 роки тому +5

    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.

  • @phoneix24886
    @phoneix24886 2 роки тому +1

    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.

  • @thatprogrammersleigh8433
    @thatprogrammersleigh8433 2 роки тому +10

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

  • @brascoarts2634
    @brascoarts2634 2 роки тому +2

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

    • @ulisesavila2879
      @ulisesavila2879 2 роки тому +2

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

  • @Geibelt
    @Geibelt 2 роки тому +11

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

  • @collins4359
    @collins4359 2 роки тому +3

    React query is definitely one of my favorite libraries

  • @locim9201
    @locim9201 2 роки тому +5

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

  • @syedsadiq8591
    @syedsadiq8591 Рік тому +1

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

  • @krtirtho
    @krtirtho 2 роки тому +7

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

    • @multiarray2320
      @multiarray2320 2 роки тому +1

      Zustand?

    • @locim9201
      @locim9201 2 роки тому +1

      @@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
      @multiarray2320 2 роки тому +4

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

    • @locim9201
      @locim9201 2 роки тому +2

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

    • @zayne-sarutobi
      @zayne-sarutobi Рік тому

      I knew it wasn't only me who felt like this

  • @shell-k4b
    @shell-k4b 8 місяців тому

    This is BUSTED so powerful. Thanks for the vid

  • @stareddragon555
    @stareddragon555 2 роки тому +7

    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 роки тому +5

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

  • @SeySvK
    @SeySvK 2 роки тому +4

    A Wild Rytmus Appears! :D

  • @parkourbee2
    @parkourbee2 2 роки тому +3

    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.

  • @demiann4160
    @demiann4160 2 роки тому +1

    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.

  • @shadowyt1727
    @shadowyt1727 8 місяців тому

    One of the favourite libraries for react ever exist

  • @John69
    @John69 2 роки тому

    U have THE COOLEST visuals lately

  •  2 роки тому +27

    Or even simpler:
    `const { data, isLoading, isError } = useQuery('cars', fetchCars);`
    `isLoading` or `status === 'loading'` - The query has no data and is currently fetching
    `isError` or `status === 'error'` - The query encountered an error
    `isSuccess` or `status === 'success'` - The query was successful and data is available

    • @fluttermaster6148
      @fluttermaster6148 2 роки тому

      @Scott Page USMC You have to check in on 'idle' status as well. like `status === 'idle'`, once pass then data should not be undefined

    • @z-aru
      @z-aru 2 роки тому

      @Scott Page USMC Something like this will work out I guess?
      {
      user: data,
      loading: !data && !error,
      errorUser: error,
      isErrorUser: !data && error,
      };
      I always return these values on my custom hooks

    • @z-aru
      @z-aru 2 роки тому

      @Scott Page USMC You are right

  • @4ortson
    @4ortson 2 роки тому

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

  • @nickwang8595
    @nickwang8595 2 роки тому

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

  • @vyonizr
    @vyonizr 2 роки тому +8

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

  • @aaronmendez3302
    @aaronmendez3302 2 роки тому +2

    Will take a look, looks awesome!

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

  • @SBamniya
    @SBamniya 2 роки тому +1

    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 роки тому +1

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

    • @avishapiro8592
      @avishapiro8592 2 роки тому +1

      @@vaibhav1180 useContext

    • @vaibhav1180
      @vaibhav1180 2 роки тому +1

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

    • @avishapiro8592
      @avishapiro8592 2 роки тому +4

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

    • @z-aru
      @z-aru 2 роки тому +3

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

  • @luisgustavofeitoza2892
    @luisgustavofeitoza2892 2 роки тому

    this absolutely changed my life

  • @TehLeviter
    @TehLeviter 2 роки тому

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

  • @strarsis
    @strarsis 2 роки тому +3

    • @paul1
      @paul1 2 роки тому

      Check out React Location by the same author, you wont need suspense anymore. Game changer!

    • @z-aru
      @z-aru 2 роки тому

      @@paul1 I just encountered that Interesting library.
      I was thinking does RL internal utilize suspense too though?

    • @paul1
      @paul1 2 роки тому

      @@z-aru Not quite. Check out Pending States in the docs for RL for a nice explanation and some examples

  • @BlinkByteChannel
    @BlinkByteChannel 2 роки тому

    RTK Query video is a must now. Good explanation.

  • @operatorblackbird
    @operatorblackbird 2 роки тому +5

    These videos are amazing! Keep up the amazing work!

  • @sarojregmi200
    @sarojregmi200 2 місяці тому

    Was searching for a implementation of dependent query was not sure how to search got the answer as always fireship ships fire 🔥

  • @codinginflow
    @codinginflow 2 роки тому

    Is it better than SWR (which was created by the makers of NextJS)?

  • @manaspatil3996
    @manaspatil3996 2 роки тому +1

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

  • @amjed-ali-k
    @amjed-ali-k 2 роки тому +4

    Nice. Make one for React-Table too

  • @eugeneponomarov7429
    @eugeneponomarov7429 2 роки тому

    Confirm, this is really cool library!

  • @nat4466
    @nat4466 2 роки тому

    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 Рік тому +1

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

  • @voidtraveller01
    @voidtraveller01 2 роки тому +1

    My dopamine hit so bad when fireship release new video

  • @jesulobajohn8468
    @jesulobajohn8468 2 роки тому +1

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

  • @haeckerzz
    @haeckerzz 2 роки тому

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

  • @rodrigocornidez1917
    @rodrigocornidez1917 2 роки тому +1

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

  • @renanbrayner984
    @renanbrayner984 2 роки тому +4

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

  • @abhiramh4087
    @abhiramh4087 2 роки тому +28

    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 роки тому +3

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

  • @omergronich778
    @omergronich778 2 роки тому +4

    Would love to see storybook in 100 seconds

  • @jacobstamm
    @jacobstamm 2 роки тому +3

    So much simpler than RxJS for HTTP calls.

  • @parthipankalayini8
    @parthipankalayini8 2 роки тому +1

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

  • @0xBerto
    @0xBerto 2 роки тому

    I must learn this library NOW. Thank you

  • @xtrappin
    @xtrappin 2 роки тому

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

  • @a.anvarbekov
    @a.anvarbekov 2 роки тому

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

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

  • @ontime8109
    @ontime8109 2 роки тому

    Hell yeah! React Query is awesome!

  • @GlitchyPSI
    @GlitchyPSI 2 роки тому

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

  • @Brlitzkreig
    @Brlitzkreig 2 роки тому

    Once again another clean work of art

  • @alvesvaren
    @alvesvaren 2 роки тому +1

    Wtf I have needed this forever

  • @CaioCodes
    @CaioCodes 2 роки тому

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

  • @Nobody-md5kt
    @Nobody-md5kt 2 роки тому

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

  • @MercyFromOverwatch2
    @MercyFromOverwatch2 2 роки тому

    Jeff is still my favourite tech youtuber

  • @benchracer2171
    @benchracer2171 Рік тому

    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.

  • @eleah2665
    @eleah2665 2 роки тому

    You probably know "they" is Tanner Linsley. Thanks Fireship and thanks Tanner!

  • @gameboyrotterdam9342
    @gameboyrotterdam9342 2 роки тому +2

    I love ur vids 💓

  • @Monstermash355
    @Monstermash355 2 роки тому

    This library is so amazing

  • @ЂорђеЈеленковић
    @ЂорђеЈеленковић 2 роки тому

    You are Dr. of this game! :)

  • @thalibmuhammad9519
    @thalibmuhammad9519 2 роки тому +1

    supercharged axios, we used in production 😉 our live is far better since then

  • @HeinerAngarita
    @HeinerAngarita 5 місяців тому

    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.

  • @rainbot32
    @rainbot32 2 роки тому

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

  • @igincan14
    @igincan14 2 роки тому +2

    1:35 damn.. I didn't expect see this guy on your channel.

  • @misaelpereira9679
    @misaelpereira9679 2 роки тому

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

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

  • @lucienchu9649
    @lucienchu9649 2 роки тому

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

  • @bobuccman1424
    @bobuccman1424 2 роки тому +1

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

  • @romelian3754
    @romelian3754 2 роки тому

    This come to me at such perfect time!

  • @partharanjan
    @partharanjan 2 роки тому

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

  • @ChamaraVFX
    @ChamaraVFX 2 роки тому +1

    We need this in Vue eco system.. this will be the cherry on top of already awesome composition API

    • @z-aru
      @z-aru 2 роки тому

      I think there are already like Vue-Query and swrv (swerve) for Vue bro

  • @swapnildadamode662
    @swapnildadamode662 2 роки тому

    Omg, this was best explanation

  • @TheGamingMaik
    @TheGamingMaik 2 роки тому

    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!

  • @karthiknayak8948
    @karthiknayak8948 2 роки тому

    I really loved the caching feature

  • @kevinc4736
    @kevinc4736 2 роки тому

    Love this library ! 👍😁

  • @tinmank
    @tinmank 2 роки тому

    Thank you so much, this thing is insane!

  • @audioz1006
    @audioz1006 2 роки тому

    do a video about LaTex ! more people should know about it

  • @muhamadrafipamungkas4465
    @muhamadrafipamungkas4465 2 роки тому

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

  • @CutiePi
    @CutiePi 2 роки тому

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

  • @deathdefier45
    @deathdefier45 2 роки тому

    My god this is beautiful

  • @gixxerblade
    @gixxerblade 2 роки тому

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

  • @Draghful
    @Draghful 2 роки тому

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

  • @web_dev_cz
    @web_dev_cz 2 роки тому

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

  • @blidnightd7880
    @blidnightd7880 2 роки тому

    Very amazing, that provides an API similar to apollo client