Week 6: State Management in React Native

1. Choosing a State Approach

All three options work in React Native exactly as they do on the web — the choice is about scale, not platform.

• Context + useReducer — no dependency, fine for state a handful of screens share (theme, auth flag), but re-renders every consumer on any change.
• Zustand — a small store outside React's tree, components subscribe to just the slice they read, no provider wrapping required. The default for most app-sized state going forward in this course.
• Redux Toolkit — worth it once you have complex, interrelated state, need time-travel debugging, or you're joining a team that already standardized on it.

2. Zustand in Practice

npx expo install zustand

import { create } from 'zustand';

type CartItem = { id: string; title: string; qty: number };
type CartState = {
  items: CartItem[];
  addItem: (item: CartItem) => void;
  removeItem: (id: string) => void;
};

export const useCartStore = create<CartState>((set) => ({
  items: [],
  addItem: (item) => set((state) => ({ items: [...state.items, item] })),
  removeItem: (id) =>
    set((state) => ({ items: state.items.filter((i) => i.id !== id) })),
}));

function CartScreen() {
  const items = useCartStore((state) => state.items);
  const removeItem = useCartStore((state) => state.removeItem);

  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <Pressable onPress={() => removeItem(item.id)}>
          <Text>{item.title} x{item.qty}</Text>
        </Pressable>
      )}
    />
  );
}

Selecting state => state.items rather than the whole store means this component only re-renders when items itself changes — a component that only reads removeItem never re-renders when items updates.

3. Persisting State Across Restarts

Zustand's persist middleware writes the store to AsyncStorage (introduced properly in Week 9) on every change and rehydrates it on launch.

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

export const useCartStore = create<CartState>()(
  persist(
    (set) => ({
      items: [],
      addItem: (item) => set((state) => ({ items: [...state.items, item] })),
      removeItem: (id) =>
        set((state) => ({ items: state.items.filter((i) => i.id !== id) })),
    }),
    {
      name: 'cart-storage',
      storage: createJSONStorage(() => AsyncStorage),
    }
  )
);

Rehydration is asynchronous — on first render the store may still hold its initial (empty) state for a frame or two. For UI that must not flash empty, check useCartStore.persist.hasHydrated() or subscribe to onFinishHydration before rendering real content.

4. Foreground / Background Transitions

A mobile app is never just "open" — it's active, backgrounded (still in memory, not visible), or inactive (mid-transition, e.g. a call coming in on iOS). The AppState API reports which.

import { useEffect, useRef } from 'react';
import { AppState, AppStateStatus } from 'react-native';

export function useAppStateChange(onChange: (status: AppStateStatus) => void) {
  const appState = useRef(AppState.currentState);

  useEffect(() => {
    const subscription = AppState.addEventListener('change', (nextState) => {
      if (appState.current.match(/inactive|background/) && nextState === 'active') {
        onChange('active'); // app just came back to the foreground
      }
      appState.current = nextState;
    });
    return () => subscription.remove();
  }, [onChange]);
}

The most common real use: re-fetching data or refreshing a session token the moment the user returns to the app, rather than on a timer that keeps running (and draining battery) while the app isn't visible at all.

5. Hands-on Exercise

6. Knowledge Check

Four quick questions. Expand each to check your answer.