Server State vs Client State in React for Beginners

In React, managing state is a crucial aspect of building efficient and scalable applications. Two types of state exist in React applications: server state and client state. In this article, we will discuss the differences between these two types of state, their use cases, and how to manage them effectively.

Server State

Server state refers to the data fetched from an API or a backend server. This data is not yet processed or manipulated by the client-side code. When working with server state, it is essential to handle asynchronous data fetching and caching to ensure a smooth user experience.

TanStack Query (formerly React Query) is a popular library for managing server state in React applications. It is efficient and makes the UI smooth on the client side. With TanStack Query, components will only re-render when the data that they need has been fetched.

Here's an example of using TanStack Query to fetch data from a server:

import { useQuery } from 'react-query';

const fetchPosts = async () => {
  const response = await fetch('https://api.example.com/posts');
  return response.json();
};

const Posts = () => {
  const { data, isLoading, error } = useQuery('posts', fetchPosts);

  if (isLoading) return <div>Loading...</div>;
  if (error) return <div>Error: {error.message}</div>;

  return (
    <ul>
      {data.map(post => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
};

Client State

Client state refers to the data that is specific to the client-side and is not dependent on server data. This includes UI state, form data, and other ephemeral information.

In React, you can manage client state using built-in hooks like useState and useReducer, or use state management libraries like Redux.

Tip for Intermediate Developers: Try and Explore Zustand

Here's an simple most example of managing client state using the useState hook:

import React, { useState } from 'react';

const Counter = () => {
  const [count, setCount] = useState(0);

  const handleClick = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <button onClick={handleClick}>Increment counter</button>
      <div>Counter value: {count}</div>
    </div>
  );
};

Conclusion

Managing server state and client state in React applications is essential for building efficient and scalable applications. TanStack Query is a popular library for managing server state, while built-in hooks like useState and useReducer can be used for managing client state.

By understanding the differences between server state and client state, you can effectively manage your application's state and provide a seamless user experience.