react-composition-2026

Replace boolean props with composition by splitting the component into explicit sub-components like Card.Header, Card.Body, and Card.Footer. Each piece becomes independently optional and testable, avoiding the combinatorial explosion that boolean props create.

Compound components are a group of components that share state through React context instead of props. A parent component like Select owns the state and provides it via context, while children like Select.Trigger and Select.Option consume it.

No, React 19 passes ref as a regular prop, so function components can accept ref directly in their props without the forwardRef wrapper. The use() hook can also read promises or context conditionally.

Reserve render props for cases where the parent must provide data to the renderer, such as virtualized list items. For most composition scenarios, children composition with sub-components produces a simpler and more readable API.

Headless components provide behavior such as state, keyboard handling, and ARIA attributes without any markup, letting consumers control all rendering. Libraries like Radix UI, Headless UI, and React Aria follow this pattern.