Thinking in React — Component Architecture

The React Mental Model

React's official "Thinking in React" guide describes a five-step process for building an app from a design mockup. Internalising this process is what separates developers who fight React from those who flow with it.

1. Break the UI into a component hierarchy — draw boxes around each visual region and name them.
2. Build a static version first — no state, no interactivity; just props flowing down.
3. Identify the minimal representation of state — ask: can it be derived? If so, don't store it.
4. Identify where state should live — find the common ancestor of all components that need it.
5. Add inverse data flow — pass setters down so children can update ancestor state.

Practical architecture tips

• Keep UI components pure — same props always produce same JSX.
• Put data-fetching and side effects in container components or custom hooks.
• Derive values from state at render time rather than syncing separate state variables.
• Name components and props after what they are, not how they're implemented.