Mastering React Query V4! Easy, Fast, and Scalable Server State Management Library ~ Part 1
--
Do you know that 90% of React application only requires server state management library such as React Query instead of client state library such as Redux? With React Query, you don’t need to worry about performance optimization, scalable architecture, error handling, etc. Knowing those, Learning React query is a must
This series consists of 2 parts, make sure you check them both:
- Part 1
- Part 2
What is React Query and Why should we use it?
Before we deep dive into React Query features, we need to know why it is preferred over other state management libraries such as Redux and MobX. I already discussed this in more detail in my last post, make sure you check it out first here (https://andreassujono.medium.com/is-redux-outdated-use-data-fetching-library-instead-bd37b83c375e)
To recap, there is 2 different state that needs to be shared: client state and server state. However, the majority of React application only requires sharing server/ API data among components. With hooks based approach, react query can be easily integrated into a React application and also provides additional functionality to boost performance such as
- Caching
- Deduping multiple requests into one
- Performance optimizations like pagination and lazy loading data
- Refresh data when it is “out of date”
- Managing memory and garbage collection of server state
- Memoizing query results with structural sharing
Installation
React query V4 is renamed to @tanstack/react-query while keeping the prev version's name as react-query
$ npm i @tanstack/react-query
# or
$ yarn add @tanstack/react-query
