Decide whether a piece of state needs a library at all

Every time two components need to share a value, I reach for the same state library instead of asking if I even need one.

Beginner to intermediateRead 5 minDoing: about half an hour6 steps

▶ Start

What you'll have at the end

A written list of every shared value and which layer holds it: local, the web address, the server cache, or a global store

Before you start

You need

A frontend app where at least two components already read or write the same piece of state, whatever layer it happens to live in today.

Not covered

Which specific data-fetching or store library actually implements each layer once you have decided on it.

Leans on

Write down what's actually shared

List every value more than one place touches

Sort each value into its real layer

Pull out anything that comes from the server
Pull out what belongs in the web address
Test what's left for a single owner
Check whether a plain lift beats a store

Record the finished decision

Write down the finished map

Where to go next

Replace a manual fetch effect with TanStack Query

once a value is flagged as server data here, this is the recipe that actually moves it into a caching layer

Move shared state out of a pile of Context providers

once more than one value ends up in the global-store column, this is where they get consolidated instead of scattered across separate providers

Checked 22 Aug 2026

Part of the Frontend State Management Beyond Redux cookbook