How React Query Won
Vložit
- čas přidán 4. 06. 2024
- 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 🙏 - Věda a technologie
We love you too! Thank you for the kind words. ❤
I love Both of you !! 🩷
"It's been very hard for me to not watch this one"
He said with the red watch progress bar at 100% 😂
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.
I prefer RTK query
@@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
Wow, uidotdev has some great design intuition and information presentation. Definitely going to give them a sub.
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
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
Timestamp ?
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
Or just use redux with rtk query and have it flawlessly integrated instead of connecting zustand with react query?
great explanation for react query. very concise and to the point at the end there. great stuff!
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.
Signal-based reactivity is much easier to think around, I hope you consider trying out Svelte 5 when it comes out
have you tried htmx?
those tkdodo blogs are ESSENTIAL. read them if you wanna learn react query. amazing information there.
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.
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.
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! :)
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.
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.
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.
New here theo. What vscode theme do you use?
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.
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
Starting with redux and happy enough with RTK Query.
thanks redux team 😂
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?
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.
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!
Which os are you using? And is it a github copilot or something else?
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"
that autocomplete is cool. what is it?
my favorite react library
how does react query match against swr?
Rick Ross's 'Huh' is a trigger:D
33:34 "If you think you can do something better", well in that case, just go make a new react-query library
great video
Will put in prod first thing Monday morning.
Tk blog is amazing
why theo didn't mention at all ..that it is framework agnostic ?
we got Theo reacting to web dev history video before gta 6
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.
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
@@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.
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
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
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
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.
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 ?
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😂
Seems we don't beef react-query with next.js?
i love react query, therefore i have to love this video now.
Next JS 14 user here, do we really need it still though, having RSC's and what not?
I have a blogpost about this titled: You Might Not Need React Query. Give it a read :)
Yessnnt’
@@TkDodo Thanks!
It's great, but I bit weird in nexts js with ssr
Theo, what font do you use in vscode?
Likely Geist Mono font
@@GratuityMedia Thx1
is "useSWR" the react-query of next.js?
It solves a similar problem in slightly different ways and with different tradeoffs. They both work great together with next.js
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
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.
I was using "SWR" and never knew about "react-query".
Time to switch 👀.
i for sure know i've written cursed effect fetchers before lol
i lov tanstack libraries
The one thing I don't like about this library is how you prevent an initial fetch. I can live with that though.
why do you do async function and return await if it could be just a regular function with a regular return? : D
What is your opinion on SWR?
Its better
its simpler and works for most cases.
@@ark_knight Yea, i think the same.
@@philheathslegalteam For side projects i think its better, i dont know it in big scale... Maybe its better there too :)
When react query on t3?
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 :)
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.
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.
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
Yo, rect quiiiry let's go
3rd...Shoutout to the early risers and the late night grinders xoxoxo
Fucking magic.
So React is just an incomplete library to implement AJAX and React Query is the missing module to make AJAX work without hick-ups?!
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.
@@morosis82that's very well put 👏
You use mutation example is wrong though, why are you invalidating inside the mutation function?
SWR forever!
SWR syntax is so much nicer. I wish RQ didnt adopt this new object styntax, its so clunky
Is it the same with tRPC?
No, tRPC will be for the request itself. But I think tRPC with React-Query would be a killer combo
@@everythingisfine9988 seems like it isn't known that tRPC is built on top of React Query when used with React :)
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.
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
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.
@@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.
Don't other frameworks have this problem?
long live React query!
It's not 'How React Query Won' it is 'How uidotdev Won'
This ks not exactly a React problem, any frontend framework needs to manage async data, that's why react query exists for different frameworks
LOL I am working with next js 14 which automatically manage all of this stuff
It does?
@@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
"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?
Why are you comparing it with Axios? These two are tools for different needs.
@@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.
16:19 add the ts now, it's even worse and big
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.
I think people don't like it because it introduces a lot of code for solving a problem in comparison with React query.
what axios has to do with react-query ?
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!
I love swr
Uh oh.. I'm getting Honeypot flashbacks.
Na Theo is a close friend of ours and asked permission to do this.
@@uidotdev Glad to hear! The less drama in the programming world the better.
14:13 I strongly disagree, in Flutter/Dart it's much easier
I don't like in React Query that it forces short-polling everywhere. I don't think it is a good approach.
can you elaborate? It doesn't force anything :)
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.
Use it only with server actions when you need to mutate data. For anything else drill down data from the server.
@@_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.
@@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.
@@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. 😄
React Query is not going anywhere.. Ahmm.. NextJS server side fetching :D, unless you wanna client side fetch ..
sudden German in a video XD "Zustand" means state and is pronounced tsoo-shtunt
Too expensive, especially for anyone who doesn't earn in dollars.
Is it a bad idea to use React Query for global non-async state?
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.
@@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?
@@guanbo-yangjust use jotai then
It’s basically a usestate that you can access anywhere
The weakeast part of React Query is the documentation.
So it's like Redux Toolkit Query but better?... I'm sold, gonna try it on the next pet project
I'm curious, what makes it better than RTK query for you?
@@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 :)
@@user-iv7ci3hp2uI hadn't seen the infinite query functionality mentioned before, that's neat! Thanks
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
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.
I am gonna unsubscribe if u say anything bad about react again
Their tutorial pricing is nuts
Almost every day I see people/Theo discover new solutions to problems Relay solved years ago.
Redux Toolkit Query ❤
Can't write tutorial code in work. obvious people
Don't sell things bro!!!
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.
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.
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.
as @busybox4984 said, opening a video for a second will make it look like you've watched the whole thing.
Who cares man. He sharing knowledge that you wouldn't have learned otherwise. Just chill and move on.
YT watch history is NOT accurate whatsoever. Go check yours and see for yourself.
First
how bad is react omg
Fetch clears. Didn't watch btw
Clickbait title?
God I hate React.
2.38 - can we please stop using crap code examples as reasons why we need to install another lib in our already bloated js apps?