vercel-composition-patterns

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

Compound components are a pattern where a parent component shares state with subcomponents through context instead of props. Consumers compose pieces like Composer.Frame, Composer.Input, and Composer.Submit explicitly, with no 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.

No, React 19 does not require forwardRef because ref is now a regular prop passed directly to function components. React 19 also replaces useContext with the use() hook, which can be called conditionally.

Lift state into a provider component that wraps the siblings in a shared context. Components anywhere inside the provider boundary can access state and actions through the context interface, even outside the main UI structure.