React is a JavaScript library for building user interfaces, and it's a popular choice for developing web applications. One of the key concepts in React is state, which refers to the data that determines a component's behaviour and rendering.

There are two main ways to manage state in React: client-side state and server-side state. In this blog post, we'll take a look at the differences between these two approaches and when to use each one.

Client side state

Client-side state refers to the data that is stored and managed within the client's browser. This type of state is typically managed by React's built-in state management features, such as the useState hook.

Here's an example of how you might use the useState hook to manage a simple counter in a React component:

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

In this example, the useState hook is used to create a piece of state called count. The hook takes an initial value as an argument (in this case, 0) and returns an array with two elements: the current value of the state and a function that can be used to update it.

The component then renders a `p` element that displays the current value of the count state and a button that, when clicked, increments the count state by calling the setCount function.

Client-side state is useful for storing small amounts of data that are specific to the current user's interactions with the application. It's also useful for storing data that can be easily computed or derived from other data, as in the example above.

Server side state

Server-side state refers to the data that is stored and managed on a remote server. This type of state is typically managed by a backend service, such as a REST API or GraphQL server.

Here's an example of how you might use a REST API to retrieve data from a server and display it in a React component:

import axios from 'axios';

function TodoList() {
  const [todos, setTodos] = useState([]);

  useEffect(() => {
    axios.get('https://my-api.com/todos')
      .then(response => setTodos(response.data))
      .catch(error => console.log(error));
  }, []);

  return (
    <div>
      {todos.map(todo => (
        <p key={todo.id}>{todo.text}</p>
      ))}
    </div>
  );
}

In this example, the component uses the useEffect hook to retrieve a list of todos from a remote server when the component mounts. The data is then stored in the todos state and used to render a list of `p` elements.

Server-side state allows for the storage of large amounts of data that need to be shared across multiple users or sessions. It is also useful for storing sensitive or private data that should not be stored on the client-side. Storing data on a server allows for better security and management of user data.