0Pricing
Next.js 15 Fullstack Web Apps · Lesson

Client-Side State with Zustand/Jotai

Implement lightweight and performant client-side global state management using Zustand or Jotai.

Client-Side State with Zustand/Jotai is a free Next.js 15 Fullstack Web Apps lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Next.js 15 Fullstack Web Apps learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Global State: Beyond Local

In React, you've learned about local state with useState, which is great for data used only within a single component.

But what if data needs to be shared across many components, or deeply nested components, without 'prop drilling' (passing props down through many layers)? This is where client-side global state management comes in.

Global state allows any component to access or update shared data directly, simplifying complex data flows and making your application more maintainable.

Meet Zustand: Simple State

Zustand is a small, fast, and scalable state management solution for React. Its API is simple and hooks-based, making it very intuitive to learn and use.

  • Minimalistic: Less boilerplate code.
  • Fast: Optimized for performance.
  • Flexible: Works with any React component.
  • Hooks-based: Feels natural to React developers.

Get Started with Zustand

Before we dive into creating stores, you'll need to install Zustand in your Next.js project. It's a simple npm or yarn command.

Open your terminal in the project root and run:

npm install zustand

Or if you prefer Yarn:

yarn add zustand

Once installed, you're ready to define your first store!

Crafting a Zustand Store

A Zustand store is created using the create function. This function takes a callback that defines your initial state and actions.

Think of a store as a central hub for specific pieces of global data. Let's create a basic counter store:

import { create } from 'zustand';

// Define your store
const useCounterStore = create((set) => ({
  count: 0,
}));

// This store can be imported and used in your React components.
// It's not runnable on its own, but defines the global state structure.

Store State & Actions

Beyond just holding state, a store also contains actions – functions that modify the state. The set function provided by Zustand allows you to update the store's state.

Here's how we add increment and decrement actions to our counter store:

import { create } from 'zustand';

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

// This store now has both state (count) and actions (increment, decrement).

Connect Components to Store

To use the global state in your React components, you simply import the store hook (e.g., useCounterStore) and call it. You can select specific pieces of state or actions.

Let's create a component that displays the current count from our store:

import { create } from 'zustand';

// Define your store (as in previous scenes)
const useCounterStore = create((set) => ({
  count: 0,
  increment: () => set((state) => ({ count: state.count + 1 })),
  decrement: () => set((state) => ({ count: state.count - 1 })),
}));

// A React component that uses the store
export default function CounterDisplay() {
  // Select the 'count' state from the store
  const count = useCounterStore((state) => state.count);

  return (
    <div>
      <p>Current Count: {count}</p>
    </div>
  );
}

// This component can be rendered in a Next.js page or another component.

Interactive Counter Example

Now let's make our counter interactive! We'll add buttons that call the increment and decrement actions defined in our store.

This shows how components can both read from and write to the global state, keeping everything synchronized.

import { create } from 'zustand';

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

// A React component that uses the store and its actions
export default function InteractiveCounter() {
  // Select both state and actions
  const { count, increment, decrement } = useCounterStore();

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

// This component is fully runnable and demonstrates Zustand in action.

Efficient State Selection

By default, if any part of the store's state changes, components that use the store might re-render. To optimize this, you can use selectors.

A selector is a function you pass to useStore that picks only the specific data your component needs. If only that selected data changes, the component re-renders.

import { create } from 'zustand';

// A more complex store with multiple states
const useSettingsStore = create((set) => ({
  theme: 'dark',
  fontSize: 16,
  toggleTheme: () => set((state) => ({ theme: state.theme === 'dark' ? 'light' : 'dark' })),
  setFontSize: (size) => set({ fontSize: size }),
}));

// Component only cares about 'theme'
export default function ThemeDisplay() {
  // Using a selector to only subscribe to 'theme'
  const theme = useSettingsStore((state) => state.theme);

  return (
    <p>Current Theme: <b>{theme}</b></p>
  );
}

// If fontSize changes, ThemeDisplay will NOT re-render because it only selects 'theme'.

Zustand Best Practices

To keep your Zustand stores clean and efficient:

  • Immutability: Always update state immutably. Don't directly modify objects or arrays in state; create new ones.
  • Separate Concerns: Keep related state and actions in the same store. Create multiple stores for different domains (e.g., useUserStore, useCartStore).
  • Selectors: Use selectors to prevent unnecessary re-renders in components.
  • Middleware: For advanced features like persistence or logging, explore Zustand's middleware options.

Zustand Knowledge Check

Zustand offers a flexible and lightweight approach to global state management. Based on what you've learned, choose the correct statements about its benefits and characteristics.

Zustand: A Quick Recap

Congratulations! You've learned the fundamentals of client-side global state management with Zustand.

  • We explored why global state is essential for complex apps.
  • You saw how to define a Zustand store with state and actions using create.
  • We learned to connect React components to the store and interact with its state and actions.
  • Finally, we discussed how selectors can optimize component re-renders.

Zustand empowers you to manage shared data efficiently, making your Next.js applications more scalable and easier to maintain.

Frequently asked questions

Is the “Client-Side State with Zustand/Jotai” lesson free?

Yes — the full text of “Client-Side State with Zustand/Jotai” is free to read here on the web, and the Next.js 15 Fullstack Web Apps course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Next.js 15 Fullstack Web Apps course, upgrade to CoddyKit PRO.

What will I learn in “Client-Side State with Zustand/Jotai”?

Implement lightweight and performant client-side global state management using Zustand or Jotai. You practise Next.js 15 Fullstack Web Apps with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Next.js 15 Fullstack Web Apps?

No prior experience is required. Next.js 15 Fullstack Web Apps on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “Client-Side State with Zustand/Jotai” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Next.js 15 Fullstack Web Apps lesson?

Yes. Every Next.js 15 Fullstack Web Apps lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

  1. React Query for Server State
  2. Client-Side State with Zustand/Jotai
  3. Server-Side Caching Strategies
  4. Optimistic Updates and Cache Invalidation
← Back to Next.js 15 Fullstack Web Apps