Data Fetching Using React Query

Why prefer React Query over Redux?

Please subscribe my youtube channel: FrontEnd Interview Preparation: https://www.youtube.com/channel/UC-elmWUfbcbmvuhlS12nCtg

I’ve always believed there must be a better way to do the same with React JS. Although I have been using Redux to handle data fetching in projects.

Why React Query?

In redux, each fetch operation requires the developer to create:

• three actions (fetch request, succeeded, failed)
• three reducers (fetch request, succeeded, failed)
• one middleware (usually redux-saga or redux-thunk)

Writing all this code takes a lot of time, even for a simple API call.

Redux process for a fetch operation:

1. Dispatch an Action fetchSomething() from within the Component
2. This Action hits the Reducer which will update the store with something like isLoading: true
3. The Component re-renders and displays a loader
4. In the meanwhile, the Action hits the Middleware which takes care of calling the API
5. The API returns the response to the Middleware, which dispatches another Action…