State Management At Scale

// colocation: put state in the lowest component that needs it, and move it only when a second one does
function Comments({ postId }) {
  const [draft, setDraft] = useState('')                 // only the editor needs it → here, not in the page
  const [sort, setSort] = useState('newest')             // the list and the sort control both need it → here, their common parent
  return <>
    <SortControl value={sort} onChange={setSort} />
    <CommentList postId={postId} sort={sort} />
    <Editor value={draft} onChange={setDraft} />
  </>
}
// the cost of state too high: every setDraft re-renders the page; every page child without memo renders. the fix is moving it down, not memo.
// the cost of state too low: two siblings need it → lift to the parent (one level); three features across routes need it → a store, not a 6-level lift.

// derive, do not store: anything computable from other state is a variable, not a useState
const total = items.reduce((s, i) => s + i.price, 0)     // not: const [total, setTotal] = useState(); useEffect(() => setTotal(…), [items])
const isValid = errors.length === 0                      // storing it creates two sources of truth and an effect to sync them (part 11)

// a Zustand store, shaped for selectors
const useCart = create((set, get) => ({
  items: [],
  add: item => set(s => ({ items: [...s.items, item] })),          // immutable update → new reference → subscribers' selectors re-run
  remove: id => set(s => ({ items: s.items.filter(i => i.id !== id) })),
  total: () => get().items.reduce((t, i) => t + i.price, 0),        // a method, not stored state: derive on read
}))
function CartBadge() { const n = useCart(s => s.items.length); return <span>{n}</span> }       // renders only when the length changes
function Total() { const total = useCart(s => s.total()); return <b>{total}</b> }               // a number: Object.is stable when equal
function Lines() { const items = useCart(s => s.items); return items.map(i => <Line key={i.id} item={i} />) }   // the array reference: changes on add/remove only

// the same with Redux Toolkit: createSlice + useSelector + createSelector for derived objects; more structure, more boilerplate, better devtools
// the same with Jotai: const itemsAtom = atom([]); const countAtom = atom(get => get(itemsAtom).length); useAtomValue(countAtom)
// when to pick which: Zustand for "a store, quickly"; RTK when a team needs the conventions and the devtools; Jotai when state is a graph of
// small derived pieces; XState when the thing is a workflow with states and transitions (a checkout, an upload, a wizard)

// server state belongs in a query cache, not in a reducer
const { data: post, isPending, error } = useQuery({ queryKey: ['post', id], queryFn: () => api.posts.get(id), staleTime: 60_000 })
// what the cache does that your reducer did not: dedupe concurrent requests for the same key; keep the data after unmount (gcTime);
// refetch on window focus / reconnect / interval; mark stale after staleTime and show stale-while-revalidating; retry with backoff;
// structural sharing so unchanged parts keep their references (bailouts hold); pagination and infinite queries; optimistic updates with rollback
const like = useMutation({ mutationFn: api.posts.like, onSuccess: () => queryClient.invalidateQueries({ queryKey: ['post', id] }) })
// with RSC: the server component IS the query; revalidatePath / revalidateTag is the invalidation; the client cache is the router's payload cache.
// the categories are the same; the location moved. part 8 has the fetching patterns