Zustand for client state in NextJS - Mini Project: Build & Apply

Zustand for client state

📖 Scenario: You are building a simple Next.js app that tracks a counter value on the client side. You want to use Zustand, a lightweight state management library, to keep the counter state and update it from different components.

🎯 Goal: Create a Zustand store to hold a count value and functions to increment and decrement the count. Then use this store in a React component to display and update the counter.

📋 What You'll Learn

Create a Zustand store with count, increment, and decrement

Use the Zustand store in a React functional component

Display the current count value

Add buttons to call increment and decrement functions

Follow Next.js and React 19+ functional component patterns

💡 Why This Matters

🌍 Real World

Zustand is used in React and Next.js apps to manage client-side state simply and efficiently without complex setup.

💼 Career

Understanding Zustand helps frontend developers build scalable React apps with clean state management, a valuable skill in modern web development.

1

Create the Zustand store

Create a Zustand store in a file called useCounterStore.js with a state variable count initialized to 0. Also add two functions: increment and decrement that increase or decrease count by 1.

NextJS

// Your code here to create Zustand store with count, increment, decrement

Hint

Use create from Zustand to define a store with count and two functions that update count.

2

Import the store and set up the component

In a React component file called Counter.js, import useCounterStore from ./useCounterStore.js. Create a functional component called Counter that uses useCounterStore to get the count value.

NextJS

import { useCounterStore } from './useCounterStore';

// Your code here to create Counter component and get count from store

Hint

Use the hook useCounterStore inside the component to get the count value.

3

Add buttons to update the count

Inside the Counter component, use useCounterStore to get the increment and decrement functions. Add two buttons: one calls increment on click, the other calls decrement on click.

NextJS

import { useCounterStore } from './useCounterStore';

export default function Counter() {
  const count = useCounterStore(state => state.count);
  // Your code here to get increment and decrement and add buttons
}

Hint

Get increment and decrement from the store and add buttons with onClick handlers.

4

Add accessibility and export the component

Ensure the buttons have aria-label attributes for accessibility. Export the Counter component as default. The component should show the count and two accessible buttons to change it.

NextJS

import { useCounterStore } from './useCounterStore';

// Your code here to finalize and export Counter component with accessibility

Hint

Make sure the buttons have aria-label for screen readers and the component is exported as default.

Practice

1. What is the main purpose of using zustand in a Next.js app?

easy

A. To manage and share client-side state easily across components

B. To handle server-side rendering automatically

C. To style components with CSS-in-JS

D. To fetch data from external APIs

Solution

1. Step 1: Understand Zustand's role

   Zustand is a small library designed to manage state on the client side simply and clearly.

2. Step 2: Compare options with Zustand's purpose

   Only To manage and share client-side state easily across components matches Zustand's main use: managing and sharing client state across components.

3. Final Answer:

   To manage and share client-side state easily across components -> Option A

4. Quick Check:

   Zustand = client state management [OK]

Hint: Zustand is for client state, not styling or server tasks [OK]

Common Mistakes:

• Confusing Zustand with data fetching libraries
• Thinking Zustand handles styling
• Assuming Zustand manages server rendering

2. Which of the following is the correct way to create a Zustand store in Next.js?

easy

A. const useStore = createStore((get) => ({ count: 0, increment: () => get(state => state.count + 1) }))

B. const useStore = createStore({ count: 0, increment() { this.count++ } })

C. const useStore = new Zustand({ count: 0, increment() { this.count++ } })

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

Solution

1. Step 1: Recall Zustand store creation syntax

   Zustand uses the create function with a callback receiving set to update state.

2. Step 2: Check each option's syntax

   const useStore = create((set) => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })) })) correctly uses create with set and updates state immutably. Others use invalid or non-existent APIs.

3. Final Answer:

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

4. Quick Check:

   Use create + set callback = const useStore = create((set) => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })) })) [OK]

Hint: Zustand store uses create() with set callback [OK]

Common Mistakes:

• Using createStore instead of create
• Trying to mutate state directly
• Confusing get and set functions

3. Given this Zustand store code:

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

What will be logged to the console?

medium

A. 1

B. Error

C. undefined

D. 0

Solution

1. Step 1: Understand initial state and increment call

   The store starts with count = 0. Calling increment() increases count by 1.

2. Step 2: Check console.log output

   After increment(), count becomes 1, so logging count outputs 1.

3. Final Answer:

   1 -> Option A

4. Quick Check:

   Increment changes count 0 -> 1 [OK]

Hint: Increment adds 1, so count becomes 1 [OK]

Common Mistakes:

• Assuming state doesn't update immediately
• Confusing getState() with useStore() hook
• Expecting initial value without increment

4. Identify the error in this Zustand store code:

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

medium

A. Missing initial state declaration

B. Using this inside increment does not update Zustand state

C. The create function is not imported

D. The increment function should be async

Solution

1. Step 1: Analyze increment function behavior

   Using this.count += 1 tries to mutate the object directly, which does not update Zustand's internal state.

2. Step 2: Understand correct state update in Zustand

   Zustand requires calling set to update state immutably; direct mutation won't trigger updates.

3. Final Answer:

   Using this inside increment does not update Zustand state -> Option B

4. Quick Check:

   Direct mutation with this = no state update [OK]

Hint: Always use set() to update Zustand state, not this [OK]

Common Mistakes:

• Mutating state directly with this
• Forgetting to import create
• Thinking async is needed for increment

5. You want to create a Zustand store that holds a list of tasks and a function to add a new task only if it is not empty. Which code snippet correctly implements this logic?

hard

A. const useStore = create(set => ({ tasks: [], addTask: (task) => set(state => ({ tasks: [...state.tasks, task] })) }))

B. const useStore = create(set => ({ tasks: [], addTask: (task) => { if (!task) set(state => ({ tasks: [...state.tasks, task] })) } }))

C. const useStore = create(set => ({ tasks: [], addTask: (task) => { if (!task) return; set(state => ({ tasks: [...state.tasks, task] })) } }))

D. const useStore = create(set => ({ tasks: [], addTask: (task) => set(state => { if (!task) return { tasks: [...state.tasks, task] } else return state }) }))

Solution

1. Step 1: Understand the requirement to add task only if not empty

   The function must check if the task is empty and skip adding if so.

2. Step 2: Analyze each option's logic

   const useStore = create(set => ({ tasks: [], addTask: (task) => set(state => ({ tasks: [...state.tasks, task] })) })) adds unconditionally.
   const useStore = create(set => ({ tasks: [], addTask: (task) => { if (!task) set(state => ({ tasks: [...state.tasks, task] })) } })) adds only if !task (when empty).
   const useStore = create(set => ({ tasks: [], addTask: (task) => set(state => { if (!task) return { tasks: [...state.tasks, task] } else return state }) })) adds only if !task inside the set updater.
   const useStore = create(set => ({ tasks: [], addTask: (task) => { if (!task) return; set(state => ({ tasks: [...state.tasks, task] })) } })) correctly returns early if !task (empty), then calls set to add non-empty task.

3. Final Answer:

   const useStore = create(set => ({ tasks: [], addTask: (task) => { if (!task) return; set(state => ({ tasks: [...state.tasks, task] })) } })) -> Option C

4. Quick Check:

   Early return on empty task + set call = const useStore = create(set => ({ tasks: [], addTask: (task) => { if (!task) return; set(state => ({ tasks: [...state.tasks, task] })) } })) [OK]

Hint: Return early if empty, then call set to update state [OK]

Common Mistakes:

• Adding tasks without checking if empty
• Misusing set callback with conditional returns
• Not returning early to prevent adding empty tasks