vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared compound component pieces, eliminating conditional logic and impossible states.

Compound components are structured as a parent provider with subcomponents that access shared state via context instead of props. Consumers compose exactly the pieces they need, such as Composer.Frame, Composer.Input, and Composer.Submit.

Prefer children for composing static structure since 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.

No, React 19 makes ref a regular prop, so forwardRef is unnecessary. The use() hook also replaces useContext() and can be called conditionally, unlike useContext.

Lift state into a provider component that wraps the siblings. Any component inside the provider boundary can access state and actions via context, even if it is not visually nested inside the main UI.

Compound components add indirection, so simple components with few stable props do not need them. Apply the pattern when components have multiple variants, shared state across subcomponents, or growing boolean prop counts.