review-react-component-design

Review a React component design by tracing ownership and data flow across core, DOM behavior, and React layers, then checking compound anatomy, API surface, and opt-outs. Verify each API addition has a consumer and weigh complexity against bundle cost.

A good primitive boundary separates reusable primitives from app or skin composition and leaves visual structure to CSS. Descendant selectors, :has(), and complex selectors introduced by composition usually signal a weak boundary or missing data-* and CSS custom-property hooks.

Compound component APIs should use tree-shakeable ESM namespace re-exports rather than runtime namespace objects. This lets bundlers like webpack eliminate unused parts, keeping bundle cost proportional to actual usage.

A React component API should support omission, render replacement, styling, behavior, and import opt-outs. Exercising each opt-out path during design review confirms the component stays composable without forcing consumers into unwanted defaults.

Split a component when its API surface spans independent features that different consumers would use separately. Moving those features into another component or hook keeps each primitive focused and reduces unnecessary API complexity.