How React Query Won

[@uidotdev]

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

[@markdesign1354]

I love Both of you !! 🩷

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

[@jakeoverflow]

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

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

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

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

[@zayne-sarutobi]

​@@odra873Hell na fam... It's 2024, say no to reducer overheads

[@aeronwolfe7072]

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

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

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

[@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! :)

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

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

[@IkeVictor]

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

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

[@zelli840]

Interesting phenomenon going on where when i have problem I can't figure out. I get recommended a Theo video with the solution to that exact problem.

[@pointer333]

Great video. Value perceived. Wisdom gained. Thank you.

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

[@rikschaaf]

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

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

[@wisdomelue]

my favorite react library

[@OnkarMahamuni13]

Life as a react developer was hell before react query, I must say!!

[@trontrontrontron4]

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

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

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

[@peteremad5228]

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

[@happykill123]

Will put in prod first thing Monday morning.

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

[@moggedau]

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

[@Theepicfrenchguy]

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

[@rns10]

Quick ques- can we directly dive in using react query. Or should we first learn to build it in react to understand the fundamentals?

[@zaccanoy]

i think the answer to this depends on what your goals are. generally, i think it’s best to understand why any library is useful before you use it. if your goal is to learn, i feel like that’s the best course of action. if your goal is to make an app as quickly as possible, you’re probably going to end up using tanstack query anyway, so i’d recommend just doing that. but building your own useQuery and understanding why QueryProvider is useful makes everything much clearer in the long term

[@tsonga-absolutest]

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

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

[@StephanHoyer]

I just learned how much more shitty than thought react is. Holy moly. Prop diffing to prevent diffing vdom 🤯 But react-query is very nice. Nice intro.

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

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

[@UmairSadaqat]

Tk blog is amazing

[@CottidaeSEA]

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

[@camilo5821]

i lov tanstack libraries

[@mubashir3]

Almost every day I see people/Theo discover new solutions to problems Relay solved years ago.

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

[@zayne-sarutobi]

The boilerplate is hardly justified when you have simpler to reason about solutions available

[@1989amcm]

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

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

[@zayne-sarutobi]

I guess the added complexity angular brings for what it solves, isn't worth it to most devs

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

[@Bchvji647]

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

[@Pyraptor]

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

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

[@favanzzo]

New here theo. What vscode theme do you use?

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

[@ronaldos3738]

I would like to know what tool he uses for creating the animations

[@akifahmed9610]

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

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

[@henriquematias1986]

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

[@sandeepmb]

that autocomplete is cool. what is it?

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

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

[@CeezGeez]

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

[@w1pe0ut]

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

[@sudsy3]

what browser u usin

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

[@zayne-sarutobi]

​@@evergreen-I guess you'd probably make it a mission remake most popular react libs in-house

[@evergreen-]

@@zayne-sarutobi , you should be constantly remaking simple things to fit just your needs. If later you come across a problem that your solution cannot solve, at least you will have a clear reason of why you need a complex external dependency. Compromising on certain things (such as ease of testability) from the get-go to just use a library will only lead to bigger and more painful compromises down the road.

[@BRP-Moto-Tips]

long live React query!

[@vlad6703]

the fact that he didnt mention 'staleTime' first tells me he doesn't even use react query. maybe his team does but he's not a hands-on user

[@dramen555]

SWR forever!

[@tonypolinelli]

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

[@zayne-sarutobi]

​@@tonypolinelliActually, it unlocks a superb way to abstract queries at the options level! Check out tkdodo's blog post on that if you will

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

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

[@portusdelphini]

Fucking magic.

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

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

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

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

[@Aleks-fp1kq]

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

[@silentsleeper]

how does react query match against swr?

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

[@DiogoTeixeira-h8r]

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

[@AlexanderBorshak]

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

[@jacobslunga4216]

Theo, what font do you use in vscode?

[@GratuityMedia]

Likely Geist Mono font

[@jacobslunga4216]

@@GratuityMedia Thx1

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

[@Fanaro]

Too expensive, especially for anyone who doesn't earn in dollars.

[@s3rit661]

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

[@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 :)

[@nikilk]

React Query is not going anywhere.. Ahmm.. NextJS server side fetching :D, unless you wanna client side fetch ..

[@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 :)

[@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 :)

[@DMZT_dhruv]

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

[@lucasmarin4040]

Don't other frameworks have this problem?

[@iury664]

what axios has to do with react-query ?

[@sunny-unik]

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

[@miksica]

Yo, rect quiiiry let's go

[@ahmedjaber8595]

Redux Toolkit Query ❤

[@kakterius]

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

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

[@zayne-sarutobi]

​@@MasterChef613That's the way🍵

[@henriquematias1986]

The weakeast part of React Query is the documentation.

[@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 :)

[@VigneshwarDev]

Don't sell things bro!!!

[@aberbaCodes]

Doesn't look much different from SWR

[@stacked-dev]

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

[@starnumber_alt]

It does?

[@stacked-dev]

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

[@zayne-sarutobi]

​@@starnumber_altIt really doesn't tbh

[@zayne-sarutobi]

It really doesn't tbh

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

[@sad_man_no_talent]

I am gonna unsubscribe if u say anything bad about react again

[@abdelhakimkhabir]

Can't write tutorial code in work. obvious people

[@nickwoodward819]

Their tutorial pricing is nuts