Zustand as lightweight alternative in React Native - Practice Problems & Coding Challenges

Challenge - 5 Problems

❓ ui_behavior

intermediate

What is the output when updating Zustand state?

Given this Zustand store and React Native component, what will the displayed count be after pressing the button twice?

React Native

import create from 'zustand';
import React from 'react';
import { Text, Button } from 'react-native';

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

function Counter() {
  const { count, increment } = useStore();
  return (
    <>
      <Text>{count}</Text>
      <Button title="Add" onPress={increment} />
    </>
  );
}

A The count displayed will be 2

B The count displayed will be 1

C The count displayed will be 0

D The app will crash with an error

💡 Hint

Each button press calls increment which adds 1 to count.

The increment function updates the count by adding 1 each time it is called. Pressing twice adds 2, so count becomes 2.

🧠 Conceptual

intermediate

Why choose Zustand over React Context for state management?

Which of these is a key advantage of Zustand compared to React Context API in React Native apps?

A React Context supports asynchronous state updates natively

B Zustand requires more boilerplate code than React Context

C React Context is faster because it uses hooks internally

D Zustand avoids unnecessary re-renders by subscribing only to selected state slices

💡 Hint

Think about how components update when state changes.

Zustand lets components subscribe to specific parts of the state, so only those components re-render when that part changes, improving performance.

❓ lifecycle

advanced

How does Zustand handle component unmounting?

What happens to Zustand store subscriptions when a React Native component using useStore unmounts?

A Zustand automatically cleans up subscriptions to prevent memory leaks

B Subscriptions remain active causing memory leaks unless manually removed

C Zustand throws an error if a component unmounts without unsubscribing

D Subscriptions pause but do not unsubscribe until app reload

💡 Hint

Think about React hooks cleanup behavior.

Zustand uses React hooks internally which clean up subscriptions automatically when components unmount, preventing leaks.

🔧 Debug

advanced

Why does this Zustand state update not trigger re-render?

Consider this code snippet: const useStore = create(set => ({ count: 0, setCount: (val) => set({ count: val }) })); function Counter() { const count = useStore(state => state.count); const setCount = useStore(state => state.setCount); React.useEffect(() => { setCount(1); setCount(1); }, []); return {count}; } Why does the Text component not update after the second setCount call?

A Because setCount is asynchronous and batches updates incorrectly

B Because useStore selector is missing dependencies causing stale closure

C Because the state value did not change on second call, so no re-render triggered

D Because React Native Text component does not update on state changes

💡 Hint

Think about how Zustand detects state changes.

Zustand only triggers re-render if the selected state slice changes. Setting count to the same value twice does not cause a re-render the second time.

❓ navigation

expert

How to persist Zustand state across React Native app restarts?

Which approach correctly persists Zustand state using AsyncStorage in React Native?

React Native

import create from 'zustand';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { persist } from 'zustand/middleware';

const useStore = create(persist(
  (set) => ({ count: 0, increment: () => set(state => ({ count: state.count + 1 })) }),
  {
    name: 'count-storage',
    getStorage: () => AsyncStorage
  }
));

A Persist middleware requires manual save and load calls, so this code misses them

B This code correctly persists state using AsyncStorage with zustand's persist middleware

C AsyncStorage cannot be used with zustand persist middleware in React Native

D The getStorage option must return a promise, so this code will fail

💡 Hint

Check zustand persist docs for React Native usage.

Zustand's persist middleware supports AsyncStorage in React Native by passing getStorage returning AsyncStorage instance.

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