React Zustand State Management

Introduction to Zustand

Zustand is a small, fast, and scalable state management solution for React. It provides a simple API to manage your application’s state without the boilerplate code associated with other state management libraries like Redux. Zustand is gaining popularity among developers due to its simplicity and performance.

Why Choose Zustand?

• Simplicity: Zustand’s API is straightforward and easy to learn.
• Performance: It is optimized for performance, ensuring your app runs smoothly.
• Scalability: Zustand scales well with your application, from small projects to large, complex ones.

Getting Started with Zustand

To start using Zustand, you need to install it in your React project. You can do this using npm or yarn:

npm install zustand
# or
yarn add zustand

Creating a Store

A store in Zustand is where your state lives. Here’s how you can create a simple store:

import create from 'zustand';

const useStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

export default useStore;

Using the Store in Components

Once you have created a store, you can use it in your components:

import React from 'react';
import useStore from './store';

function Counter() {
  const { count, increment, decrement } = useStore();

  return (
    <div>
      <h1>{count}</h1>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
    </div>
  );
}

export default Counter;

Advanced Zustand Features

Middleware

Zustand supports middleware, which allows you to extend its functionality. Some popular middleware includes persist for state persistence and immer for handling immutable state.

import create from 'zustand';
import { persist } from 'zustand/middleware';

const useStore = create(
  persist(
    (set) => ({
      count: 0,
      increment: () => set((state) => ({ count: state.count + 1 })),
      decrement: () => set((state) => ({ count: state.count - 1 })),
    }),
    {
      name: 'count-storage', // unique name
      getStorage: () => localStorage, // or sessionStorage
    }
  )
);

export default useStore;

Selectors

Selectors allow you to derive state from your store. This can help optimize performance by preventing unnecessary re-renders.

import React from 'react';
import useStore from './store';

function DisplayCount() {
  const count = useStore((state) => state.count);

  return <h1>{count}</h1>;
}

export default DisplayCount;

Zustand vs Redux

While Redux has been the go-to state management library for React, Zustand offers a simpler and more modern alternative. Here are some key differences:

• Boilerplate: Zustand requires less boilerplate code compared to Redux.
• Performance: Zustand is generally faster due to its simpler architecture.
• Learning Curve: Zustand is easier to learn and use, especially for beginners.

Practical Examples

Todo List with Zustand

Let’s create a simple todo list using Zustand:

import create from 'zustand';

const useStore = create((set) => ({
  todos: [],
  addTodo: (text) => set((state) => ({ todos: [...state.todos, { text, completed: false }] })),
  toggleTodo: (index) => set((state) => ({
    todos: state.todos.map((todo, i) => 
      i === index ? { ...todo, completed: !todo.completed } : todo
    ),
  })),
}));

export default useStore;

Using the Todo Store

import React, { useState } from 'react';
import useStore from './store';

function TodoList() {
  const { todos, addTodo, toggleTodo } = useStore();
  const [text, setText] = useState('');

  const handleAddTodo = () => {
    if (text.trim()) {
      addTodo(text);
      setText('');
    }
  };

  return (
    <div>
      <input
        type="text"
        value={text}
        onChange={(e) => setText(e.target.value)}
      />
      <button onClick={handleAddTodo}>Add Todo</button>
      <ul>
        {todos.map((todo, index) => (
          <li
            key={index}
            onClick={() => toggleTodo(index)}
            style={{ textDecoration: todo.completed ? 'line-through' : 'none' }}
          >
            {todo.text}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default TodoList;

FAQs

What is Zustand?

Zustand is a state management library for React that provides a simple and efficient way to manage state in your applications.

How does Zustand compare to Redux?

Zustand is simpler and requires less boilerplate code compared to Redux. It also offers better performance and a more straightforward API.

Can Zustand be used with TypeScript?

Yes, Zustand has excellent TypeScript support, making it a great choice for TypeScript projects.

Is Zustand suitable for large applications?

Yes, Zustand is scalable and can be used in both small and large applications. Its performance and simplicity make it a good choice for complex projects.

Reading Further

• React Design Patterns
• useTransition Hook in React
• useDeferredValue Hook in React
• useSyncExternalStore Hook in React

Resources

• Zustand GitHub Repository
• React Official Documentation
• Redux Official Documentation