React Development Principles

Component Model

• Components are pure functions: (props, state) → JSX. Render must be side-effect-free.
• One-way data flow: parent → child via props, child → parent via callbacks.
• Never mutate state or props in-place.

Thinking in React: Design Process

1. Hierarchy — decompose by SRP; one component, one concern. Map data model shape to component tree.
2. Static first — props only, no state, until the skeleton renders correctly.
3. Minimal state — DRY: if it's derivable, it's not state.
4. Ownership — hoist state to the closest common ancestor of all consumers.
5. Inverse flow — pass setters/handlers down; children call them on interaction.

What is NOT state

• Computable from existing state or props → derive during render