Zustand as lightweight alternative in React Native - 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.

React Native

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 instead of 0 as the initial count.

Setting count to null or undefined which causes errors.

The count state should start at 0 to represent an initial count.

2fill in blank

medium

Complete the code to read the count value from the Zustand store inside a React Native component.

React Native

import React from 'react';
import { Text, Button, View } from 'react-native';
import useStore from './store';

export default function Counter() {
  const count = useStore(state => state.[1]);
  return (
    <View>
      <Text>{count}</Text>
    </View>
  );
}

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

Aincrement

Bset

Ccount

Dstate

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting 'increment' which is a function, not the value.

Using 'set' or 'state' which are not state properties.

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

3fill in blank

hard

Fix the error in the code to call the increment function from the Zustand store on button press.

React Native

import React from 'react';
import { Button } from 'react-native';
import useStore from './store';

export default function IncrementButton() {
  const increment = useStore(state => state.[1]);
  return <Button title="Add" onPress={increment} />;
}

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

Aupdate

Bincrement

Cset

Dcount

Attempts:

3 left

💡 Hint

Common Mistakes

Selecting 'count' which is a number, not a function.

Using 'set' or 'update' which are not defined in the store.

The increment function is stored under 'increment' in the Zustand store and should be selected to call on press.

4fill in blank

hard

Fill both blanks to create a Zustand store with a boolean 'darkMode' state and a toggle function.

React Native

import { create } from 'zustand';

const useStore = create(set => ({
  darkMode: [1],
  toggleDarkMode: () => set(state => ({ darkMode: !state.[2] }))
}));

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

Afalse

Btrue

CdarkMode

Dtoggle

Attempts:

3 left

💡 Hint

Common Mistakes

Starting darkMode as true which is less common.

Negating a wrong state property name.

The darkMode state starts as false. The toggle function flips the current darkMode value by negating state.darkMode.

5fill in blank

hard

Fill all three blanks to create a Zustand store with a list of items, an addItem function, and a removeItem function.

React Native

import { create } from 'zustand';

const useStore = create(set => ({
  items: [],
  addItem: item => set(state => ({ items: [...state.[1], [2]] })),
  removeItem: item => set(state => ({ items: state.items.filter(i => i !== [3]) }))
}));

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

Aitems

Bitem

Attempts:

3 left

💡 Hint

Common Mistakes

Using wrong variable names causing errors.

Not spreading the existing items array when adding.

To add an item, spread the current 'items' array and add the new 'item'. To remove, filter out the 'item' from the array.

Practice

1. What is the main purpose of Zustand in React Native apps?

easy

A. To manage app state in a simple and lightweight way

B. To create complex animations

C. To handle network requests

D. To style components with CSS

Solution

1. Step 1: Understand Zustand's role

   Zustand is designed to manage state, which means keeping track of data that changes in the app.

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

   Options B, C, and D relate to animations, network, and styling, which are not Zustand's focus.

3. Final Answer:

   To manage app state in a simple and lightweight way -> Option A

4. Quick Check:

   Zustand = simple state management [OK]

Hint: Zustand is about state, not styling or animations [OK]

Common Mistakes:

• Confusing Zustand with animation libraries
• Thinking Zustand handles network calls
• Assuming Zustand is for styling

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

easy

A. const useStore = new Store({ count: 0, increment: () => count++ })

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

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

D. const useStore = createStore(() => ({ count: 0, increment: () => count++ }))

Solution

1. Step 1: Recall Zustand store syntax

   Zustand uses the create function with a callback that receives 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 })) })) matches Zustand's pattern with create and set. Options A, B, and D use incorrect functions or syntax.

3. Final Answer:

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

4. Quick Check:

   Use create with 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
• Not passing set function
• Incorrect increment function syntax

3. Given this Zustand store code:

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

function Counter() {
  const count = useStore(state => state.count)
  const increment = useStore(state => state.increment)
  increment()
  return {count}
}

What will be displayed when Counter renders?

medium

A. undefined

B. 1

C. 0

D. Error

Solution

1. Step 1: Understand state updates in render

   The increment function is called inside the component body, but React state updates are asynchronous and won't reflect immediately in the same render.

2. Step 2: Determine displayed count value

   Since increment updates state after render, the displayed count remains the initial 0 during this render.

3. Final Answer:

   0 -> Option C

4. Quick Check:

   State updates async, initial render shows 0 [OK]

Hint: State changes don't show immediately in same render [OK]

Common Mistakes:

• Assuming increment updates count instantly
• Expecting count to be 1 immediately
• Confusing state update timing

4. Identify the error in this Zustand store code:

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

medium

A. Using count without accessing state inside set

B. Missing initial count value

C. Using arrow function incorrectly

D. Not returning an object from create

Solution

1. Step 1: Check how count is used in set

   The increment function uses count directly, but count is not defined in that scope; it should access state.count.

2. Step 2: Correct usage of set with state

   set should receive a function with state parameter to get current count: set(state => ({ count: state.count + 1 })).

3. Final Answer:

   Using count without accessing state inside set -> Option A

4. Quick Check:

   Access state.count inside set callback [OK]

Hint: Use set(state => ...) to access current state [OK]

Common Mistakes:

• Using count variable directly instead of state.count
• Not passing function to set
• Ignoring state parameter in set callback

5. You want to add a reset function to this Zustand store that sets count back to zero. Which is the correct way?

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

hard

A. () => set(state => ({ count: null }))

B. () => set({ count: state.count - state.count })

C. () => set({ count: state.count * 0 })

D. () => set({ count: 0 })

Solution

1. Step 1: Understand reset goal

   The reset function should set count directly to zero, ignoring current state.

2. Step 2: Evaluate each option

   () => set(state => ({ count: null })) sets count to null (wrong). Options B and C reference state.count directly in set({ ... }) but state is undefined there (error). () => set({ count: 0 }) correctly sets { count: 0 } directly.

3. Final Answer:

   () => set({ count: 0 }) -> Option D

4. Quick Check:

   Reset sets count directly to zero [OK]

Hint: Reset sets count directly to 0 without state calculation [OK]

Common Mistakes:

• Using calculations instead of direct assignment
• Setting count to null instead of zero
• Overcomplicating reset function