vercel-composition-patterns

Replace boolean props with explicit variant components that compose shared internals. Each variant like ThreadComposer or EditComposer composes only the pieces it needs from a compound component, 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, 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 with item data.

In React 19, ref is a regular prop so forwardRef is no longer needed. The use() hook also replaces useContext() and can be called conditionally. These rules only apply to React 19 or later, not React 18.

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, since any component within the provider boundary can consume the context.