Simplified State Management in React with Zustand

State management in React can be a complex topic, with many libraries to choose from. While Redux and the built-in Context API are popular, they can sometimes introduce a lot of boilerplate. Enter Zustand, a small, fast, and scalable state management solution that simplifies the process.

Why Zustand?

Zustand stands out for several reasons:

• Minimal Boilerplate: No need for actions, reducers, or dispatchers. You create a store with a simple hook.
• Hook-based API: It feels very "React-y" and is easy to integrate into your components.
• Fast: It only re-renders components that use the specific state that has changed, avoiding unnecessary re-renders.
• Small Bundle Size: It's a very lightweight library.

Creating Your First Store

Let's create a simple store to manage a counter.

1. Install Zustand:

   npm install zustand
   

2. Create the store file (store.ts):

   import { create } from "zustand";
   
   interface CounterState {
     count: number;
     increment: () => void;
     decrement: () => void;
   }
   
   const useCounterStore = create<CounterState>((set) => ({
     count: 0,
     increment: () => set((state) => ({ count: state.count + 1 })),
     decrement: () => set((state) => ({ count: state.count - 1 })),
   }));
   
   export default useCounterStore;
   

That's it! You've created a fully functional state management store.

Using the Store in Components

Using the store in your React components is incredibly intuitive. You just call the hook.

import React from "react";
import useCounterStore from "./store";

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

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

Zustand will automatically subscribe the Counter component to changes in the store. When increment or decrement is called, set updates the state, and the component re-renders with the new count.

Handling Asynchronous Actions

Zustand makes it easy to handle asynchronous actions without any extra middleware.

// store.ts
import { create } from "zustand";

interface UserState {
  user: { name: string } | null;
  fetchUser: () => Promise<void>;
}

const useUserStore = create<UserState>((set) => ({
  user: null,
  fetchUser: async () => {
    const response = await fetch("https://api.example.com/user");
    const user = await response.json();
    set({ user });
  },
}));

You can then call fetchUser from your component, and the state will be updated once the data is fetched.

Conclusion

Zustand offers a refreshing and pragmatic approach to state management in React. Its simplicity, performance, and minimal API make it an excellent choice for projects of all sizes. If you're looking for a state management library that gets out of your way and lets you focus on building your application, give Zustand a try.