React State Architecture
Welcome to a comprehensive guide on React state architecture patterns. Understand how data flows in React apps — from useState to XState, Redux to Signals — learn the patterns, trade-offs, and when to use them.
What you’ll learn
Section titled “What you’ll learn”Foundations
Section titled “Foundations”What is state, how React renders, and the vanilla JS patterns that power our tools.
Every Pattern
Section titled “Every Pattern”Unidirectional, bidirectional, atomic, signals, event-driven, FSM, and more.
Interactive Visualizers
Section titled “Interactive Visualizers”See data flow in action with live diagrams you can click and explore.
Trade-offs
Section titled “Trade-offs”When to use, when to avoid, and how to combine patterns in real apps.
How it relates to patterns.dev
Section titled “How it relates to patterns.dev”patterns.dev covers component design patterns (HOC, render props, compound components) and rendering strategies (SSR, streaming, RSC). This site focuses on the other half — state architecture: how data flows, where state lives, and how components exchange data.
Together, they cover the full picture of building complex React apps.