please pet the cat

@bobobo1673

4 ай бұрын

Are you talking or the toxoplasmosis in your brain?

@idonthavefantazy

4 ай бұрын

@@bobobo1673did you even watch the video till the end?

@CoolestPossibleName

4 ай бұрын

@@bobobo1673 what's a toxopalsmosis

@renejotas

4 ай бұрын

i cant believe he didnt pet the cat on cam

@murtadha96

4 ай бұрын

@@renejotas exactly 😔 poor cat

"I am a cat. I am here. I am important." 😻

When you use React Query, achieving caching and optimistic updates becomes very easy, and as a result, your app feels fast. By using a stale time, you can reduce network requests if your data doesn't change frequently... I personally love react query.

@freezzefx2670

3 ай бұрын

if i decide to use reactQuery , do i need another state manager ? , like redux or zustand for the client side, or just using React Query is fine ?

@maxvhanamane840

3 ай бұрын

@@freezzefx2670 No, you don't have to use any other state management library along with React Query. React Query handles its own states, and you can access different state values by destructuring them like this: const { data, isLoading, isError } = useQuery('myQueryKey', fetchDataFunction); It is like this: Initially, when your component mounts, isLoading becomes true. So, while fetching data, you can show a loading indicator. If something goes wrong, isError will become true, allowing you to show a different UI for errors. Once data comes in, it will be available in data, and you can use that data to show your actual UI. All these are states, so as they change, your component will rerender automatically. I have destructured only three properties (data, isLoading, isError), but there are many other properties that you can use; refer to the docs.

@maxvhanamane840

3 ай бұрын

@@freezzefx2670 No, you don't have to use any other state management library along with React Query. React Query handles its own states, and you can access different state values by destructuring them like this: const { data, isLoading, isError } = useQuery('myQueryKey', fetchDataFunction); It is like this: Initially, when your component mounts, isLoading becomes true. So, while fetching data, you can show a loading indicator. If something goes wrong, isError will become true, allowing you to show a different UI for errors. Once data comes in, it will be available in data, and you can use that data to show your actual UI. All these are states, so as they change, your component will rerender automatically. I have destructured only three properties (data, isLoading, isError), but there are many other properties that you can use. refer to the docs.

@maxvhanamane840

3 ай бұрын

@@freezzefx2670 No, you don't have to use any other state management library along with React Query. React Query handles its own states, and you can access different state values by destructuring them like this: "const { data, isLoading, isError } = useQuery('myQueryKey', fetchDataFunction)" It is like this: Initially, when your component mounts, isLoading becomes true. So, while fetching data, you can show a loading indicator. If something goes wrong, isError will become true, allowing you to show a different UI for errors. Once data comes in, it will be available in data, and you can use that data to show your actual UI. All these are states, so as they change, your component will rerender automatically. I have destructured only three properties (data, isLoading, isError), but there are many other properties that you can use; refer to the docs.

@maxvhanamane840

3 ай бұрын

​@@freezzefx2670 No, you don't have to use any other state management library along with React Query. React Query handles its own states, and you can access different state values by destructuring them. Unfortunately, I can't provide a code example here because KZread removes my comment if I do so. It is like this: Initially, when your component mounts, isLoading becomes true. So, while fetching data, you can show a loading indicator. If something goes wrong, isError will become true, allowing you to show a different UI for errors. Once data comes in, it will be available in data, and you can use that data to show your actual UI. All these are states, so as they change, your component will rerender automatically. I have destructured only three properties (data, isLoading, isError), but there are many other properties that you can use; refer to the docs.

give kitty lovinnnnsss. Thank Theo for this awesome run down on react query. You really helped solidified it's use cases for me : )

clear signs of cat mistreatment here. Not enough immediate unconditional attention also unsolicited misplacement away from the headscratcher device

@Dude29

4 ай бұрын

lmao

Theo, appreciate your frequent videos!

React query rocks, even for use cases where using ssr and rsc. Major kudos and thanks to team tanstack. There’s also rtk query, which I like/prefer in some ways, but react query nails all the use cases like handling ssr and infinite query. I can’t imagine handling async state using use effect- my gawd.

The draw to start using react-query was essentially I could completely isolate components with it’s data fetching, and when another component tries to fetch the same data it’s smart enough to only send one request. It makes moving around components in different ui’s great, because the data logic is also encapsulated.

@MadsterV

Ай бұрын

I did this via simple events and a hook and packaged it as react-state-events. indeed moving components around is now really easy and the code redesign was also very very simple in an existing project.

Great point that react-query isn't a fetching library,, but an async state management library (tanner should look into rebranding away from the phrase "query" then). Instead of the common question ppl ask "do I need react-query if I'm already using server components", think you can help explain when we need client side fetching when we already have fetching server side

Would be of a great value if you share how do you organise code for big projects such as Twitch - folders, components, naming, etc.

@nachoperezgullermo5636

3 ай бұрын

I mean, you probably already read it, but LIFT principles from Angular are really useful for this.

react-query still using useEffect under the hood, everything is based on the specific use case. also there are other libraries like RTK that provide similar functionalities.

can't wait to hear from you about the fetch not throwing situation

Totally agree. I am currently working in 2 projects in my company. One with redux as global store and the other with react-query. The main problem I face while using redux would be the caching and loading state. When things get complicated and you have to make 3-4 dispatch calls in a function, then maintaining the loading state with redux becomes very difficult. Also the isLoading and isFetching in react query can be very handy, showing different loaders at different instances in an app. Another niche case with react query is that when you want to cancel pending queries on unmount of a component, it can be achieved by just passing the abort signal at the right place. PS: Left out a major thing, in instances when you're firing a post request, you can invalidate the get query and it cleans the cache, which will require additional lines of code at numerous places (depending on your application) while using redux.

@liftwithamey

3 ай бұрын

how do you mange state in you react-query then? with context only ?

@ssk7690

3 ай бұрын

@@liftwithamey all the api responses are cached in react query based on the query key. So if you set refetch on mount to false, it will use the cached data which is basically useSelector in case of redux.

@EpicNicks

2 ай бұрын

wouldn't rtk-query have fit since you were already using redux?

@MadsterV

Ай бұрын

@@ssk7690I just took out logic out of UI code and everything became very obvious. Now a regular JS class tells React what to do through events and React updates accordingly. I can get as async and complex as I want and the UI code stays very simple and readable. Caching? I'll just stash it in the controller. Need a sequence of requests? just regular async/await does it, then publish success or failure accordingly. Cancels? push/pull a list of them in the controller. React doesn't need to know about that.

@ssk7690

Ай бұрын

@@MadsterV by cancelling pending queries I meant something else. Let’s see this with an example. Say you’re firing 10 api calls on a page. Now if the user clicks on a different tab within the page, by default the api calls in second page wouldn’t start until the previous 10 are completed. Hence the need to cancel the pending queries based on user activity. This can be achieved very easily using react query, all you’ll need is the query key.

Amazing content! Thank you so much!!!

Surprised you don't use query key factories in your code, this is something I learned from Tkdodo's blog and its been amazing because now I don't have to remember query key names if I want to invalidate them in any place.

@CapzTube

4 ай бұрын

Query-Key factory is a godsend.

I love react-query and go with all of our arguments. I see problems with useEffect elsewhere though. It's used when reducers should be employed. I build complex CMS where you have loads of changees to the client state of the object fetched and eventually saved to the server. Saw people jerking useState and useEffect to manage that. All removed by simple useReducer or redux with some thunks from time to time. I think as state manager, when you do many updates to the client state (like in my case) keeping things out of the react-query and in reducers is simpler, especially if you don't want to run into key management hell. Compared to your example for non-fetch examples, it may be why reducers work better in that case is that structure of my model is unpredictable and can be deeply nested.

@tradfluteman

4 ай бұрын

Yeah. If you use optimistic updates so much that your data is basically just state, with an extra database synchronization step, you should embrace a state manager for it, not a query manager.

With SWR we got rid of the whole global state management on our project. Awesome stuff.

@TheBswan

4 ай бұрын

​@@smithrockford-dv1nb you're thinking of SWC (speedy web compiler). SWR is a cache invalidation strategy (stale while revalidate). I believe it's also a useQuery-like library from vercel.

@NukePotato

4 ай бұрын

@@smithrockford-dv1nb that's SWC

@bren.r

4 ай бұрын

@@smithrockford-dv1nbSWR means Stale-While-Revalidate. What you’re referring to is SWC.

@dealloc

4 ай бұрын

@@smithrockford-dv1nb You're confusing it with SWC. SWR is a library by Vercel to do the same thing, though more opinionated focused on data fetching than general async, hence its name (Stale While Revalidate).

@kirsh0257

4 ай бұрын

How did you handle type safety wheb suspense option enabled? It seems tanstackquery provides useSuspensequery but swr not.

I love the data selectors feature in React Query

As long as you use the react query in component / customhook it's fine. The last issue I have faced is query on click... and yeah someone of you may say "hey there is simple 'refetch' method" but well it's not that easy: 1. query function is a hook so I cannot use it simply like: if args is passed then fetch the query -> you have to wrap it in additional components/ wrapper 2. refetch method is not using the data stored in react-query context e.g. 1. manually query ('refetch') was about "dogs", 2. was about "cats", 3. was about "dogs". Suprise even the data was already in context the api call has been invoked. for me RTK query is much better ;)

Nice video Theo. This is what pisses me off sooooo much about React coming from Svelte, these one-off packages that are required to do basic stuff the framework should be providing a solution for (IMHO)

@Nassifeh

4 ай бұрын

I used to feel this way more, but then I had to do long-term maintenance on some Angular apps? I started to much prefer a more modular approach. I think the reality is that the "official" version would work half as well and would reduce the support given to alternatives. At the very least, there's tradeoffs.

@MerkieAE

4 ай бұрын

@@Nassifeh This is actually a pretty good point I can see where you’re coming from. I’ll probably feel less salty once I get better at using these 3rd party react packages

@Nassifeh

4 ай бұрын

@@MerkieAE It's definitely an adjustment period, even if I'm in favor of it. 😩 I miss when every guide or tutorial was doing stuff the same way I am. But I won't miss having to update basically the whole app all at once twice a year.

@shanecoronado

4 ай бұрын

But React isn't a Framework. It's a JavaScript library. It wasn't meant to handle data fetching built-in.

The article states that the custom fetch hook is spaghetti code, like what do you think is going on in React Query behind the scenes? black magic? Before React Query came along every senior dev would create their own query custom hook, and that's the thing the team at Tanstack did, they just turned into a library and added a ton more of functionality. If you just need to make simple requests, making a good custom fetch hook is a good solution, React Query didn't invent data fetching and it shouldn't be imposed as the only solution.

@stoogel

4 ай бұрын

Critically, React Query is not using useEffect under the hood (for the fetching bit).

@airixxxx

4 ай бұрын

@@stoogel what's using? There's no alternative to useEffect for connecting to external APIs in React as far as I know.

I like how this video is just reading a blog post

This is also a large bit of what HTMX does for you that fetch does not do, hx-sync is absolutely amazing from a state management point of view and fits in perfectly and is a very good example of why declarative fetching at the core of the framework is so much better than imperative fetching in javascript

Ha. I've been saying "Tanstack Query is an async state management library" for ages and at the start, I was trying to figure out why I agreed with you because I can't recall watching anything of yours about Tanstack Query. It's because I watched that exact Jason Lengstorf podcast vod when I was learning about tanstack query.

I use React Server Components for server stuff and tRPC (uses React Query under the hood) for client stuff. Pretty neat

You also could add an AbortController and pass the signal to fetch as a prop so that when the useEffect cleans up, it can abort the query so that the browser and backend dont need to keep processing the request.

I absolutely love React Query and wish I could use it with a Websocket-based API at my current project

Fascinating you changed my mind

I'm happy, Brain Holt said the very same things 1,5 years ago at frontend masters. :)

I'm doing something at work at the moment with Launch Darkly (feature flagging tool). Whenever the user changes, we tell launch darkly, and that gives us updated feature flags based on the data sent. In order to access the flags we have to use their client to fetch them. These flags need to fetched asynchronously however they are already cached in the launch darkly client. I ended up just fetching the flags and dispatching to redux whenever we change the user so the UI is always in sync but I'm still debating in my mind whether I should have used React Query... This is React Native btw. Do you have any thoughts on this?

I was never introduced to react-query, but after watching this I think I'm going to be using it all over the place now.

Thanks again man!

2:49 yeah that’s a bug but you don’t need a library to fix that bug, use an abort controller and abort inside your returned useEffect clean up function.

@fuzzboi

2 ай бұрын

Not too long ago I learned this

Yeah a detailed video on fetching data specially in next js would be great

My chest started to tighten right at the end of bug #4. I only used react recently and and I made the jump to react query when the mvp got to paid stage, and I am proud to say that I am never going back. 🎉

I didn't even know you have a cat on your crew! Loving it! What's the name?

hey man, I watched your videos a lot but I never subscribe. 🤣 but when you show your cat at the end of the video 🤩 aww so cute I need to click subscribe now.

I've done CRUD cache engine from the url structure and also doing optimistic CRUD changes (as part of the cache engine) after successful mutations.... Helps me to minimize the codebase, instead of thousand custom hooks files....

Love react query !!

What about primitive obsession? I like react-query but I am wondering if there is a way to use it together with state machine for use cases where you have some form, some loading state, possible error state, confirmation of request send state and so on. I would like to use it in state machine, not always check if I have data or error

@MadsterV

Ай бұрын

absolutely. react-query expects a rather specific use case and once you step out of it, you're on your own. I moved logic out of React code into a regular JS controller class and just use a simple pub/sub to communicate events from the controller to the UI through a subscription hook (react-state-events). Then everything clicked without the need for awkward hooks and rendering weirdness (I did use a very simple state machine!). Controller offers methods which are hooked to UI controls and UI updates as needed when the controller decides to do so. I can even call the controllers from other components if I wish to do so. I can unmount and keep the controller alive to remount UI later, in a different place or even mount many different components at the same time that render the same data in different ways. Very flexible with minimal boilerplate! No useEffect, no double calls, no undesired renders. Just a plain class sending UI events and a plain React component rendering whatever the events say.

my guesses for the 5 potential bugs: - out of order responses when category changes - data and error set simultaneously, not properly overriding both values when category changes - stale result being used when category changes - not properly accounting for bad status code (that depends on the api really) - cannot determine loading state because of default data empty array value - fetching not cancelled when component unloaded

I am convinced, i need react query

This is very awesome indeed.

It's like just HAVING your server state, right there, updated, ready to go at all times. Tanner is amazing. THANK YOU for React Query brother.

In my every-day job my team uses redux-saga to achieve pretty much the same thing react-query does: async state management. That said, what are the differences between these two libraries? Is one better than the other? Or everything resolves in “it’s your preference”? Great video btw!

@lamhung4899

4 ай бұрын

You probally use sagas "wrong" way. React-Query is 90% same things compared to Redux Toolkit Query - which is solve the 'fetch data' use-case of sagas. If your daily sagas purpose is :fetch data, update loading, set success, set error, invalidate incomming fetching action, wait another action's data , your work is just overlapping RTKQ - as I said "wrong". I personally though sagas make no sense to my project since RtkQ released. Back from start, sagas CAN handles all React-Query usages - but in a dirty way

@ryrilya2289

4 ай бұрын

@@lamhung4899 Thanks for the answer! How would you suggest to use saga in a proper way?

can i still use React useQuery on my nextjs application or just use built in data fetching on server components ?

@eudora8057

3 ай бұрын

React Query Doesn't work really well with server components. Nextjs fetching api comes with caching, revalidation already so react query is not really necessary

What about the differences between ReactQuery & useSWR ?

@KWerder92

4 ай бұрын

wondering as well

@azekeprofit

4 ай бұрын

It's slightly easier to handle (no need to do QueryClientProvider/useQueryClient) thing, it's 3 times lighter according to bundlephobia APIs for cases Theo mentions are the same, the code from this video would work with useSWR exactly the same Because of worse docs, i had problems making useSWR and Tanstack Table to cooperate (i guess Tanstack tried to vendor lock-in to sway me to use Tanstack/React Query) but i overcame it

I thought react query would handle any errors in the fetch function. should I go back to using try-catch blocks in this kind of function?

@wlockuz4467

4 ай бұрын

React Query is data agnostic, meaning it doesn't care how you provide it the data, via fetch, via XMLHTTTRequest, via axios or pull it from localStorage. All it cares about is that you give it a function that returns some data or throws an error. If the function returns the data it is considers a success, if it throws it is considered an error.

What do you think of rtk query?

i agree i will use fetch in my useEffect tho

@27sosite73

4 ай бұрын

loh

Great vid. Opinion vs SWR?

Pet the little Tabby thing and then we will all aww ❤❤❤❤

How to use query outside a component? When it’ll be possible maybe it’ll be a good time to use it.

thoughts on RTK Query?

Were you the one on picturepunches back in 2018, 2019 ??

Signal is the key. Doesn't matter if u use react query or not

so whenever we need to fetch some data from API or to get async data, then we use react query instead of useEffect(), Then when is good idea to use useEffect()? do we still need it?

@Ehehshakessb

3 ай бұрын

Firing off tracking events, subscribing to server sent events or socket events , for example

If someone is already using redux toolkit for managing states what would you suggest him I thought of using RTK query I think RTK query is quite good when you already using redux isn't it?

@raijinhasarrived

4 ай бұрын

red is red, blue is blue

@hiranizamani847

4 ай бұрын

@@raijinhasarrived what if someone is color-blind

If the core methods are so perilous, it seems like the argument could be made that this should be in the core framework. The API should be improved so that the right way is the easy and obvious way, yes?

I feel TanStack utilities to be a bit cumbersome for my taste, they are great but for data fetching I prefer SWR!

That cat looks like mine!!!

Great! 👍👍👍👍👍👍

talk about useSWR for data fetching aswell and compare the two if you can

I also use it but I still do not know why they don't have an own fetch function, you still have to change the default behavior of fetch to make it fully correcttly working with react query

more cat please, thank you.

I am at end of video but I am still not able to figure it out if he has blonde hair or colored his mustache. :)

I am only person who use React Query, my coworkers implement their own custom hooks using fetch. They say - it is more convinient than React Query…

Thanks for your quick talking it helps us who haven't been fluent in English yet. Anyway please try to talk in a normal speed.

How would you put React Query against SWR? I have used neither - I'm looking for the best solution.

@t3dotgg

3 ай бұрын

SWR is a decent way to cache fetch calls. React Query is a groundbreaking way to manage async functions and state in React. IMO, they’re about as comparable as a toy car and a semi truck

@Anto-mi5pn

3 ай бұрын

@@t3dotgg Got it, thanks.

Can you make a video on when you might use react query in a next.js application?

8:41 where does signal come from?

Good to see our cats behave the same way around laptops

50-50 here. We used it for a medium project and in some cases we didn't like some of the workarounds and React Query way of doing things. It is a library from another author on how they believe data fetching should be handled, and I respect their opinions, but it is not one stop solution for everything. Not a bad experience, but not an amazing as well. Nevertheless, I have to give credit for an amazing library as a feat in developing it.

@panthonyy

4 ай бұрын

I agree with you there, it's a great tool to master, but it's not THE solution to every problem.

@filipjnc

4 ай бұрын

Just blabla. Give some actual examples for us to learn from.

@VelvetSage

4 ай бұрын

@@filipjnc IKR dude just wrote 5 sentences of nothing. "Some cases", yeah lol

I agree about using react query But in the article fetch was used in the most horrible way 😂

Love videos like this. Used to hate query after stumbling on some code that used it because the code had used it weirdly, but seeing this, I love it and am only gonna be using query moving forward

Your cat definitely made the point more valid.

redux rtk is way if you already have complex state system

💯

Most of my project use Redux (unfortunately), so it's easily for me to use RTK Query instead of React Query.

I ❤ React Query

WE NEED MORE CAT IN THE VIDEOS

Why do not they make react query as a part of native feature of React

Impressive resistance against the urge to pet the 🐈

Meanwhile Angular just uses RxJS inside and out with support for templating with observables, SolidJS and Svelte went the "Signals" way, which is kinda neat too

@the-other-sunny

4 ай бұрын

Was wondering how complex these simple things get in other frameworks

@killerdroid99

4 ай бұрын

Angular can use signals too now ig

@vutruong4164

4 ай бұрын

other frameworks like Svelte, Solid or Vue face the same async state management issues too, and they do have adapters to work with Tanstack Query (aka, React Query), because Tanstack Query's implementation is framework-agnostic. The only framework that came built-in with a truly fully-feature HttpClient would be Angular, which is based on Observable and can do async state management out of the box, e.g. set/unset Loading, catch error, debounce, cancellable. The problem is it is too specific to Angular and cannot be easily re-used by other frameworks, like Tanstack Query.

@figloalds

4 ай бұрын

@@vutruong4164 RxJS is not framework specific, Angular's HttpClient is almost just a wrap around fetch converting it to a cancellable observable, I did a quick google here and theres RxJS for React, but I have to say it looks kinda ugly

@ra2enjoyer708

4 ай бұрын

@@figloalds RxJS is not "framework-specific" in the same way Redux isn't. As in the authors want to believe they wrote a cool general abstraction which can be used everywhere, but it is so boilerplate-ridden and error-prone that you have to use another library to work with the framework of choice. And it becomes the de facto way of using the state management. That's why when you hear "Redux" you instantly associate it with React codebase, even though ACKSHUALLY it's React Redux which associates Redux with React. On top of that Redux has another abstraction called Redux Toolkit which brings a lot of things, a set of rules to deal with async state management and its error handling among the most important ones, which were suspiciously absent from base Redux. I didn't use RxJS but, looking at its basic concept, looks like it can easily become a hell of callbacks with quadrillion layers of indirection, with guidelines on error handling completely absent. I bet it's a lot nicer to use within Angular and you yourself think of angular code snippets when saying "RxJS".

It would convince me better if when i go to docs, i would see good docs not course selling to learn react query

WHO IS A GOOD CAT

❤🙏♥️☕♥️

I like RTK Query.

RTK Query?

🤗

Please do the fetch video

i didn't hear anything of the last minute 😅 cuz.. was looking at tha cat 🐈

I see catto I like

tldr: revalidation

When i was a child ,my mom closed my shirt top button like you did . Is it a new fashion there ? which country do you belong ? 🙃

Yeah use react guys, keep adding those small dependencies again again and again

All this stems more from React's patterns and way or working, than from dealing with async code in normal JS.

@Vim_Tim

4 ай бұрын

Yep. In theory it's better to reach for someone else's battle-tested tool to solve a problem, but I agree that these are self-inflicted problems by choosing a tool (React) that's way more flexible & complex than necessary for many projects.

@PaulSebastianM

4 ай бұрын

@@Vim_Tim yeah but it's the best supported we've got.

@PaulSebastianM

4 ай бұрын

All we need is to fix its kinks internally instead of crafting more tools.

How do you use error from react query since error type is any in typescript

@paw565

4 ай бұрын

If you use axios and typescript, then you can pass generic AxiosError to useQuery etc

@neociber24

4 ай бұрын

You can type the React query error

@TkDodo

4 ай бұрын

We default to the type 'Error' in v5 and provide a way to let you override it with module augmentation

Thank god he showed the abort signal at the end, because I wouldn't believe Tkdodo would use something hacky as the ignore solution lol

I swear by react query for server state and zustand for local state