react-composition-patterns

Replace boolean props with composition by creating explicit variant components such as ThreadComposer or EditComposer. Each variant composes shared compound component pieces like Composer.Frame, Composer.Input, and Composer.Footer, eliminating hidden conditionals and impossible states.

Compound components are a set of subcomponents sharing state through a common context rather than props. Consumers compose pieces like Composer.Header and Composer.Submit explicitly, while a provider injects state, actions, and meta into the shared context.

Lift state into a provider component that wraps the entire subtree. Any component inside the provider boundary, even siblings outside the visual component frame, can access state and actions via context without prop drilling, refs, or useEffect syncing.

Prefer children for composing static structure because they are more readable and compose naturally. Use render props only when the parent must pass data back to the child, such as rendering list items with per-item data.

In React 19, ref is a regular prop, so forwardRef wrappers are unnecessary; accept ref directly in the component props. Additionally, use() replaces useContext() and can be called conditionally. These rules apply only to React 19 or later.

Avoid the pattern for simple components with few consumers, where a single component with minimal props is clearer. The added provider and context interface complexity pays off only when multiple variants or swappable state implementations exist.