What is Zustand

Zustand: Simple, Fast & Scalable Bearbones State-Management

Zustand is a small, fast and scalable bearbones state-management solution using simplified flux principles. It's gaining popularity in the React ecosystem due to its ease of use, minimal boilerplate, and performance benefits. Unlike Redux, it doesn't require a lot of setup or complex concepts like reducers and action creators.

Why Zustand?

• Simplicity:Zustand is incredibly easy to learn and use. The API is minimal and intuitive.
• Minimal Boilerplate:Compared to Redux, Zustand requires significantly less code to achieve the same results.
• Performance:Zustand is optimized for performance. It only re-renders components that actually depend on the changed state. It leverages React’s built-in memoization features effectively.
• Scalability:While simple, Zustand can scale to handle complex applications. You can split your state into multiple stores.
• TypeScript Friendly:Zustand is designed with TypeScript in mind and provides excellent type support.
• No Context Provider Required:Zustand doesn’t rely on React’s Context API for its core functionality, though it can be used alongside it.
• Middleware Support:Zustand supports middleware for adding features like persistence, logging, or asynchronous actions.

Core Concepts

1. create:The primary function for creating a Zustand store. It takes a single argument: an object with astateproperty and optionalgettersandsetters.
2. state:The initial state of your store. This can be any valid JavaScript value (object, array, number, string, etc.).
3. getters(Optional):Functions that allow you to derive data from the state. They are read-only and don’t modify the state directly. Useful for computed properties.
4. setters(Optional):Functions that allow you to update the state. They take the current state as an argument and return the new state. These are the only way to modify the state. Can also be written as partial setters (updating only a portion of the state).
5. subscribe(Optional):A function that allows you to listen for state changes. Useful for side effects like logging or syncing with external systems.

Basic Example

import { create } from 'zustand';

const useBearStore = create((set) => ({
  bears: 0,
  addBear: () => set((state) => ({ bears: state.bears + 1 })),
  removeBear: () => set((state) => ({ bears: state.bears - 1 })),
}));

// In a React component:
function BearCounter() {
  const bears = useBearStore((state) => state.bears);
  const addBear = useBearStore((state) => state.addBear);
  const removeBear = useBearStore((state) => state.removeBear);

  return (
    <div>
      Bears: {bears}
      <button onClick={addBear}>Add Bear</button>
      <button onClick={removeBear}>Remove Bear</button>
    </div>
  );
}

Explanation:

• create((set) => ({ ... })) creates a Zustand store.
• set is a function provided by Zustand that allows you to update the state.
• useBearStore is a custom hook that returns a slice of the store's state and actions.
• We use selective state and action access within the component using the hook. This is key to performance - components only re-render when the data they use changes.

Advanced Features

• Partial Updates: You can update only a portion of the state using partial setters.

  set((state) => ({ count: state.count + 1 })); // Updates only the 'count' property
  

• Immutability: Zustand encourages immutability. Always return a new state object when updating. This helps with change detection and performance.

• Middleware: Zustand supports middleware for adding functionality like:

  • Persistence: Saving the state to local storage.
  • Logging: Logging state changes to the console.
  • Asynchronous Actions: Handling asynchronous operations like API calls.

• Multiple Stores: You can create multiple stores to organize your state.

• Devtools Integration: Zustand integrates with React DevTools for debugging.

Comparison with Redux

Resources

• Official Documentation: https://zustand.dev/
• GitHub Repository: https://github.com/pmndrs/zustand
• Examples: https://github.com/pmndrs/zustand/tree/main/examples