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.