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.
@@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.
@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.
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.
You're the best teacher on RUclips, 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!
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
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.
thanks bro i was stuck in intergrating react query , we are always biggeners to new things and it just fixes all of my problems i have project that only enlisting them took 2 hours
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
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
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.
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).
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
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.
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.
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.
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 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.
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.
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.
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?
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 :)
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.
@@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.
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?
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?
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
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
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
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.
@@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.
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 😁
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?
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
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.
@@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.
@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.
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.
I'm dying for big project with Next13, react Query, Recoil, Jest for testing, performance monitoring that would be awesome
You're the best teacher on RUclips, 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!
I have just started working with React Query and it has been just an amazing experience. Still learning to get better at it
This is very similar to Apollo Client, which was built for graphql. So nice to see good ideas spreading it through the community. :)
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.
I love TanStack Query too. I used it on a recent project. Well done Kyle. This is an extensive yet succinct overview.
I was looking at react query yesterday and you come wit hthat video, thank you mate!
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
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.
This is incredible clear and great overview. You filled my gaps with this demonstration, I love you, dude! ❤😄
Excellent overview of TanStack React-Query. Thanks, Kyle!
{2023-01-27}, {2023-07-11}, {2023-08-01}
timing couldn't be more perfect, was just about to move all calls to this
This is great! Thanks for what you do, please don't stop researching. Your work is so valuable!
Ill be very happy if the crash course is ready
well done mate, well done, it is a great summary of the principal topics, ty really handy
thanks bro i was stuck in intergrating react query , we are always biggeners to new things and it just fixes all of my problems i have project that only enlisting them took 2 hours
Exactly what I needed 😄 Thank you! ❤
Looking forward to the full course , thanks you.
Looking forward to the full course :)
I love this library. You should do also an episode about tasStack router. It is amazing tool.
He already did a couple weeks ago
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
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
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
Great and helpful again! Thank you Kyle!
Hi, one of your big fan here. Please do videos about advanced product filter and search on ecommerce sites. Thanks.
So cool, looking forward to that tutorial!
Great vid! Love your content!
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.
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).
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
@@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
@@royz_1 the advantage on frontend is that each time page opens again, the data is refreshes
I recently tried tprc and it is so amazing! Maybe you can make a video about it?
When we com back to posts list, it should show message that new posts are being refreshed or checked.
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.
kyle you make great content, much love no hate
Thanks for this video 🙂
Btw,
Can you tell me what the mean of ! after id in getPost(id!) and parseInt(id!) 06:53
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.
@@webbeg4672 Thanks 👍🏻
Yes, this is typescript
I was looking for this answer Thanks WebBeg
Thanks!
Thank you for the support!
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.
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.
Amazing video, thanks for it !!!
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?
What about infinite scrolling, caching, and RTK pulls all data when u don't even need everything to pull
@@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.
Thank you Kyle! very useful
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.
You are one of the best of the best or may be the best
What does this exclamation+dot (!.) do?
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.
looking forward more useCase examples~~
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?
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 :)
same doubt
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.
@@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.
Thank you, can you do a crash course about tailwind ? just the same way as you did bootstrap please
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.
What is this timing. I just learned about react query yesterday 😂
Edit: please do a react admin video
Kind of similarities to RTK query, but it is a better alternative. Thanks for the video.
Is there a repo to play around? Thanks for sharing with us the knowledge!
Awesome review
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?
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?
Is TanStack Table next?
before react query i was use redux toolkit rtk query but react query is simple and powerful❤❤
Great bro!!!
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
Any reason switch from Apollo Client to React Query if my server is only GQL?
Not required as apollo client also does the essential caching which react query is providing
@@aseemanand1 what is beter ?
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
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
What about SWR?
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.
In the Post.tsx, the queryKey should be "post" instead of "posts", right?
This helps, thanks!
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.
but what did you use instead?
@@DenProstoDen Sorry I don't understand the question. What do you mean by "use instead"? Instead of what?
@@jasonwelsh417 you didn't use useEffect, right?
@DenProstoDen No I was saying I don't see the issue with using useEffect for data fetching
thanks for the video, sadly I just implemented a lot of stuff using a useEffect for client side API calls...
The loading indicator flashes when the API request response quickly, is there a way to delay the appearance of loading indicator, eg, after 2s?
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....
Agree
@@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.
❤ Great video
Can you please put the code in git repo and share its link
Can you also make a detailed video tutorial on react query?
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 😁
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?
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
How to call use query on button click with some parameters ??
Can you make video about using custom hook that manages react query
I remember the team of Next.js made the same functionality called useSWR.
which state manager will be good together with react query?
Would you use react query over redux toolkit query? Which is preferable
Community moving to react query now
what you do with ! mark in parseInt method with id?
Yo, can we have a NextJS integration guide with TanStack Query? Like how to use it with getServerSideProps and the new 'app' directory stuff.
Kyle make shopping cart tutorial with redux toolkit with dummy data in react 18. I am facing some issues with it.
Awesome bro
I noticed that on the infinite list the load more repeats the first 10 posts.
This was just a bug in my code as I used 0 as my start page instead of 1
What about the performance?, Which one is better??
how about swr, which one do you think works better?
I am use rtk-query which one is better?
please make a video about caching, because I always heard a joke that caching invalidation is hard.
"!" what is the use of this sign after a value?
Can you make a git repo and give us the link of this code (components etc)?
hi Kyle can you do a video on how to login using social media like Google or Facebook .... I really need that :(
I do switch for React Query instead using Redux anymore
Is it similar to rtk query?
Am I the only one who checked the playback speed. 😅
can i get the codes？
Which is better: Redux Toolkit Query or React Query?
.
If you are using redux than rtk otherwise rq
is it useful in ssr?
Ty for the video
Still no React Query Crash Course?