Next.js & Zustand: A Beginner’s Guide to State Management

Written by

learnmodernjavascript

in

In the world of web development, managing state effectively is crucial for building dynamic and interactive user interfaces. As applications grow in complexity, keeping track of data and how it changes becomes increasingly challenging. This is where state management libraries come into play. Among the many options available, Zustand has emerged as a lightweight, yet powerful, solution for managing state in React applications, including those built with Next.js. This tutorial will guide you through the fundamentals of Zustand, helping you understand how to implement it in your Next.js projects to create more maintainable and efficient code.

Understanding the Problem: State Management in React

Before diving into Zustand, let’s briefly discuss why state management is essential. In React, components often need to share and update data. Without a dedicated state management solution, you might find yourself passing props down multiple levels of components (prop drilling) or using the Context API, which can become complex as your application scales.

Consider a simple e-commerce application. You might have components for displaying products, managing the shopping cart, and handling user authentication. The data related to the products, the items in the cart, and the user’s login status all represent the application’s state. Managing this state efficiently ensures that the UI accurately reflects the current data and that changes in one part of the application are correctly reflected in others.

Why Zustand? Simplicity and Performance

Zustand offers a refreshing approach to state management. Unlike some more complex libraries, Zustand prioritizes simplicity and a small bundle size. It’s built on the principle of minimal boilerplate and ease of use. Key advantages of Zustand include:

  • Lightweight: Zustand has a very small footprint, which can contribute to faster load times.
  • Simple API: The API is straightforward, making it easy to learn and integrate into your projects.
  • Hooks-based: Zustand uses React hooks, which align perfectly with the React ecosystem and make it easy to access and update state within functional components.
  • No Boilerplate: Zustand minimizes the amount of setup code required, allowing you to focus on your application logic.
  • TypeScript Friendly: Zustand provides excellent TypeScript support, which helps catch errors early and improve code maintainability.

Setting Up Your Next.js Project

If you don’t already have a Next.js project set up, create one using the following command:

npx create-next-app my-zustand-app
cd my-zustand-app

Next, install Zustand:

npm install zustand

or

yarn add zustand

Creating Your First Zustand Store

The core of Zustand is the store. A store holds your application’s state and provides methods for updating it. Let’s create a simple store to manage a counter. Create a file named store.js (or store.ts if you’re using TypeScript) in your project’s src directory or a dedicated store folder.

// src/store.js
import { create } from 'zustand';

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

export default useCounterStore;

Let’s break down this code:

  • create: This function from Zustand is used to create a store.
  • set: This function is provided by Zustand and is used to update the state. It takes a function (often referred to as an updater) or an object. If a function is provided, it receives the current state as an argument and should return an object with the updated state. If an object is provided, it merges the object with the current state.
  • count: 0: This defines the initial state of the counter, set to 0.
  • increment, decrement, reset: These are actions that modify the state. Each action uses the set function to update the count.

Using the Store in a Component

Now, let’s use this store in a Next.js component. Modify your pages/index.js file (or pages/index.tsx if using TypeScript) to look like this:

// pages/index.js
import useCounterStore from '../src/store';

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

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h1>Zustand Counter Example</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
    </div>
  );
}

export default HomePage;

In this code:

  • We import the useCounterStore hook.
  • We use the hook to access the count state and the increment, decrement, and reset actions.
  • We render the count and buttons to interact with the counter.

Run your Next.js application (npm run dev or yarn dev) and navigate to the home page (usually http://localhost:3000). You should see the counter and be able to increment, decrement, and reset it.

Adding TypeScript Support (Optional but Recommended)

If you are not already using TypeScript, it’s highly recommended. It can help to prevent errors. Here’s how you can add it to your project:

  1. Install TypeScript and related packages: 
    npm install --save-dev typescript @types/react @types/react-dom @types/node
  2. Create a tsconfig.json file:

    Run the following command in your project’s root directory. This will create a basic tsconfig.json file.

    npx tsc --init
  3. Rename your .js files to .ts or .tsx:

    Rename store.js to store.ts and pages/index.js to pages/index.tsx.

  4. Update your store with types:

    Modify store.ts to include types:

    // src/store.ts
import { create } from 'zustand';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

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

export default useCounterStore;
  5. Update your component with types (if needed):

    In pages/index.tsx, no changes are needed because the store’s types are already defined.

By adding TypeScript, you get type checking and autocompletion, making your code more robust and easier to maintain.

Advanced Zustand: Persisting State

One of the most powerful features of Zustand is its ability to persist state across page reloads. This is incredibly useful for things like user preferences, shopping carts, or any data that needs to be retained even when the user closes the browser or navigates away from your application.

To persist state, you can use the persist middleware provided by Zustand. First, install the middleware:

npm install zustand/middleware

or

yarn add zustand/middleware

Then, modify your store to include the persist middleware. Here’s an example:

// src/store.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CounterState {
  count: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

const useCounterStore = create(persist<CounterState>((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
  reset: () => set({ count: 0 }),
}), {
  name: 'counter-storage', // unique name
}));

export default useCounterStore;

Here’s what changed:

  • We imported persist from zustand/middleware.
  • We wrapped the store’s configuration with the persist function.
  • We provided a name option to persist. This is the key used to store the data in local storage. Make sure this name is unique across your application.

Now, when you reload the page, the counter’s value will be retrieved from local storage and restored. Try it out!

Advanced Zustand: Using Selectors

As your application grows, the state within your store might become more complex. You might have nested objects or arrays, and you may only need to access specific parts of the state in your components. Zustand’s selectors allow you to extract specific pieces of the state, which can help optimize performance by preventing unnecessary re-renders.

Let’s imagine our counter also has a history feature. We want to keep track of the last few counter values.

// src/store.ts
import { create } from 'zustand';
import { persist } from 'zustand/middleware';

interface CounterState {
  count: number;
  history: number[];
  limit: number;
  increment: () => void;
  decrement: () => void;
  reset: () => void;
}

const useCounterStore = create(persist<CounterState>((set, get) => ({
  count: 0,
  history: [],
  limit: 5,
  increment: () =>
    set((state) => {
      const newHistory = [state.count, ...state.history].slice(0, state.limit);
      return { count: state.count + 1, history: newHistory };
    }),
  decrement: () =>
    set((state) => {
      const newHistory = [state.count, ...state.history].slice(0, state.limit);
      return { count: state.count - 1, history: newHistory };
    }),
  reset: () => set({ count: 0, history: [] }),
}), {
  name: 'counter-storage', // unique name
}));

export default useCounterStore;

Now, let’s modify our component to display the history and use selectors. First, let’s create a new component to display the history, as an example:

// components/CounterHistory.jsx
import useCounterStore from '../src/store';

function CounterHistory() {
  // Use a selector to only get the history from the store
  const history = useCounterStore((state) => state.history);

  return (
    <div>
      <h3>History:</h3>
      <ul>
        {history.map((value, index) => (
          <li key={index}>{value}</li>
        ))}
      </ul>
    </div>
  );
}

export default CounterHistory;

Then, modify pages/index.tsx:

// pages/index.tsx
import useCounterStore from '../src/store';
import CounterHistory from '../components/CounterHistory';

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

  return (
    <div style={{ textAlign: 'center', padding: '20px' }}>
      <h1>Zustand Counter Example</h1>
      <p>Count: {count}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={decrement}>Decrement</button>
      <button onClick={reset}>Reset</button>
      <CounterHistory />
    </div>
  );
}

export default HomePage;

In the CounterHistory component, we use a selector: useCounterStore((state) => state.history). This tells Zustand to only re-render the CounterHistory component when the history part of the state changes. If we didn’t use a selector, the CounterHistory component would re-render whenever *any* part of the Zustand store changed, even if the history didn’t. This optimization can be crucial for performance in more complex applications.

Common Mistakes and How to Fix Them

When working with Zustand, there are a few common pitfalls to be aware of:

  • Incorrectly updating state: Make sure you’re using the set function correctly. The first argument to set is either an object or a function that receives the current state and returns an object with the updated state. Incorrect usage can lead to unexpected behavior.
  • Forgetting to use selectors: If you are only using a small part of the state in a component, use selectors to avoid unnecessary re-renders. This is particularly important in large and complex applications.
  • Not providing a unique name for persist: If you use the persist middleware, make sure to provide a unique name for the store. Otherwise, different stores might overwrite each other’s data in local storage.
  • Over-reliance on Zustand for everything: While Zustand is excellent for managing application state, it’s not a replacement for other tools. For instance, Zustand is not a good choice for managing server-side state or complex data fetching. Consider using libraries like React Query or SWR for these tasks.
  • Mutating state directly: Never directly mutate the state within the set function. Always return a new object with the updated state. Mutating the state directly can lead to unpredictable behavior and make debugging difficult.

Key Takeaways and Best Practices

  • Simplicity is key: Zustand’s minimalist approach makes it easy to learn and integrate into your projects.
  • Use selectors for performance: Selectors optimize component re-renders by only updating components when the relevant state changes.
  • Leverage the persist middleware: Use persist to easily save and restore state, enhancing user experience.
  • Embrace TypeScript: TypeScript support can significantly improve code quality and maintainability.
  • Keep it organized: As your application grows, consider organizing your stores into separate files or folders for better maintainability.

FAQ

  1. How does Zustand compare to Redux?

    Zustand is much simpler than Redux. Redux has more boilerplate and a steeper learning curve. Zustand is designed to be lightweight and easy to use, making it a good choice for smaller to medium-sized projects. Redux is often preferred for very large and complex applications where its advanced features and ecosystem are beneficial.

  2. Can I use Zustand with server-side rendering (SSR)?

    Yes, you can use Zustand with SSR in Next.js. However, you need to be mindful of the fact that Zustand stores are singletons. This means that the store is shared across all requests on the server. To avoid conflicts, you might need to create a new store instance for each request or use a mechanism to reset the store after each request. The persist middleware can also be used on the server, but you might need to use a different storage adapter (e.g., in-memory storage) instead of local storage.

  3. Is Zustand suitable for all types of state?

    Zustand is excellent for managing local component state and application-wide state that doesn’t require complex data fetching or server-side interactions. For data fetching, consider using libraries like React Query or SWR. For managing global state in very large applications, you might consider Redux or other more sophisticated state management solutions.

  4. How do I debug Zustand stores?

    Debugging Zustand stores is relatively straightforward. You can use the browser’s developer tools to inspect the state of your components. You can also add console logs within your store actions to track state changes. For more advanced debugging, you can use browser extensions or custom middleware to log state changes and actions.

Zustand offers a pragmatic and efficient approach to state management in Next.js and React applications. Its simplicity, combined with its powerful features like persistence and selectors, makes it an excellent choice for developers of all levels. By understanding the fundamentals and applying the best practices outlined in this guide, you can leverage Zustand to build more robust, maintainable, and performant web applications. As you continue your journey in web development, remember that choosing the right tools for the job is essential. Zustand, with its focus on simplicity and ease of use, empowers you to manage state effectively and build exceptional user experiences. Embrace the power of Zustand, and watch your applications thrive.

More posts