State Management Choices

Separate server, client and screen state

Most apps need less global state than they think. Server state (data from APIs) belongs in a cache such as TanStack Query. Local UI state (an open modal, form fields) belongs in useState or useReducer inside the component. Shared client state (signed-in user, theme, cart) can use React Context for values that change rarely, or a small store such as Zustand or Redux Toolkit when many components read and update it, since those let components subscribe to slices and avoid unnecessary re-renders. Navigation state is owned by the router; put shareable values such as a filter in route params. Persist store data with the storage options from the previous topic when it must survive restarts.

A small Zustand cart store

Components subscribe only to the slice they use (check the docs for your version).

import { create } from "zustand";

type Item = { id: string; name: string; qty: number };

type CartState = {
  items: Item[];
  add: (item: Omit<Item, "qty">) => void;
  clear: () => void;
};

export const useCart = create<CartState>((set) => ({
  items: [],
  add: (item) =>
    set((state) => {
      const existing = state.items.find((i) => i.id === item.id);
      return existing
        ? { items: state.items.map((i) => (i.id === item.id ? { ...i, qty: i.qty + 1 } : i)) }
        : { items: [...state.items, { ...item, qty: 1 }] };
    }),
  clear: () => set({ items: [] }),
}));

// in a component: re-renders only when the count changes
// const count = useCart((s) => s.items.length);

Do not copy server data into a global store

Duplicating API responses in Redux or Zustand creates two sources of truth that drift apart. Let the query cache own server data.

त्वरित जाँच: Where does the list of products loaded from your API best live?

• In a server-state cache such as TanStack Query
• In a global variable updated by hand
• In AsyncStorage on every render
• In route params of every screen