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.