Move shared state out of a pile of Context providers

Every new shared value means another Provider wrapping the app, and I've lost count of how many are nested by now.

Intermediate to advancedRead 9 minDoing: an afternoon8 steps

What you'll have at the end

The Provider stack replaced by one Zustand store, with the same features still working

Before you start

You need

An app whose root already wraps more than one Context Provider, each supplying a value read by components elsewhere in the tree.

Not covered

A field whose value is actually kept in sync with the server, like a live profile refetched on an interval, belongs in a fetch cache instead.

Leans on

8 steps

Replace a manual fetch effect with TanStack Query

when the field pulled out of Context is actually server data kept in sync by polling or refetch, rather than state the client owns

Split a growing Zustand store into slices

once the combined store itself grows too large for one file to hold comfortably

A Zustand selector triggers extra renders

if a consumer's selector reads back more than one field at once and starts re-rendering on data it never uses

Checked 22 Aug 2026