How do you manage server state with React Query or SWR?

Managing server state in a React application is crucial for ensuring that the UI reflects the most current data available from the server. Two popular libraries for handling server state in React are React Query and SWR. Both libraries provide powerful tools for fetching, caching, and synchronizing server data, but they have different philosophies and approaches. Below, I will discuss how to effectively use both libraries, including practical examples, best practices, and common mistakes to avoid.

React Query

React Query is a powerful library that simplifies data fetching and caching in React applications. It provides hooks that allow you to fetch data, manage loading and error states, and automatically update your UI when the data changes.

Basic Usage

To use React Query, you first need to install it:

npm install react-query

Here’s a simple example of fetching user data:

import { useQuery } from 'react-query';

const fetchUser = async (userId) => {
  const response = await fetch(`https://api.example.com/users/${userId}`);
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
};

const UserComponent = ({ userId }) => {
  const { data, error, isLoading } = useQuery(['user', userId], () => fetchUser(userId));

  if (isLoading) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return 
{data.name}
;
};

Best Practices

• Use query keys to uniquely identify queries, which helps in caching and refetching.
• Leverage the built-in caching mechanism to avoid unnecessary network requests.
• Utilize the staleTime and cacheTime options to control how long data remains fresh.
• Implement optimistic updates to improve user experience during mutations.

Common Mistakes

• Not handling errors properly, which can lead to poor user experience.
• Forgetting to invalidate queries after mutations, which can result in stale data.
• Over-fetching data by not using the appropriate query keys.

SWR

SWR (stale-while-revalidate) is another library for data fetching in React, developed by Vercel. It focuses on simplicity and performance, providing a hook-based API similar to React Query.

Basic Usage

To use SWR, you also need to install it:

npm install swr

Here’s an example of fetching user data with SWR:

import useSWR from 'swr';

const fetcher = (url) => fetch(url).then((res) => res.json());

const UserComponent = ({ userId }) => {
  const { data, error } = useSWR(`https://api.example.com/users/${userId}`, fetcher);

  if (!data) return 
Loading...
;
  if (error) return 
Error: {error.message}
;

  return 
{data.name}
;
};

Best Practices

• Use the fetcher function to centralize your data fetching logic.
• Utilize the revalidateOnFocus and refreshInterval options to keep data fresh.
• Implement error handling and loading states effectively for a better user experience.

Common Mistakes

• Neglecting to handle the case when data is undefined, which can lead to runtime errors.
• Not using the fallbackData option, which can improve user experience during initial loads.
• Overusing revalidation options, leading to excessive network requests.

In conclusion, both React Query and SWR provide excellent solutions for managing server state in React applications. Choosing between them often depends on your specific use case and preferences. By following best practices and avoiding common pitfalls, you can effectively manage server state and create a responsive user experience.