Frontend State Management Beyond Redux cookbook

11 recipes · 76 steps · about 80 minutes of reading

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
A retry sets both isLoading and isError at once
A fast retry, and suddenly the spinner and the error message are both on screen at the same time.
Beginner to intermediateRead 6 minDoing: an hour6 steps
Replace a manual fetch effect with TanStack Query
My component has a useEffect, a loading flag, an error flag, and a data field, and I rewrite the same four lines in every component that talks to the server.
IntermediateRead 6 minDoing: a few hours7 steps
A Zustand selector triggers extra renders
One value in my store changes, and a component that never even reads that value re-renders anyway.
IntermediateRead 7 minDoing: an hour6 steps
Split a growing Zustand store into slices
My one Zustand store file is pushing a thousand lines and I've lost track of which action touches what.
IntermediateRead 9 minDoing: an afternoon7 steps
Persisted Zustand data that no longer matches your store's shape
I changed the shape of my store, and now a returning visitor's saved localStorage data throws on load.
IntermediateRead 6 minDoing: about an hour7 steps
Break a Jotai atom that holds one big nested object into pieces
I put my whole settings panel in one atom, and editing the theme somehow re-renders the notifications toggle too.
IntermediateRead 8 minDoing: an hour7 steps
Make a save action optimistic with TanStack Query
Clicking save waits for the server, and only a beat later does the screen finally catch up.
Intermediate to advancedRead 7 minDoing: an afternoon7 steps
Page through a long feed instead of loading it all at once
Why load two thousand rows just to show the first twenty on screen?
Intermediate to advancedRead 6 minDoing: an afternoon7 steps
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
Model a checkout wizard as an explicit state machine
My checkout form can reach a screen where the payment step shows before a plan was ever picked, and I don't know how that happened.
AdvancedRead 11 minDoing: an afternoon8 steps

Cookbook badge

Finish all 11 recipes to earn this.

Frontend State Management Beyond Redux cookbook

Decide whether a piece of state needs a library at all

A retry sets both isLoading and isError at once

Replace a manual fetch effect with TanStack Query

A Zustand selector triggers extra renders

Split a growing Zustand store into slices

Persisted Zustand data that no longer matches your store's shape

Break a Jotai atom that holds one big nested object into pieces

Make a save action optimistic with TanStack Query

Page through a long feed instead of loading it all at once

Move shared state out of a pile of Context providers

Model a checkout wizard as an explicit state machine

In these roadmaps

Frontend State Management Beyond Redux cookbook

Decide whether a piece of state needs a library at all

A retry sets both isLoading and isError at once

Replace a manual fetch effect with TanStack Query

A Zustand selector triggers extra renders

Split a growing Zustand store into slices

Persisted Zustand data that no longer matches your store's shape

Break a Jotai atom that holds one big nested object into pieces

Make a save action optimistic with TanStack Query

Page through a long feed instead of loading it all at once

Move shared state out of a pile of Context providers

Model a checkout wizard as an explicit state machine

In these roadmaps