vercel-composition-patterns

Replace boolean props with explicit variant components that compose shared internals. Create separate components like ThreadComposer or EditComposer, each composing only the pieces it needs from a compound component structure.

Compound components are a pattern where a parent component and its subcomponents share state through context rather than props. Consumers compose the exact pieces they need, such as Composer.Frame, Composer.Input, and Composer.Submit, without hidden conditionals.

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.

In React 19, ref is a regular prop, so forwardRef is no longer needed. You can accept ref directly in the component's props and pass it to the underlying element.

Lift state into a provider when sibling components outside the main UI need access to that state or its actions. This avoids prop drilling, useEffect syncing, and ref-based workarounds while keeping UI decoupled from state implementation.