vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared internals through a compound component structure, 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 for 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.

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

Lift state into a provider component that wraps the UI tree. Sibling components inside the provider boundary access state and actions through context, even when they are not visually nested inside the main component.