React Query Is (Still) Essential - My Favorite React Library

Thank you as always TKDodo for the awesome content. React Query is still an essential dependency on all my React projects. Please, please do not fetch in your useEffects

SOURCES

S/O Ph4se0n3 for the awesome edit 🙏

[germantoenglish]

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

[maxvhanamane]

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.

[migueltejeda]

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

[timvw]

Theo, appreciate your frequent videos!

[kefkef]

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.

[glorrin]

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

[showduhtung]

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

[RolandAyala]

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.

[miruna]

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

[georgiarnaudov]

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

[airixxxx]

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.

[_a_]

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.

[wlockuz]

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.

[ssk]

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.

[elliotsharpe]

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_Amazin_]

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.

[AaronStyles]

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.

[MerkieAE]

Nice video Theo. This is what pisses me off 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)

[adaptivedeveloper]

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.

[ChristopherHaws]

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.