vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared subcomponents through a common context provider, 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.

Use children when 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 with per-item data.

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

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