Zustand for client state in NextJS - Step-by-Step Execution

Concept Flow - Zustand for client state

Create Zustand store

↓

Define state and actions

↓

Use store in component

↓

Component renders with state

↓

User triggers action

↓

Action updates state

↓

Component re-renders with new state

Zustand creates a store with state and actions, components use the store to read state and trigger updates, causing re-render.

Execution Sample

NextJS

import { create } from 'zustand';

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

This code creates a Zustand store with a count state and an increment action to increase count.

Execution Table

Step	Action	State Before	State After	Component Rendered	Output
1	Initialize store	{}	{ count: 0 }	Initial render	count = 0
2	Component reads count	{ count: 0 }	{ count: 0 }	Render with count=0	Displayed 0
3	User clicks increment	{ count: 0 }	{ count: 1 }	Re-render	Displayed 1
4	User clicks increment	{ count: 1 }	{ count: 2 }	Re-render	Displayed 2
5	No further action	{ count: 2 }	{ count: 2 }	No render	Displayed 2

💡 User stops clicking, state remains stable, no re-render occurs.

Variable Tracker

Variable	Start	After 1	After 2	Final
count	0	1	2	2

Key Moments - 3 Insights

Why does the component re-render after calling increment?

Because the increment action updates the state 'count', Zustand triggers a re-render to show the new value, as seen in steps 3 and 4 of the execution_table.

Does the component re-render if the state does not change?

No, if the state stays the same, Zustand does not trigger a re-render. Step 5 shows no render because 'count' did not change.

How does the component get the current state value?

The component calls the store hook (useStore) to read the current 'count' value before rendering, shown in step 2.

Visual Quiz - 3 Questions

Look at the execution_table, what is the value of 'count' after step 3?

A 0

B 1

C 2

D Undefined

💡 Hint

Check the 'State After' column in row with Step 3.

At which step does the component first re-render with updated state?

A Step 3

B Step 2

C Step 1

D Step 5

💡 Hint

Look for the first 'Re-render' in the 'Component Rendered' column.

If the increment action did not update the state, what would happen in the execution_table?

A State would reset to 0

B Component would re-render anyway

C State After would be same as State Before and no re-render

D Component would crash

💡 Hint

Refer to step 5 where no state change means no re-render.

Concept Snapshot

Zustand creates a simple store with state and actions.
Use the store hook in components to read state and trigger updates.
Calling an action updates state and causes component re-render.
No state change means no re-render.
Ideal for client state in Next.js apps.

Full Transcript

Zustand is a small library to manage client state in Next.js. You create a store with state variables and actions to update them. Components use the store hook to read state and display it. When an action changes the state, Zustand triggers a re-render so the component shows the new value. If the state does not change, the component does not re-render. This makes state management simple and efficient.

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