Zustand for client state in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ component_behavior

intermediate

What is the output of this Zustand store usage?

Consider this Zustand store and component code in a Next.js app. What will the component display when rendered?

NextJS

import create from 'zustand';

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

export default function Counter() {
  const { count, increment } = useStore();
  return (
    <>
      <p>Count: {count}</p>
      <button onClick={increment}>Add</button>
    </>
  );
}

A The component shows 'Count: 0' initially and increments count by 1 each time the button is clicked.

B The component shows 'Count: 1' initially and increments count by 1 each time the button is clicked.

C The component shows 'Count: 0' but clicking the button does not change the count.

D The component throws a runtime error because the store is not initialized.

💡 Hint

Remember Zustand's create function initializes state and actions. The initial count is 0.

The Zustand store initializes count to 0. The increment function updates the state by adding 1. The component reads count and calls increment on button click, so the count updates correctly.

❓ state_output

intermediate

What is the value of count after these actions?

Given this Zustand store and sequence of actions, what is the final value of count?

NextJS

import create from 'zustand';

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

// Actions executed in order:
// 1. increment()
// 2. increment()
// 3. reset()
// 4. increment()

A 3

B 0

C 2

D 1

💡 Hint

Apply each action step-by-step starting from count = 5.

Starting at 5, two increments add 2 (count = 7), reset sets count to 0, then one increment makes count 1.

📝 Syntax

advanced

Which option correctly creates a Zustand store with a toggle boolean?

You want to create a Zustand store with a boolean state 'isOpen' and a toggle function that flips its value. Which code is correct?

A const useStore = create(set => ({ isOpen: false, toggle: () => set(state => { isOpen = !state.isOpen }) }));

B const useStore = create(set => ({ isOpen: false, toggle: () => set(state => ({ isOpen: !state.isOpen })) }));

C const useStore = create(set => ({ isOpen: false, toggle: () => set({ isOpen: !isOpen }) }));

D const useStore = create({ isOpen: false, toggle: () => set(state => ({ isOpen: !state.isOpen })) });

💡 Hint

Remember the create function expects a function with set parameter returning an object.

Option B correctly uses create with a function taking set and returns an object with state and toggle function. The toggle uses set with a function accessing current state.

Option B passes an object directly, which is invalid. Option B uses undefined 'isOpen' variable outside state. Option B uses a block without return in set, causing no state update.

🔧 Debug

advanced

Why does this Zustand store not update the component on state change?

Given this store and component, why does the component not re-render when the button is clicked?

NextJS

import create from 'zustand';

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

export default function Counter() {
  const count = useStore(state => state.count);
  const increment = useStore(state => state.increment);
  return (
    <>
      <p>{count}</p>
      <button onClick={increment}>Add</button>
    </>
  );
}

A The component does not subscribe to the store, so it never re-renders.

B The set function is missing in the store creation, so state cannot update.

C The increment function uses 'count' variable which is undefined in its scope, so state never updates.

D The button's onClick handler is not correctly assigned, so increment is never called.

💡 Hint

Check how the increment function accesses the current count value.

The increment function uses 'count' which is not defined inside its scope. It should use set(state => ({ count: state.count + 1 })) to access current state. Because of this, the state update does not happen and component does not re-render.

🧠 Conceptual

expert

Which statement about Zustand and Next.js client state is true?

Select the correct statement about using Zustand for client state management in a Next.js app.

A Zustand stores are client-side only and should not be used to share state between server and client without hydration handling.

B Zustand stores should be created inside React components to isolate state per component instance.

C Zustand stores are global and persist across server and client rendering automatically without extra setup.

D Zustand requires wrapping the Next.js app with a provider component to work correctly.

💡 Hint

Think about how Zustand manages state and Next.js rendering phases.

Zustand stores live on the client side and do not share state automatically between server and client. To use Zustand with Next.js, you must handle hydration carefully. Option A correctly states this.

Option A is false because Zustand does not persist state across server and client automatically. Option A is false because stores are usually created outside components to be global. Option A is false because Zustand does not require a provider.