Getting Started with React-Query for Data Fetching and State Management

React.js is a powerful client-side JavaScript library. Like any other JavaScript library, React.js gives you a smooth experience when building reactive and declarative user interfaces.

However, there are a few negative aspects to it, like state management and data fetching.

Server state management is a little different from other libraries. In React.js, it is asynchronous and the data persists remotely with no direct control. This means that we have to update, cache or re-fetch the data to efficiently manage the state in React.js applications.

React Query is a pre-configured library that aims to solve these complexities.

Using React Query, we can fetch, cache, and update data in React-based applications in a simple and declarative manner without mutating the global state.

Goal

Nowadays, almost every web application works with remote data. Unfortunately, for developers, data fetching and handling server states in React applications are easier said, than done.

As developers, we need to rethink about:

• What to render while waiting for the remote data to load?
• What happens if an error occurs?
• How do we keep the client up to date with the server?
• How will these tradeoffs impact the users with a poor internet connection?

When dealing with asynchronous data that needs frequent updating, caching, and synchronization with the server, there is no better library than React-Query.

In this tutorial, we will go through how the React-Query library can improve the user experience in our react applications.

To demonstrate these concepts, we will use the JSON Placeholder as the third-party REST API.

Prerequisites

For this tutorial, we need to have:

• An intermediate level skills on React hooks and functional components are essential.
• A basic understanding of REST APIs and data fetching in JavaScript.
• Make sure to have Node.js runtime installed on your machine.

Understanding state management and server state

Every interactive client-side application will involve interactive events.

For example, when a user interacts with an application by clicking a button or closing a sidebar, the app must re-render the page accordingly to reflect these changes. We call this change, the state of the app.

In the context of React.js and Single Page Applications (SPA), state management is a way to share the data across different React components.

In other words, a state is simply a JavaScript object representing part of a component that can change based on user actions.

You can read more about this in the React.js documentation