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.