​
Installation

To install Zustand, run the following command:

Terminal
pnpm add zustand

​
Usage

Here is an example of how to use Zustand for state management:

counter.tsx
import create from 'zustand';

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

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

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

In this example, the create function from Zustand is used to create a store with a count state and increment and decrement actions. The useStore hook is then used in the Counter component to access the state and actions.

​
Benefits

  • Simple API: Zustand provides a simple and intuitive API for managing state in your React application.
  • Performance: Zustand is optimized for performance, making it suitable for large-scale applications.
  • Scalability: Zustand is scalable and can be used to manage state in applications of any size.

For more information and detailed documentation, visit the Zustand website.

NUQSApps