vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components that compose shared internals. Each variant like ThreadComposer or EditComposer declares exactly what it renders, eliminating hidden conditionals and impossible states.

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

Use children for composing static structure because they are more readable and compose naturally. Reserve render props for cases where the parent must pass data back to the child, such as rendering list items.

React 19 makes ref a regular prop, so forwardRef wrappers are no longer needed. You can accept ref directly in the function signature, and use() replaces useContext() for reading context, including conditionally.

Lift state into a provider component that wraps the siblings in a shared context. Components anywhere inside the provider boundary can read state and call actions, even if they are not visually nested inside the main UI.