How React Query Won

Рет қаралды 70,889

Ай бұрын

When I say "it would be harder to leave behind React Query than React", I mean it. Tanner Linsley and the TanStack packages are a massive reason to be part of this ecosystem.
FOLLOW UI.DEV ‪@uidotdev‬
SOURCES
query.gg
• The Story of React Query
tkdodo.eu/blog/practical-reac...
Check out my Twitch, Twitter, Discord more at t3.gg
S/O Ph4se0n3 for the awesome edit 🙏

Пікірлер: 183

@uidotdev Ай бұрын

We love you too! Thank you for the kind words. ❤

@markdesign1354 Ай бұрын

I love Both of you !! 🩷

@jakeoverflow Ай бұрын

"It's been very hard for me to not watch this one" He said with the red watch progress bar at 100% 😂

@ccccjjjjeeee Ай бұрын

description is 💯. tanstack query is the only thing that has fundamentally changed how i build frontend stuff in the last years. i'd rather use any other framework with tanstack query, than react without it.

@radiantveggies9348 Ай бұрын

I prefer RTK query

@deshi-sukuna Ай бұрын

@@radiantveggies9348 that only if u use redux toolkit, and I doubt most apps need a global state management library these days, server state is the way to go, but if you still need it using react query as a caching system alongside as a query provider is a no-brainer

@sentinelav Ай бұрын

Wow, uidotdev has some great design intuition and information presentation. Definitely going to give them a sub.

@ClariNerd Ай бұрын

1:48 the magic of Python is the community is so vibrant that you don’t mind it takes forever for the code to run, because you end up keeping such good company

@sampiiiiiiiiii Ай бұрын

Holy shit I had no idea you could use react query outside of just data fetching, this is gonna change so much for me at work, thanks king

@Tanner-cz4bd Ай бұрын

Timestamp ?

@Cangussu97 Ай бұрын

Phenomenal timing, my team is implementing a kanban-like board and struggling with state having everything in react-query. Going to integrate zustand for the complex board state, and react query for handling the async logic

@odra873 Ай бұрын

Or just use redux with rtk query and have it flawlessly integrated instead of connecting zustand with react query?

@shapelessed Ай бұрын

8:00 - This is the exact reason I ran screaming to backend once I got to learning React. The way React handles all its hooks, and the way they all tangle around each other and mess things up once you start using more than just one or two of them, is the single reason why I'll be staying far away from frontend, despite actually preferring working with UIs.

@Holobrine Ай бұрын

Signal-based reactivity is much easier to think around, I hope you consider trying out Svelte 5 when it comes out

@Leeway4434 Ай бұрын

have you tried htmx?

@IkeVictor Ай бұрын

great explanation for react query. very concise and to the point at the end there. great stuff!

@aeronwolfe7072 Ай бұрын

those tkdodo blogs are ESSENTIAL. read them if you wanna learn react query. amazing information there.

@helleye311 Ай бұрын

9:40 I'm proud to say I've written this code for a production app once, and immediately started pushing for react query. Which took me a while as a junior, but eventually I figured everything out and when I left every fetch was running through react query.

@ShootingUtah Ай бұрын

Switching to React Query in our project at work was great! I was able to get rid of some really complicated useEffects and other crap by using a couple of custom hooks using useQuery inside. It's great for keeping things updated in tables and forms and searching and filtering data, just adding things to the query key and everything is just handled.

@aeronwolfe7072 Ай бұрын

i LOVE React-Query. Before I even learned React, I did ALOT of research, so I've never written that bad data fetching code, but since I've learned React-Query, I have used it in EVERY SINGLE PROJECT i've written. lol. it just solves such a KEY problem... thanks for making great content theo and for making me smile! :)

@MSheepdog Ай бұрын

I'm primarily a Vue dev, but still recommend bringing in TanStack Query if you're building something with complex caching needs. The basic tools provided by Vue (and Pinia) handle async data a lot better than what you get in React, but after a certain point you'll end up needing to pull in something like TanStack Query or else you'll just be rebuilding the same functionality.

@thelostrider1 Ай бұрын

In the example from the docs at 8:00, why is the state being set to null before the api call and why isn't the the api call inside the "if ignore"? Why make an api call to ignore the result after?

@Fupicat Ай бұрын

The cleanup function is called when the effect reruns. At the time the first request was made, the code reasonably assumes the value it fetched is going to get used. But, for example, if the user clicks a different bio to load in the UI, while another one was already being fetched, you can't stop that fetch midway through, so you have to discard the value once it returns, so that the UI doesn't show incorrect data if a previous fetch is finished after the most recent one. Fetch operations are asynchronous, so you can have multiple running at the same time and can't know which one is going to return first.

@Maleficarios Ай бұрын

Why the hate on Redux, it suffers from NONE of these issues + its not even the same issue resolver. Sure its a lot of boilerplate, but boilerplate is abstract-able. Also, video is wrong in pointing out that using context updates not only the subscribed components but the entire app... which is what happens really.

@everythingisfine9988 Ай бұрын

Redux requires a lot of boilerplate for a fraction of the amount of features RQ has. Simple things like handling race conditions, isLoading, isFetching, isStale (if state data is old), etc. The Data type names are the rest apis. Every time u call an api, u automatically get the save data from state - if u wish. It's just wildly simple and efficient

@combatninjaturtle Ай бұрын

@@everythingisfine9988Redux is also a sync state manager…. It is more of a complete state management solution. Also it’s opinionated, that means every dev will stick to same pattern.

@patrickaikonia853 Ай бұрын

I don't know if I am doing something wrong but when I write applications with little state management and state sharing, I tent to use the data layer api in react router.

@NilsWestgardh Ай бұрын

I'm a self-taught dev who started with HTML/CSS a year ago, and started learning React/Next.js in December 2023. I'm half-way through the video and I'm guilty of doing all these things. Good learning opportunity!

@ThomasWSmith-wm5xn Ай бұрын

in the middle of moving an older code base to using react query - absolute nightmare. either start with react quey or forget about it. and if you're caching a heavily networked app - save yourself the time and just re-write the whole app

@lamhung4899 Ай бұрын

Starting with redux and happy enough with RTK Query. thanks redux team 😂

@ignrey Ай бұрын

Thanks for the explanation of hooks behavior, I've seen plenty of times people showcase that same code without any explanation. It's such a weird thing.

@silentsleeper Ай бұрын

how does react query match against swr?

@peteremad5228 Ай бұрын

why theo didn't mention at all ..that it is framework agnostic ?

@tom.watkins Ай бұрын

Ashamed to admit I've written every bad thing in this video. In a weird way I'm kinda glad I have, there is a value in learning how to do things with primitives, even if it sucks. Gives you a better understanding of the framework and an true appreciation of the abstraction when it comes along and an understanding of why you need it

@akifahmed9610 Ай бұрын

Which os are you using? And is it a github copilot or something else?

@rikschaaf Ай бұрын

33:34 "If you think you can do something better", well in that case, just go make a new react-query library

@vetrivendhan6122 Ай бұрын

Still in the interview some devs ask questions about promises and nested promises. But I stopped using that after I started using the React query.

@favanzzo Ай бұрын

New here theo. What vscode theme do you use?

@TheRiddl37 Ай бұрын

Next JS 14 user here, do we really need it still though, having RSC's and what not?

@TkDodo Ай бұрын

I have a blogpost about this titled: You Might Not Need React Query. Give it a read :)

@philheathslegalteam Ай бұрын

Yessnnt’

@TheRiddl37 Ай бұрын

@@TkDodo Thanks!

@jgkdmdevienjjgg8866 Ай бұрын

I think it's not react's flaw. It's because react is not a framework and it's only job is to render ui. All other stuff that every app needs has to be used from libs or written for every project as core/basic/framework code

@tomatoslav Ай бұрын

it makes writing apps easier and it looks cleaner ... I think the same could've been accomplished by writing a custom hook that does the exact same thing, but i guess writing it always seemed like more work than just sticking with the "old way"

@atic64 Ай бұрын

I have a problem when use React Query to manage user token, anyone have a example for me for how to share token in admin pages and redirect to login page when user is unauthorized.

@kazmi401 Ай бұрын

if you are using react-router then you might use a Higher-order-component put your logic of protecting routes and redirecting there and grab all the protected/admin routes/pages inside that HOC.

@MasterChef613 Ай бұрын

My team handled this at the promise level. I made a fetch wrapper that handles all the auth stuff before making the call, and returns an error if the token is missing or is expired. All the logic you're referencing can be handled in a similar way. This is not the problem RQ was designed to solve, but thankfully it's reliance on promises help RQ get out of the way

@iercan1234 Ай бұрын

is "useSWR" the react-query of next.js?

@TkDodo Ай бұрын

It solves a similar problem in slightly different ways and with different tradeoffs. They both work great together with next.js

@wisdomelue Ай бұрын

my favorite react library

@jacobslunga4216 Ай бұрын

Theo, what font do you use in vscode?

@GratuityMedia Ай бұрын

Likely Geist Mono font

@jacobslunga4216 Ай бұрын

@@GratuityMedia Thx1

@henriquematias1986 Ай бұрын

why do you do async function and return await if it could be just a regular function with a regular return? : D

@sandeepmb 21 күн бұрын

that autocomplete is cool. what is it?

@Aleks-fp1kq Ай бұрын

Seems we don't beef react-query with next.js?

@QuantenMagier Ай бұрын

So React is just an incomplete library to implement AJAX and React Query is the missing module to make AJAX work without hick-ups?!

@morosis82 Ай бұрын

No, React is the presentation side of the equation and left the server side up to you. React Query still leaves the server side up to you, but provides the glue to get them to work in harmony easily.

@TkDodo Ай бұрын

@@morosis82that's very well put 👏

@w1pe0ut Ай бұрын

Rick Ross's 'Huh' is a trigger:D

@rayevo8mr209 Ай бұрын

useSWR also really good. Create a service file and export your fetch calls with from it for reusable calls. Syntax a bit cleaner on swr but this looks solid too

@jgkdmdevienjjgg8866 Ай бұрын

7:35 there's also AbortController/AbortSignal for cancelling fetch-es (and axios) which i believe was stolen from C#'s CancellationTokenSource/CancellationToken async tasks concept

@lukemontana9792 Ай бұрын

great video

@vivekthapa5979 Ай бұрын

Nice video . Can you show how to create Progressive Web Application using nextjs? I think this will be useful for lots of developer. Thanks in advance.

@hassanad94 Ай бұрын

What is your opinion on SWR?

@philheathslegalteam Ай бұрын

Its better

@ark_knight Ай бұрын

its simpler and works for most cases.

@hassanad94 Ай бұрын

@@ark_knight Yea, i think the same.

@hassanad94 Ай бұрын

@@philheathslegalteam For side projects i think its better, i dont know it in big scale... Maybe its better there too :)

@starnumber_alt Ай бұрын

When react query on t3?

@TkDodo Ай бұрын

create-t3-app uses tRPC, and tRPC uses react-query as their react layer. So if you're using the t3 stack, you're also using react-query :)

@balaclava351 Ай бұрын

What's with the hate for Redux (genuinely curious)?. I use RTK in production. When I have large arrays of data it makes it easy to update one single object when a websocket signal comes in that the data has changed and the selectors make it easy to select specific data from the store.

@neociber24 Ай бұрын

I think people don't like it because it introduces a lot of code for solving a problem in comparison with React query.

@Pyraptor Ай бұрын

You use mutation example is wrong though, why are you invalidating inside the mutation function?

@bobwilkinsonguitar6142 Ай бұрын

Lmfao at 5:47 "You've probably seen this before" My brother in christ ive written this exact app. My buttons came from MUI though😂

@sudsy3 9 күн бұрын

what browser u usin

@tsonga-absolutest Ай бұрын

we got Theo reacting to web dev history video before gta 6

@happykill123 Ай бұрын

Will put in prod first thing Monday morning.

@trontrontrontron4 Ай бұрын

i love react query, therefore i have to love this video now.

@coachnoobgaming1262 Ай бұрын

Is it the same with tRPC?

@everythingisfine9988 Ай бұрын

No, tRPC will be for the request itself. But I think tRPC with React-Query would be a killer combo

@TkDodo Ай бұрын

@@everythingisfine9988 seems like it isn't known that tRPC is built on top of React Query when used with React :)

@NR1612 Ай бұрын

When I first looked into React, I already hated the data fetching model and switched to react query on my first project. I have never looked back.

@CottidaeSEA Ай бұрын

The one thing I don't like about this library is how you prevent an initial fetch. I can live with that though.

@dominionebenezer4452 7 күн бұрын

bro whats wrong with tanstackQuery Unhandled Runtime Error Error: (0 , _tanstack_react_query__WEBPACK_IMPORTED_MODULE_5__.useQuery) is not a function

@faucar93 Ай бұрын

to be honest I would rather use react with all hooks and stuff like that , react query is nice but still people forget that you could have a singletone class and use it as a state...... plus a bunch of good stuff from js..... anyways. who else wants to have the world in flames ?

@Theepicfrenchguy Ай бұрын

I was using "SWR" and never knew about "react-query". Time to switch 👀.

@lucasmarin4040 Ай бұрын

Don't other frameworks have this problem?

@neociber24 Ай бұрын

This ks not exactly a React problem, any frontend framework needs to manage async data, that's why react query exists for different frameworks

@UmairSadaqat 20 күн бұрын

Tk blog is amazing

@iury664 Ай бұрын

what axios has to do with react-query ?

@camilo5821 Ай бұрын

i lov tanstack libraries

@Pixelume Ай бұрын

I love React Query. Just wish there was an easy way to use it with the new RSC model. Or maybe there is, but I haven't found a straight forward explanation for this yet.

@_y7ya Ай бұрын

Use it only with server actions when you need to mutate data. For anything else drill down data from the server.

@Pixelume Ай бұрын

@@_y7ya Yes, but it would be nice to have the data in React Query's cache so I can just retrieve it from any component as opposed to prop drilling it down to where I need to access it.

@TkDodo Ай бұрын

@@Pixelume The Advanced SSR section in the docs cover streaming from server components where you pre-fetch on the server, pass the promise down and then "pick it up" on the client. There will also be a lesson about this in the course.

@Pixelume Ай бұрын

@@TkDodo Hi Dominik. I'm a big fan of your blog. That's great, thank you so much for this, I'll check it out and I'll definitely check out the course. 😄

@evergreen- Ай бұрын

I tried React Query but quickly found out that it creates more problems that it solves. E.g. a big no-no for me was that it makes components that use it completely untestable due to its global state. I ended up creating a simple custom hook that mimicked basic useQuery API in like 500 loc and it worked just fine

@TkDodo Ай бұрын

Not untestable at all. You can mock the network layer with tools like msw, or you can seed the queryCache before your test with setQueryData. The external data is a dependency to your component, so saying it's untestable means any component that has useContext in it is untestable. I have a blog post on testing and also cover this in the course.

@evergreen- Ай бұрын

@@TkDodo what you just wrote doesn't meet my criteria for "testable" code. 1. Seeding queryClient is a bad solution because your test is now dependent on an external implementation of the queryClient. Since the queryClient has its own state AND state transition logic, whenever the React Query devs make any internal changes, your test may break! 2. Mocking a network layer is a bandaid solution to the real problem: your abstractions are leaking. Basically, since you don't know how state's changing inside your hooks, you have to test the behavior on a higher layer. The real solution's obviously being in control of YOUR hooks' internal state. Since you mentioned React Context, I have the same problems with it and hence never use it.

@paw565 Ай бұрын

It's great, but I bit weird in nexts js with ssr

@AlexanderBorshak Ай бұрын

"Won" - _past_ participle of "win" (from dict). Package loads from NPM (weekly): - Axios - 50M - React - 24M - tanstack/react-query - 3,5M - apollo/client - 3,2M React Query Won?

@user-se1sx9dx3w Ай бұрын

Why are you comparing it with Axios? These two are tools for different needs.

@AlexanderBorshak Ай бұрын

@@user-se1sx9dx3w The video's author included it in the list on the video's splash screen, so i've included it in the list.

@1989amcm Ай бұрын

3rd...Shoutout to the early risers and the late night grinders xoxoxo

@korczas Ай бұрын

I don't like in React Query that it forces short-polling everywhere. I don't think it is a good approach.

@TkDodo Ай бұрын

can you elaborate? It doesn't force anything :)

@dramen555 Ай бұрын

SWR forever!

@tonypolinelli Ай бұрын

SWR syntax is so much nicer. I wish RQ didnt adopt this new object styntax, its so clunky

@Dimonina Ай бұрын

I don't like holywars in comments, but still when I look at some libraries developed for react, I wonder why devs just don't use angular, where all these problems of race conditions have been solved from the very beginning in RxJs. one operator (switchMap) cancels the current request and starts a new one with new parameters if something changed. Of course Angular has its own cons, but for the last 4+ years I've been observing that many new libraries for react are solving problems, that in rxjs world just don't exist.

@CeezGeez Ай бұрын

i for sure know i've written cursed effect fetchers before lol

@miksica Ай бұрын

Yo, rect quiiiry let's go

@guanbo-yang Ай бұрын

Is it a bad idea to use React Query for global non-async state?

@TkDodo Ай бұрын

I always advise against doing that, because React Query isn't made for synchronous state, so it isn't very good at it. It can work if you get all the settings right, but really using something like zustand is a lot better.

@guanbo-yang Ай бұрын

@@TkDodo Thanks for your response! In my case, the need for global state is just so tiny that I'm not sure if I want zustand to handle it. Perhaps a global react context is fine I think?

@serhiipylypenko Ай бұрын

@@guanbo-yangjust use jotai then It’s basically a usestate that you can access anywhere

@ZainRamzan-pt8cm Ай бұрын

LOL I am working with next js 14 which automatically manage all of this stuff

@starnumber_alt Ай бұрын

It does?

@ZainRamzan-pt8cm Ай бұрын

@@starnumber_alt Yes you can use the latest version of next js where you can utilzie to server actions to fetch data and you can use path validation to refresh the data on demand. IT is amazing but you should avoide working with next js where SEO does not matter to your project like dashboard etc but in the case of websites it is worth using

@rianby64 Ай бұрын

This is not a flaw in React. It's the nature of the component-fetching stuff! It's because of the PROMISES!!! Hahahahahaha the promises like a very strange artifact of having concurrency. Wish you a nice day!

@s3rit661 Ай бұрын

14:13 I strongly disagree, in Flutter/Dart it's much easier

@sunny-unik 15 күн бұрын

It's not 'How React Query Won' it is 'How uidotdev Won'

@DMZT_dhruv Ай бұрын

16:19 add the ts now, it's even worse and big

@romy4romy4 Ай бұрын

Fucking magic.

@byetaeyang Ай бұрын

Uh oh.. I'm getting Honeypot flashbacks.

@uidotdev Ай бұрын

Na Theo is a close friend of ours and asked permission to do this.

@byetaeyang Ай бұрын

@@uidotdev Glad to hear! The less drama in the programming world the better.

@seiuwatches Ай бұрын

You said "it's been very hard not to watch this one," but your watch history shows you viewed the entire video. It's a bit weird that you mentioned the same points the author makes just minutes before, and then emphasize that these are the same things you said. I'm not saying you of trying to seem more knowledgeable to the viewers, but it feels a bit misleading.

@busybox4984 Ай бұрын

He probably just clicked on it once for some reason but left the page without watching the video. Sometimes when I open some videos I'll watch later using middle click to open in a new tab, it registers the video as fully watched, even though I did not even open it. Yes it feels misleading in this case but Theo probably didn't lie here.

@AvanaVana Ай бұрын

He did this video on his livestream first. That’s why it was watched. Then he cut the portion about this video and repackaged it as an on-demand video here on YT.

@jackdixon6681 Ай бұрын

as @busybox4984 said, opening a video for a second will make it look like you've watched the whole thing.

@habong17359 Ай бұрын

Who cares man. He sharing knowledge that you wouldn't have learned otherwise. Just chill and move on.

@themprsndev Ай бұрын

YT watch history is NOT accurate whatsoever. Go check yours and see for yourself.

@kakterius Ай бұрын

sudden German in a video XD "Zustand" means state and is pronounced tsoo-shtunt

@adeptiworks Ай бұрын

So it's like Redux Toolkit Query but better?... I'm sold, gonna try it on the next pet project

@Michaeltje01 Ай бұрын

I'm curious, what makes it better than RTK query for you?

@user-iv7ci3hp2u Ай бұрын

@@Michaeltje01 for example out of the box support for infinite queries and easier api to handle without some abstractions - you can basically put your js async function with fetch inside the queryFn and it will just work. I worked with both of them. for me it feels like rtk-query is more like a 'framework' way to do asynchronous state management, while react-query is a 'library' way to do so, also wanted to add that it's just a tool and you should use what suits your project most :)

@Michaeltje01 Ай бұрын

@@user-iv7ci3hp2uI hadn't seen the infinite query functionality mentioned before, that's neat! Thanks

@ZainRamzan-pt8cm Ай бұрын

Redux Toolkit query is best for project where you are already using the redux. But on the other hand if you are not using you should use the RTQ. I preffer Next js because it handle all of this stuff

@relaxwithai Ай бұрын

Less boilerplate, SSR support, optimistic update support, can be used for all async not just AJAX... etc My thinking now is that If the project doesn't require client state that is better implemented with redux toolkit... use react query. Fortunately nowadays even if the project requires client states, I would rather go for something like Zustand and context before considering redux toolkit.