React Component Engineering Skill

Guides writing React components that are typed, composable, testable, and performant by default — not just "working."

Component design checklist

1. Single responsibility: if a component both fetches data, manages complex state, AND renders deep markup, split it into a container (logic) + presentational component, or extract a custom hook for the logic.
2. Prop API design:
   • Prefer explicit, narrow props over a generic props: any or a giant config object.
   • Use discriminated unions for variant props (variant: 'primary' | 'secondary') instead of multiple booleans (isPrimary, isSecondary).
   • Expose a className/asChild-style escape hatch on reusable UI components so consumers can extend styling without forking the component.
   • Default to composition (children, slots) over prop-drilling deeply nested config.
3. State placement: lift state only as high as the nearest common consumer needs it — no higher. Prefer colocated useState over global state for anything not actually shared.
4. Custom hooks: extract a hook (useXyz) whenever logic (data fetching, subscriptions, derived state, event listeners) is reused across ≥2 components or when it makes the component's JSX easier to read at a glance.

Performance rules (apply only when there's a measured or obvious problem — don't over-optimize by default)

• React.memo a component only if it re-renders often with the same props and the render itself is expensive.
• useMemo/useCallback are for referential stability passed to memoized children or expensive computations — not a blanket habit on every value.
• Move state down / split components to shrink re-render blast radius before reaching for memoization.
• Use the key prop correctly on lists (stable, unique IDs — never array index if the list can reorder/filter).