react

React

Components are pure functions. State is minimal. Effects are escape hatches. If you reach for useEffect, verify you actually need it.

React rewards thinking in components: break UI into pieces, find minimal state, identify where it lives, and wire data flow from parent to child. References contain extended examples, rationale, and edge cases for each topic area.

References

• Components — ${CLAUDE_SKILL_DIR}/references/components.md Composition, refs, metadata, custom elements
• Hooks — ${CLAUDE_SKILL_DIR}/references/hooks.md Hook rules, custom hooks, useSyncExternalStore
• State — ${CLAUDE_SKILL_DIR}/references/state.md Placement, reducers, context, actions
• Performance — ${CLAUDE_SKILL_DIR}/references/performance.md Compiler, memoization, server components, streaming
• Testing — ${CLAUDE_SKILL_DIR}/references/testing.md Query priority/variants, userEvent catalog, async patterns

Component Design

Thinking in React

Build UI in five steps:

1. Break UI into a component hierarchy — each component does one thing.
2. Build a static version first — props only, no state, no interactivity.
3. Find minimal state — if it doesn't change, is passed from a parent, or can be computed, it is not state.
4. Identify where state lives — find every component that renders based on the state, find their closest common parent, put state there.
5. Add inverse data flow — pass state-setter callbacks down so children update parent state through event handlers.

Purity

React assumes every component is a pure function. Same props + same state = same JSX. Never mutate props, state, or variables declared before rendering.

• Local mutation is fine. Creating and mutating objects/arrays within the same render is safe — the mutation is invisible outside that render.
• Event handlers don't need to be pure — they run outside of rendering.

Component Structure

• One component per file. Small helpers co-located in the same file are acceptable but extract when reused.
• Prefer function declarations for components.
• Do not use React.FC — it adds implicit children typing and complicates generics. Use function Component(props: Props).