Why I avoid useEffect For API Calls and use React Query instead

If you are like me, always using use effect whenever you need to grab data from an API then wait for it to be fetched and let the React component render it, Well, this is what most people usually do too! Don't surprised cause it's the most obvious way and straightforward way to do it. But we never thought about improving it right? Likely for us, the team behind React Query built this amazing library to solve this problem and simplify our lives as developers. No more effect, the code is simple and maintainable, anyone can read through the code and it handles all the fetching states for you!

⭐ Timestamps ⭐
00:00 Intro
00:37 Why React query?
01:32 What's wrong with useEffect?
03:53 Same code but in React Query
05:43 So much easier code!
08:06 No need for a global store (aka Redux)
13:35 React Query cache is so smooth
16:30 Mutations makes it simpler

⚡️ Redux Alternatives Repo

🧭 Build Login/Register API Server w/ Authentication | JWT Express AUTH using Passport.JS and Sequelize

🧭 Turn Design into React Code | From prototype to Full website in no time

🧭 Watch Tutorial on Designing the website on Figma

🧭 Watch Create a Modern React Login/Register Form with smooth Animations

🧭 Debug React Apps Like a Pro | Master Debugging from Zero to Hero with Chrome DevTools

🧭 Master React Like Pro w/ Redux, Typescript, and GraphQL | Beginner to Advanced in React

🧭 Learn Redux For Beginners | React Redux from Zero To Hero to build a real-world app

🧭 Introduction to GraphQL with Apollo and React

Made with 💗 by Coderone

[mikamanelka]

what makes that video great, is, that you compare the "old" and "react query" way! I clearle can see and understand the advantages of react query now. thx!

[smartjefreycoca]

Thank you!! .. 1st time hearing this library.. This help me a a lot.

[GreggBolinger]

Very nice description of how things work.

[oOrbitZz]

This absolutely helpful fetch and state mgt all in one. Would be great if you could also share how to unit test this. Thanks.

[ikarosouza]

your example can be improved even further if you create custom hooks on top of the useQuery hook, like, you could create a useProductsQuery hook and use it instead of the regular useQuery hook and have even less code repetition because of that

[princeparaste]

I knew react-query exists but never used it. After watching this video I think i am gonna use it my upcoming projects

[CoderOne]

Everyone! Follow me on Twitter and GitHub for more stuff:

[chunkwanchan]

Many thanks, nice comparison!
@11:44, In order to use the cached query data, if my query keys has other params, ["queryName", param1, param2]. Do I need to include them in the useQuery hook, or just the "queryName" is enough? also the indiviual config option of that query?

[saurabhpathak]

For example if I have a list of items data and on another route /page I have to show my one data which having some specific data so how do i pass my params data to fetch function?

[stavroskefaleas]

Awesome video.
I have a question thought.
Since in my company we use mostly the hash router and since it is proved to be incompatible with the new features of react-router 6.4 are you sure that I can use reacty-query library with the hash router?

[romko-romario]

As for me, one of the most convenient ways to separate logic of api calls and the following data processing is using redux-saga effects, and it's very good both in terms of code structuring and readability.

[thiagosiqueira]

What extension do you use that shows the size of the packages right on the import statement?

[everythingisfine]

React-query or swr was the best thing to happen to React since hooks. Maybe the only reason why I haven't fully switched to svelte (yet)

[mohamedlamine]

How do you change your VSCode activity bar icons look?

[Andreas-ghis]

It's very easy to use hooks-based query libraries. I find however, that this can lead to an async workflow controlled by the visibility and rendering of individual components. This is hard to follow and the rendering process isn't meant to be an event loop. Therefore I prefer to use RTK Query and thunks/sagas in Redux to specify the async workflow more clearly. RTK Query also supports hooks-based invocation.

[codewithfaizu]

big fan sir thank you for your efforts

[bhargavaprabureddym]

Title is wrong! Behing the scenes React Query uses useEffect() to fetch data😀

[darkdande]

I am newbie, can someone explain to me why he can simply call dispatch without using useDispatch and useAppState in react web but not react native project?

[alexandruasaftei]

The fact that the fetching/refetch is executed before useEffect is a very bad idea in many cases. For example I need to change the page and after that to send data with the new page as a parameter.

[radadiyanikunj]

That's awesome but how dependency array works with useQuery? What if I have to fetch again if some state change?