To work effectively with data in React applications, you need to distinguish between client state and server state.

Client state refers to any data that exists only in your application’s memory and is managed entirely on the client side. This includes UI state, such as whether a modal is open, the current value of an input field, or which tab is active. For example, if you use useState to track whether a dropdown is open, that is client state:

const [isOpen, setIsOpen] = useState(false);

Server state is data that lives on a remote server and must be fetched over the network. Examples include user profiles, lists of products, or comments on a blog post. Server state is not static: it can change outside the app (for example, if another user updates the data), and you need to keep your UI in sync with these changes. Fetching a list of users from an API and displaying them in your app is working with server state:

// Pseudocode for fetching server state
fetch("/api/users").then((res) => res.json());

Managing server state is more complex because you need to handle loading, errors, caching, refetching, and potential out-of-date data. Client state, on the other hand, is typically simpler to manage because it is local and only changes in response to user actions within the app.

React Query is designed specifically for managing server state. It helps you fetch, cache, update, and synchronize data from remote sources in a way that is efficient and reliable. However, React Query does not replace tools like Redux or React Context, which are often used for managing client state.

Redux and Context are still useful for storing and sharing client-side data that does not come from a server, such as UI preferences, themes, or temporary form data. React Query complements these tools by handling the unique challenges of server state, such as background refetching, cache invalidation, and managing asynchronous loading states.

You should use React Query for data that needs to be kept in sync with a backend or remote API, and continue using Redux, Context, or local state for data that is purely local to your application.