Hello, My Dear Niece and Nephew on the internet. Welcome to the amazing series of React Query. So this will be a series where I will be posting different parts of blogs one after the other so do watch out.
React Query:
React query is a React library that simplifies the way we fetch, cache, and synchronize data from the server.
Back Story:
As React is a UI library it doesn't really care about how you write the code whether it is optimized or not.
React Belike:
So with this obviously developers tend to use browser APIs like fetch and packages like axios to call the API and use React.useState to render the page whether the page is loading or it has data.
It looks fine till here but when you talk about building up the code for caching, retries, etc it really becomes the spaghetti 🍜 and you end up using a lot of useEffect in your code.
there is a saying :
if you have too many useEffects in you code then you have f**ked up.
So here come our hero to rescue the React developer "React Query".
Benefits Of React Query:
Automatic caching and stale-while-revalidate functionality, allowing for efficient data management and reduced network requests.
Concurrent mode support, allowing for a smoother user experience by not blocking the UI while data is being fetched.
Ability to easily handle pagination, refetching, and error state management.
A hooks-based API that is easy to use and integrates well with other React libraries.
Concurrent mode support.
Built-in support for fetching, polling, and real-time updates.
How to install:
/// Install react query package...
npm i react-query
Comparison:
Here it is not just about the line of code but the readability of the code is way better with react query. It gives the state management out of the box which makes the least worried about the actual fetching part and focuses on UI and readability of the code.
When the react query catches an error while fetching it automatically does refetching 3-4 times and then shows the error message. and for this, you do not need to add any extra code it does this automatically.
Conclusion:
So here is the actual difference between with and without react- query how it helps us to write more efficient code for fetching data from the server. Let me know in the comments below how you feel about the article depending upon the traffic this blog drives I will be drafting 2nd part for it until then.