Zustand for client state in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to create a Zustand store with a count state initialized to 0.

NextJS

import create from 'zustand';

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

Drag options to blanks, or click blank then click option'

A0

B1

Cnull

Dundefined

Attempts:

3 left

💡 Hint

Common Mistakes

Using 1 as the initial count instead of 0.

Setting count to null or undefined which breaks the counter.

The initial state for count should be 0 to start counting from zero.

2fill in blank

medium

Complete the code to use the Zustand store inside a React component to get the count value.

NextJS

import React from 'react';
import useStore from './store';

export default function Counter() {
  const count = useStore([1]);
  return <div>Count: {count}</div>;
}

Drag options to blanks, or click blank then click option'

Astate => state.increment

Bstate => state.setCount

Cstate => state.count

Dstate => state.reset

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting the increment function instead of the count value.

Trying to select a non-existent setCount or reset property.

To get the current count value from the store, select state.count.

3fill in blank

hard

Fix the error in the code to correctly update the count state using the increment function from Zustand.

NextJS

import React from 'react';
import useStore from './store';

export default function Counter() {
  const increment = useStore([1]);
  return <button onClick={increment}>Add 1</button>;
}

Drag options to blanks, or click blank then click option'

Astate => state.count

Bstate => state.setCount

Cstate => state.reset

Dstate => state.increment

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting the count value instead of the increment function.

Trying to select non-existent functions like setCount or reset.

The increment function is used to update the count, so select state.increment.

4fill in blank

hard

Fill both blanks to create a Zustand store with a count state and a decrement function that subtracts 1.

NextJS

import create from 'zustand';

const useStore = create(set => ({
  count: [1],
  decrement: () => set(state => ({ count: state.count [2] 1 }))
}));

Drag options to blanks, or click blank then click option'

A0

B+

C-

D1

Attempts:

3 left

💡 Hint

Common Mistakes

Using plus instead of minus for decrement.

Starting count at 1 instead of 0.

The count starts at 0, and decrement subtracts 1 using the minus operator.

5fill in blank

hard

Fill all three blanks to create a Zustand store with a count state, an increment function, and a reset function that sets count back to 0.

NextJS

import create from 'zustand';

const useStore = create(set => ({
  count: [1],
  increment: () => set(state => ({ count: state.count [2] 1 })),
  reset: () => set({ count: [3] })
}));

Drag options to blanks, or click blank then click option'

A1

B+

C0

D-

Attempts:

3 left

💡 Hint

Common Mistakes

Using minus instead of plus for increment.

Setting reset count to 1 instead of 0.

Count starts at 0, increment adds 1, and reset sets count back to 0.

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