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 and its subcomponents share state through context rather than props. Consumers compose pieces like Composer.Frame, Composer.Input, and Composer.Submit explicitly, accessing shared state via use(ComposerContext).

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

React 19 makes ref a regular prop, so forwardRef is no longer needed. You can accept ref directly in function component props, and use() replaces useContext() for reading context, with the added benefit of conditional calls.

Lift state into a provider component that wraps the entire subtree. Any component within the provider boundary, even siblings outside the visual component frame, can access state and actions through context without prop drilling or refs.