React Query Makes Writing React Code 200% Better

  Рет қаралды 178,360

Web Dev Simplified

Web Dev Simplified

Күн бұрын

I absolutely love React Query, also known as TanStack Query. This library singlehandedly makes working in React so much nicer and I can’t imagine creating a large scale project without it. In this video I will show you what React Query is, what it can do, and demo all of that in an application.
📚 Materials/References:
React Query Crash Course: • Learn React Query In 5...
🌎 Find Me Here:
My Blog: blog.webdevsimplified.com
My Courses: courses.webdevsimplified.com
Patreon: / webdevsimplified
Twitter: / devsimplified
Discord: / discord
GitHub: github.com/WebDevSimplified
CodePen: codepen.io/WebDevSimplified
⏱️ Timestamps:
00:00 - Introduction
00:38 - TanStack Query Overview
01:17 - Project Overview
02:41 - useQuery Basics
09:00 - useMutation Basics
11:54 - Pagination
13:18 - Infinite Scrolling
#ReactQuery #WDS #TanStackQuery

Пікірлер: 212
@EvertJunior
@EvertJunior Жыл бұрын
You're the best teacher on KZfaq, your explanations are always clear and fast, thank you so much. What I don't like about solutions like this is all the pop-ins and excessive loading states. For us developers this is nice and efficient but for users it's distracting and overall bad UX. I like the server rendering approach of Next which is fast like static but interactive where needed. React itself seems to be going in that direction with server components. Exciting times for web developers!
@_benjimouse_
@_benjimouse_ Жыл бұрын
I joined a project about 9 months ago, which was deeply into useEffect/Redux hell. The cognitive load to understand what was going on some screens was exhausting. I proposed we use a query manager, and we settled on TansStack. The code we've been writing for new functions is significantly simpler and more "React-y". It's pretty much essential to be using it or something similar imo.
@_benjimouse_
@_benjimouse_ Жыл бұрын
@@iudexgundyr8635 yeah maybe when the performance issues of using context aren't an issue to you. We have 100s to 1000s of entities in redux currently, doing that in contexts wouldn't be a good idea imo.
@vincentjohnflorio
@vincentjohnflorio Жыл бұрын
@Iudex Gundyr I don't know where it's written that "developers" feel they have to edify their identity by being precious about their solutions. If you like your thing and they like theirs, and you both are getting the results you want out of it, yay. You're making baseless assumptions and being rude instead of carrying on a conversation. If he has information that would go against what you're talking about, that's a chance for you to learn. If you're correct and they're all terrible, this would be a chance to provide helpful information in a polite manner, so they can benefit from your experience and wisdom and the whole industry gets elevated. Being jerky doesn't make you cool or a better developer. It gives us all a bad name. It's not constructive. He lived his experience. He doesn't need you to pretend to be an authoritative source about what happened in his own life.
@tashriser
@tashriser Жыл бұрын
Man, I love this lib! ❤ Great overview, Kyle! Can't get enough of your videos. Man, please develop a small to mid size project showing how to organize the codebase with React Query alongside a state management library like Zustand.
@samidebayroune3478
@samidebayroune3478 10 ай бұрын
I'm dying for big project with Next13, react Query, Recoil, Jest for testing, performance monitoring that would be awesome
@tyrellbb
@tyrellbb Жыл бұрын
I love TanStack Query too. I used it on a recent project. Well done Kyle. This is an extensive yet succinct overview.
@masaeedi1
@masaeedi1 Жыл бұрын
I have just started working with React Query and it has been just an amazing experience. Still learning to get better at it
@alexeleave4551
@alexeleave4551 Жыл бұрын
This is incredible clear and great overview. You filled my gaps with this demonstration, I love you, dude! ❤😄
@MultiSgar
@MultiSgar 8 күн бұрын
Thanks for this tutorial! It's very clear and concise: I am almost done migrating the front end of my project to react query thanks to you.
@leonardofernandesperes
@leonardofernandesperes Жыл бұрын
I was looking at react query yesterday and you come wit hthat video, thank you mate!
@pallu83
@pallu83 Жыл бұрын
This is great! Thanks for what you do, please don't stop researching. Your work is so valuable!
@eduardodrumond8850
@eduardodrumond8850 Жыл бұрын
This is very similar to Apollo Client, which was built for graphql. So nice to see good ideas spreading it through the community. :)
@hariramnandagopal3567
@hariramnandagopal3567 Жыл бұрын
Great video. A small heads up, that getPost does not need to be a Promise. If your use case does not involve asynchronous operation, You can call normal function and still get all the benefits ✌️ You can even use React query as a mini state manager too 😅 so many use cases.
@Orenrs
@Orenrs Жыл бұрын
Finally ;) waited for this video! If you can do a video where you can show the different implementation of "with" react-query and "without" so we can see the true advantage
@thilankakasun3968
@thilankakasun3968 Жыл бұрын
Exactly what I needed 😄 Thank you! ❤
@briar44
@briar44 Жыл бұрын
Looking forward to the full course :)
@mins-dtnofficial3710
@mins-dtnofficial3710 Жыл бұрын
Looking forward to the full course , thanks you.
@damiancardozodelgado2101
@damiancardozodelgado2101 Жыл бұрын
well done mate, well done, it is a great summary of the principal topics, ty really handy
@SuperMoskis
@SuperMoskis 4 ай бұрын
Great vid! Love your content!
@luciusartoriusdante
@luciusartoriusdante Жыл бұрын
So cool, looking forward to that tutorial!
@calvinwilliams729
@calvinwilliams729 Жыл бұрын
Ill be very happy if the crash course is ready
@1Chitus
@1Chitus Жыл бұрын
Great video. A small heads up, that getPost does not need to be a Promise. If your use case does not involve asynchronous operation, You can call normal function and still get all the benefits ️ You can even use React query as a mini state manager too so many use cases.
@ernesttan8090
@ernesttan8090 Жыл бұрын
Thank you Kyle! very useful
@ukaszzbrozek6470
@ukaszzbrozek6470 Жыл бұрын
I love this library. You should do also an episode about tasStack router. It is amazing tool.
@KevinVandyTech
@KevinVandyTech Жыл бұрын
He already did a couple weeks ago
@dou4219
@dou4219 Жыл бұрын
I love this video so much. I have a question about an older video of yours which is "Real time chat app" . I was wondering if the code will still work or do I have to make adjustments to it?
@dog4ik
@dog4ik Жыл бұрын
I recently tried tprc and it is so amazing! Maybe you can make a video about it?
@temanangka3820
@temanangka3820 Жыл бұрын
Thank you Kyle for creating great videos. May I ask a request? Please explain to me what is cache, local storage, and session storage. Thanks.
@marquinhusgoncalves
@marquinhusgoncalves 11 ай бұрын
Amazing video, thanks for it !!!
@kienboy9999
@kienboy9999 Жыл бұрын
Hi, one of your big fan here. Please do videos about advanced product filter and search on ecommerce sites. Thanks.
@yakovavraham4247
@yakovavraham4247 Жыл бұрын
Sounds like using the cache and refetch in the background then update the state when we get a response can lead to a bad UX especially when fetching takes a relatively long time
@Aaronmoreno
@Aaronmoreno Жыл бұрын
timing couldn't be more perfect, was just about to move all calls to this
@selfdirectx4934
@selfdirectx4934 Жыл бұрын
This helps, thanks!
@andrestorres3239
@andrestorres3239 11 ай бұрын
Great bro!!!
@LielAlmog
@LielAlmog Жыл бұрын
Hi, I love your videos, I just noticed that when you create a new post and then you go to the Posts page the post you haves created doesn’t show there, you could to it easily with the setQueryData function. I know this is not a production environment but saying then for the greater good.
@elab4d140
@elab4d140 Жыл бұрын
Thank you, can you do a crash course about tailwind ? just the same way as you did bootstrap please
@DudumanBogdanVlad
@DudumanBogdanVlad Жыл бұрын
Is there a repo to play around? Thanks for sharing with us the knowledge!
@centrumsaiyan7623
@centrumsaiyan7623 Жыл бұрын
Can you make another video on React Query vs RTK Query. They both are used the most in the community and both are backed by influential team in React Eco System.
@codehunt1143
@codehunt1143 Жыл бұрын
Kind of similarities to RTK query, but it is a better alternative. Thanks for the video.
@toebymaguire5108
@toebymaguire5108 Жыл бұрын
kyle you make great content, much love no hate
@chunkwanchan5503
@chunkwanchan5503 Жыл бұрын
looking forward more useCase examples~~
@dericbytes
@dericbytes Жыл бұрын
❤ Great video
@hakuna_matata_hakuna
@hakuna_matata_hakuna Жыл бұрын
Do a genuine comparison between react query and swr , just skimming the swr docs gave me feel like optimistic updates might be better in swr
@evangelism2
@evangelism2 Жыл бұрын
optimistic updates are simple in tanstack query, you can just setquerydata in your mutates onMutate callback, then invalidate the query in onSettled, make sure to hold the previous data in the mutate functions context before doing the setquerydata above, so if something goes wrong, you can roll it back with another setquerydata in the onError callback
@KelvinStKarl
@KelvinStKarl Жыл бұрын
Awesome bro
@kleytonvcc
@kleytonvcc Жыл бұрын
Ty for the video
@AlazTetik
@AlazTetik Жыл бұрын
Great and helpful again! Thank you Kyle!
@Pareshbpatel
@Pareshbpatel Жыл бұрын
Excellent overview of TanStack React-Query. Thanks, Kyle! {2023-01-27}, {2023-07-11}, {2023-08-01}
@Tajdev
@Tajdev Жыл бұрын
When we com back to posts list, it should show message that new posts are being refreshed or checked.
@dshyryayev
@dshyryayev Жыл бұрын
You are one of the best of the best or may be the best
@TannerBarcelos
@TannerBarcelos Жыл бұрын
TQ is amazing. SWR from the Next team is also really impressive. I’m so glad these libraries exist because it allows us to focus less on the data fetching and all that logic / “state” and truly focus on what UI is all about - the UI! Tanner did an amazing job, guess it’s a Tanner thing 😁
@oussamabouallati
@oussamabouallati Жыл бұрын
Thank you
@jixster1566
@jixster1566 Жыл бұрын
What is this timing. I just learned about react query yesterday 😂 Edit: please do a react admin video
@taquanminhlong
@taquanminhlong Жыл бұрын
Can you also make a detailed video tutorial on react query?
@hwj8640
@hwj8640 Жыл бұрын
I remember the team of Next.js made the same functionality called useSWR.
@balduin_b4334
@balduin_b4334 Жыл бұрын
thanks for the video, sadly I just implemented a lot of stuff using a useEffect for client side API calls...
@royz_1
@royz_1 Жыл бұрын
react-query might not make much sense if you are working on small scale projects. But if you are working on an even slightly large code base, it makes your life way easier (if you want to have good UX).
@ylcsl4378
@ylcsl4378 Жыл бұрын
On small size projects, what works good is to keep data in a static field of a class outside of the component, and get it by a function which refreshes it when needed
@royz_1
@royz_1 Жыл бұрын
@@ylcsl4378 I use this method a lot when building backend with express but not so much on the frontend. But I suppose it would work the same way
@ylcsl4378
@ylcsl4378 Жыл бұрын
@@royz_1 the advantage on frontend is that each time page opens again, the data is refreshes
@ContraHacker1337
@ContraHacker1337 Жыл бұрын
Yo, can we have a NextJS integration guide with TanStack Query? Like how to use it with getServerSideProps and the new 'app' directory stuff.
@dshyryayev
@dshyryayev Жыл бұрын
Thanks!
@WebDevSimplified
@WebDevSimplified Жыл бұрын
Thank you for the support!
@vangaris
@vangaris Жыл бұрын
Just a question : if you use different redux stores, for example I need a component like table to be shown 4 times at the same time, is better to use react query or redux tool kit? Thanks :)
@tusharyadav5874
@tusharyadav5874 Жыл бұрын
same doubt
@dellavita3463
@dellavita3463 Жыл бұрын
I think yes because if it is server state you can use same key in any components it will automatically deduplicate network request into one and auto revalidate cache.
@vangaris
@vangaris Жыл бұрын
@@dellavita3463thanks for your reply, the problem is that this table has its own data(store) and they could be changed during the user session, for example if there is a pagination and the user changes the paginations of the first table, the other 3 tables should be at the first page.
@StefanoV827
@StefanoV827 Жыл бұрын
Since i use RTK as state management, i use RTK Query which is included in the package so i don't need to include other libraries. Is there any relevant difference between them?
@syed.simanta820
@syed.simanta820 9 ай бұрын
What about infinite scrolling, caching, and RTK pulls all data when u don't even need everything to pull
@StefanoV827
@StefanoV827 9 ай бұрын
@@syed.simanta820 what do you mean? For infinite scroll you manage data on the backend like a normal pagination 😅 pag1 pag2 etc... you just call the next page from the API when you reach the bottom scroll height. Caching is the main feature of RTK query, so I don't get the question. And RTK query don't pull everything when you don't need, you can just use Lazy query to trigger data when you want.
@rajivchaulagain4749
@rajivchaulagain4749 Жыл бұрын
Can you make video about using custom hook that manages react query
@cryptoknight9440
@cryptoknight9440 Жыл бұрын
Thanks for this video 🙂 Btw, Can you tell me what the mean of ! after id in getPost(id!) and parseInt(id!) 06:53
@webbeg4672
@webbeg4672 Жыл бұрын
If it is typescript then it is to tell that this value is not falsy so treat this value without checking null or undefined or any falsy value.
@cryptoknight9440
@cryptoknight9440 Жыл бұрын
@@webbeg4672 Thanks 👍🏻 Yes, this is typescript
@mohammedsameermohiuddin1121
@mohammedsameermohiuddin1121 Жыл бұрын
I was looking for this answer Thanks WebBeg
@7kitt772
@7kitt772 Жыл бұрын
Hi Kyle! Could you please suggest how to have a deal with sorting (asc/desc) and react query? I try to use queryClient.setQueryData('existingData', newSortedData) but it is reseted while I re-focus tabs in browser. Seems like I can't do without usual useState? Thank you
@KevinVandyTech
@KevinVandyTech Жыл бұрын
Is TanStack Table next?
@mostinho7
@mostinho7 Жыл бұрын
How come this works without react’s useState hook? It seems to be using a normal JavaScript object as the state for the react component? Could anyone please clarify this?
@zhongtom2625
@zhongtom2625 Жыл бұрын
i found that the stale data then auto update is a bit annoying as the contents are changing. is there a way to show a placeholding 'loading...' at the new post before it's ready?
@abdilami9585
@abdilami9585 Жыл бұрын
before react query i was use redux toolkit rtk query but react query is simple and powerful❤❤
@triteraerlangga7917
@triteraerlangga7917 Жыл бұрын
please make a video about caching, because I always heard a joke that caching invalidation is hard.
@rickharold7884
@rickharold7884 Жыл бұрын
yea that's cool
@anubhavgoyal2458
@anubhavgoyal2458 Жыл бұрын
make a course on react-query
@sumtingwongwe2low
@sumtingwongwe2low Жыл бұрын
Would you use react query over redux toolkit query? Which is preferable
@syed.simanta820
@syed.simanta820 9 ай бұрын
Community moving to react query now
@jackshephard7920
@jackshephard7920 Жыл бұрын
The loading indicator flashes when the API request response quickly, is there a way to delay the appearance of loading indicator, eg, after 2s?
@danielbolajoko442
@danielbolajoko442 Жыл бұрын
It's quite similar to GraphQL, seems cool
@crissatrapi3933
@crissatrapi3933 5 ай бұрын
Sorry if my question is "beginner" :( but I don't understand the difference between RTK and TanStack. So we don't need useEffect anymore? Maybe it is useful for big projects ? At the beginning I thought that it was an alternative for axios but no, or an alternative to redux toolkit. But it doesn't manage global state right? I also watch the 50 minute video but I found it too abstract for me.
@dmitryutkin9864
@dmitryutkin9864 Жыл бұрын
What does this exclamation+dot (!.) do?
@Joseph-do9ue
@Joseph-do9ue Жыл бұрын
I do switch for React Query instead using Redux anymore
@havocthehobbit
@havocthehobbit 18 күн бұрын
so just it's for promise's while wait and error state handling. I would have named it useWaitState or WWS (whileWaitState) , surprised there arnt primitives for this in every framework/library or that promises doesnt have a standard onWaiting member event as part of the js spec, it sounds like a pretty obvious convention to have with a language that uses callbacks and async in alot of it base.
@ejoojoo
@ejoojoo Жыл бұрын
I noticed that on the infinite list the load more repeats the first 10 posts.
@WebDevSimplified
@WebDevSimplified Жыл бұрын
This was just a bug in my code as I used 0 as my start page instead of 1
@polioann
@polioann Жыл бұрын
which state manager will be good together with react query?
@charuwaka1
@charuwaka1 11 ай бұрын
When the component is unmounted I want to cancel any ongoing API calls , how to do that , generally, we can pass cancel token with axios, how can we achieve something with usequery?
@gsrcreations108
@gsrcreations108 Жыл бұрын
Kyle make shopping cart tutorial with redux toolkit with dummy data in react 18. I am facing some issues with it.
@vramosjd
@vramosjd 11 ай бұрын
In the Post.tsx, the queryKey should be "post" instead of "posts", right?
@Archist111
@Archist111 Жыл бұрын
hey great subject. But when you publish a video upon a codebase, don't you thing you should provide a git repo upon which the video rely on ? So that viewer can replay what you done on the video, but maybe its part of your business model, dont kno
@minhct2511
@minhct2511 Жыл бұрын
hi Kyle can you do a video on how to login using social media like Google or Facebook .... I really need that :(
@MrEnsiferum77
@MrEnsiferum77 Жыл бұрын
I'm not sure if is better, but more interesting, all this frameworks are bad in scaling projects, so using react-query not solving that much....
@michaskiba3710
@michaskiba3710 Жыл бұрын
Agree
@MrEnsiferum77
@MrEnsiferum77 Жыл бұрын
@@michaskiba3710 I'm using it everyday, I've used next.js swr, and both are ok, but meh, u can't do something more and your project be that good and flexible. I like next.js 13 that it have all that swr/react-query jazz baked in on top of fetch api, so maybe that would be better approach.
@CaliburPANDAs
@CaliburPANDAs Жыл бұрын
What about SWR?
@99baddar
@99baddar Жыл бұрын
Can you please put the code in git repo and share its link
@jasonwelsh417
@jasonwelsh417 Жыл бұрын
I work on a very large scale application and we have no issues with useEffect. I do not see the need to introduce a new dependency, personally.
@DenProstoDen
@DenProstoDen Жыл бұрын
but what did you use instead?
@jasonwelsh417
@jasonwelsh417 Жыл бұрын
@@DenProstoDen Sorry I don't understand the question. What do you mean by "use instead"? Instead of what?
@DenProstoDen
@DenProstoDen Жыл бұрын
@@jasonwelsh417 you didn't use useEffect, right?
@jasonwelsh417
@jasonwelsh417 Жыл бұрын
@DenProstoDen No I was saying I don't see the issue with using useEffect for data fetching
@sunny7268
@sunny7268 Жыл бұрын
Any reason switch from Apollo Client to React Query if my server is only GQL?
@aseemanand1
@aseemanand1 Жыл бұрын
Not required as apollo client also does the essential caching which react query is providing
@dt7472
@dt7472 Жыл бұрын
@@aseemanand1 what is beter ?
@anthonylebel1089
@anthonylebel1089 Жыл бұрын
New to React, but couldn't you just pass the post clicked on as props to child component instead of another API call to get data for that specific post? Assuming you already had all data on parent component
@lakajnck
@lakajnck Жыл бұрын
What about the performance?, Which one is better??
@rishukumar7586
@rishukumar7586 4 ай бұрын
what you do with ! mark in parseInt method with id?
@jingli9232
@jingli9232 Жыл бұрын
how about swr, which one do you think works better?
@ertyuiopos3942
@ertyuiopos3942 Жыл бұрын
I would like to watch a video about nx monorepo
@mahmoudkhodor2295
@mahmoudkhodor2295 7 ай бұрын
how can I access the saved in the query after the post is success, I mean after steQueryData the data saved here how can I access in in other component
@ashutoshgupta2758
@ashutoshgupta2758 9 ай бұрын
How to call use query on button click with some parameters ??
@mukleshossen751
@mukleshossen751 Жыл бұрын
I am use rtk-query which one is better?
@senne4179
@senne4179 Жыл бұрын
Can you make a git repo and give us the link of this code (components etc)?
@eiatot6455
@eiatot6455 Жыл бұрын
Hi forgive my ignorance but in Post.tsx ( 08:22 ) what is the meaning of : + The ! in : parseInt(id!) , getPost(id!) + The !. in getUser(post!.userId) I searched MDN for chain operators and etc but didn't find the answer. Thanks Gr8 vid.
@DarkStoorM_
@DarkStoorM_ Жыл бұрын
Appending ! to an optional value is a way of telling TypeScript: "Hey, I know this value is not undefined or null, don't treat it as optional". You usually add it when you are 100% sure something exists. It's called "non-null assertion operator". useParams() method returns "string | undefined" when destructured, so he basically skipped the null/undefined check.
@karis7539
@karis7539 Жыл бұрын
is it useful in ssr?
@bowbowzai3757
@bowbowzai3757 Жыл бұрын
Is it similar to rtk query?
@xxXAsuraXxx
@xxXAsuraXxx 7 ай бұрын
doesnt useQuery also uses useEffect behind the scene?
@catalina3873
@catalina3873 Жыл бұрын
can i get the codes?
What Is TanStack Router And Why I Love It
9:38
Web Dev Simplified
Рет қаралды 99 М.
AWS SQS vs SNS vs EventBridge - When to Use What?
22:37
Be A Better Dev
Рет қаралды 166 М.
Was ist im Eis versteckt? 🧊 Coole Winter-Gadgets von Amazon
00:37
SMOL German
Рет қаралды 11 МЛН
The day of the sea 🌊 🤣❤️ #demariki
00:22
Demariki
Рет қаралды 91 МЛН
Learn React Hooks: useReducer - Simply Explained!
13:48
Cosden Solutions
Рет қаралды 47 М.
React Query - Complete Tutorial
18:57
Cosden Solutions
Рет қаралды 102 М.
Speed Up Your React Apps With Code Splitting
16:50
Web Dev Simplified
Рет қаралды 370 М.
10 Tailwind Classes I Wish I Knew Earlier
13:31
Web Dev Simplified
Рет қаралды 166 М.
Liskov: The Liskov Substitution Principle
4:23
Turing Awardee Clips
Рет қаралды 19 М.
Learn Debounce And Throttle In 16 Minutes
16:28
Web Dev Simplified
Рет қаралды 179 М.
Learn React Query In 50 Minutes
51:09
Web Dev Simplified
Рет қаралды 273 М.
How to Create a Responsive Lightbox Gallery | CSS Grid Gallery
9:32
The Story of React Query
8:55
uidotdev
Рет қаралды 90 М.
Was ist im Eis versteckt? 🧊 Coole Winter-Gadgets von Amazon
00:37
SMOL German
Рет қаралды 11 МЛН