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_
Жыл бұрын
@@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
Жыл бұрын
@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
Жыл бұрын
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
Жыл бұрын
I'm dying for big project with Next13, react Query, Recoil, Jest for testing, performance monitoring that would be awesome
@Tom_500
Жыл бұрын
Am I the only one who checked the playback speed. 😅
@eduardodrumond8850
Жыл бұрын
This is very similar to Apollo Client, which was built for graphql. So nice to see good ideas spreading it through the community. :)
@EvertJunior
Жыл бұрын
You're the best teacher on KZitem, 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!
@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
Жыл бұрын
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
@masaeedi1
Жыл бұрын
I have just started working with React Query and it has been just an amazing experience. Still learning to get better at it
@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.
@dmitryutkin9864
Жыл бұрын
What does this exclamation+dot (!.) do?
@developer_hadi
Жыл бұрын
You could use 2x rather than 200% for the video title and use less characters in order to improve the performance of the youtube database, naaaah I'm kidding 💀
@99baddar
Жыл бұрын
Can you please put the code in git repo and share its link
@jixster1566
Жыл бұрын
What is this timing. I just learned about react query yesterday 😂 Edit: please do a react admin video
@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
Жыл бұрын
Agree
@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.
@konung5
Жыл бұрын
"... React Code 200% Better" - that's still 500% worse than Svelte 😈
@tannerlinsley
Жыл бұрын
Good thing we have svelte-query! 😉
@sunny7268
Жыл бұрын
Any reason switch from Apollo Client to React Query if my server is only GQL?
@aseemanand1
Жыл бұрын
Not required as apollo client also does the essential caching which react query is providing
@dt7472
Жыл бұрын
@@aseemanand1 what is beter ?
@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
Жыл бұрын
What about infinite scrolling, caching, and RTK pulls all data when u don't even need everything to pull
@StefanoV827
Жыл бұрын
@@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.
@dog4ik
Жыл бұрын
I recently tried tprc and it is so amazing! Maybe you can make a video about it?
@crissatrapi3933
8 ай бұрын
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.
@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.
@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
@havocthehobbit
3 ай бұрын
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.
@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?
@charuwaka1
Жыл бұрын
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?
@zeus433
Жыл бұрын
Using the word "post" with "get" is so confusing. You should have gone with "blog" or "article".
@CaliburPANDAs
Жыл бұрын
What about SWR?
@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
@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
Жыл бұрын
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
Жыл бұрын
@@webbeg4672 Thanks 👍🏻 Yes, this is typescript
@mohammedsameermohiuddin1121
Жыл бұрын
I was looking for this answer Thanks WebBeg
@catalina3873
Жыл бұрын
can i get the codes?
@mengwaugochukwu7980
Жыл бұрын
Hey, Can we have Your source code to ths, will appreciate alot
@AlazTetik
Жыл бұрын
Great and helpful again! Thank you Kyle!
@abhijeetkaushal1343
11 ай бұрын
Only youtuber that I set playback speed to 0.75
@elab4d140
Жыл бұрын
Thank you, can you do a crash course about tailwind ? just the same way as you did bootstrap please
@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
Жыл бұрын
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
Жыл бұрын
@@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
Жыл бұрын
@@royz_1 the advantage on frontend is that each time page opens again, the data is refreshes
@ashutoshgupta2758
Жыл бұрын
How to call use query on button click with some parameters ??
@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
Жыл бұрын
same doubt
@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
Жыл бұрын
@@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.
@mahmoudkhodor2295
10 ай бұрын
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
@CottidaeSEA
Жыл бұрын
I'd rather see people learn how to actually make libraries like these.
@sudiptabose7128
10 ай бұрын
You are too fast bro. This video is only for those who already have some idea about react query.
@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
@omnibus.foundation
Жыл бұрын
Still no React Query Crash Course?
@Pareshbpatel
Жыл бұрын
Excellent overview of TanStack React-Query. Thanks, Kyle! {2023-01-27}, {2023-07-11}, {2023-08-01}
@rishukumar7586
7 ай бұрын
what you do with ! mark in parseInt method with id?
@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
@KevinVandyTech
Жыл бұрын
Is TanStack Table next?
@ertyuiopos3942
Жыл бұрын
I would like to watch a video about nx monorepo
@thilankakasun3968
Жыл бұрын
Exactly what I needed 😄 Thank you! ❤
@deadvalentine1000
Жыл бұрын
can someone make a tutorial in nextjs13?
@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
@vramosjd
Жыл бұрын
In the Post.tsx, the queryKey should be "post" instead of "posts", right?
@erbhargavvyas
Жыл бұрын
Hi, Kyle, your content and style is grate. However, lately, I noticed that you are rushing at the end of the video. Your speed of speech increases by 10-15 %. Can you please take care of that in the next video please?
@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.
@MazoCreed
Жыл бұрын
Man you're good explainer but you talk and switch between the screens so fast that some of us can barely understand what are you trying to say :D
@gsrcreations108
Жыл бұрын
Kyle make shopping cart tutorial with redux toolkit with dummy data in react 18. I am facing some issues with it.
@balduin_b4334
Жыл бұрын
thanks for the video, sadly I just implemented a lot of stuff using a useEffect for client side API calls...
@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?
@sumtingwongwe2low
Жыл бұрын
Would you use react query over redux toolkit query? Which is preferable
@syed.simanta820
Жыл бұрын
Community moving to react query now
@chaitanyaToorubilli
11 ай бұрын
please provide the source code reference
@MultiSgar
3 ай бұрын
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.
@jacoblockwood4034
Жыл бұрын
This guy just found Theo Brown's youtube channel like a month ago
@kienboy9999
Жыл бұрын
Hi, one of your big fan here. Please do videos about advanced product filter and search on ecommerce sites. Thanks.
@romanmed9035
Жыл бұрын
axios is better and simplified
@hwj8640
Жыл бұрын
I remember the team of Next.js made the same functionality called useSWR.
@Tajdev
Жыл бұрын
When we com back to posts list, it should show message that new posts are being refreshed or checked.
@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.
@minhct2511
Жыл бұрын
hi Kyle can you do a video on how to login using social media like Google or Facebook .... I really need that :(
@rickharold7884
Жыл бұрын
yea that's cool
@abdilami9585
Жыл бұрын
before react query i was use redux toolkit rtk query but react query is simple and powerful❤❤
@Joseph-do9ue
Жыл бұрын
I do switch for React Query instead using Redux anymore
@triteraerlangga7917
Жыл бұрын
please make a video about caching, because I always heard a joke that caching invalidation is hard.
@tyrellbb
Жыл бұрын
I love TanStack Query too. I used it on a recent project. Well done Kyle. This is an extensive yet succinct overview.
@briar44
Жыл бұрын
Looking forward to the full course :)
@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.
@MihirAmanRaj
Жыл бұрын
Can u make a vid about t3 app
@DudumanBogdanVlad
Жыл бұрын
Is there a repo to play around? Thanks for sharing with us the knowledge!
@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?
@senne4179
Жыл бұрын
Can you make a git repo and give us the link of this code (components etc)?
@danielbolajoko442
Жыл бұрын
It's quite similar to GraphQL, seems cool
@ukaszzbrozek6470
Жыл бұрын
I love this library. You should do also an episode about tasStack router. It is amazing tool.
@KevinVandyTech
Жыл бұрын
He already did a couple weeks ago
@devGamersCoders
Жыл бұрын
Can you make video about using custom hook that manages react query
@chunkwanchan5503
Жыл бұрын
looking forward more useCase examples~~
@marquinhusgoncalves
Жыл бұрын
Amazing video, thanks for it !!!
@Aaronmoreno
Жыл бұрын
timing couldn't be more perfect, was just about to move all calls to this
@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.
@polioann
Жыл бұрын
which state manager will be good together with react query?
@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_
Жыл бұрын
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.
@lakajnck
Жыл бұрын
What about the performance?, Which one is better??
@Kareszrk
Жыл бұрын
please make webauthn tutorial :(
@Nilkamalsha75
Жыл бұрын
what is ! character mean when calling function. For example - getUser(post!.userId)
@mohammedsameermohiuddin1121
Жыл бұрын
and also what is parseInt(id!)
@leonardofernandesperes
Жыл бұрын
I was looking at react query yesterday and you come wit hthat video, thank you mate!
@mukleshossen751
Жыл бұрын
I am use rtk-query which one is better?
@damiancardozodelgado2101
Жыл бұрын
well done mate, well done, it is a great summary of the principal topics, ty really handy
@marvelBoy1909
Жыл бұрын
Can u provide the code for this one in github?
@gislo
Жыл бұрын
Are you open for consulting/ mentoring at all? :)
@jingli9232
Жыл бұрын
how about swr, which one do you think works better?
@toebymaguire5108
Жыл бұрын
kyle you make great content, much love no hate
@dshyryayev
Жыл бұрын
You are one of the best of the best or may be the best
@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?
@bryan2214
Жыл бұрын
"!" what is the use of this sign after a value?
@SuperMoskis
7 ай бұрын
Great vid! Love your content!
@codehunt1143
Жыл бұрын
Kind of similarities to RTK query, but it is a better alternative. Thanks for the video.
Пікірлер: 212