composition-patterns

Replace boolean props with explicit variant components that compose shared internals. Create separate components like ThreadComposer or EditComposer, each composing the exact pieces it needs from a compound component, eliminating hidden conditionals and impossible states.

Compound components are a pattern where a parent component shares state with its subcomponents through context rather than props. Consumers compose pieces like Composer.Input and Composer.Submit explicitly, accessing shared state via context without prop drilling.

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

No, React 19 makes ref a regular prop, so forwardRef is unnecessary. Function components can accept ref directly in their props, and use() replaces useContext() for reading context, with the added ability to be called conditionally.

Lift state into a provider component that wraps the siblings. Components inside the provider access state and actions through context, so elements like a submit button or preview can live outside the main UI while still sharing its state.