vercel-composition-patterns

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared compound component pieces, eliminating exponential state combinations and hidden conditionals.

Compound components are structured around a shared context where subcomponents access state via context instead of props. Consumers explicitly compose the pieces they need, such as Composer.Frame, Composer.Input, and Composer.Submit.

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 renderItem in a list.

In React 19, ref is a regular prop, so the forwardRef wrapper is no longer needed. The use() hook also replaces useContext() and can be called conditionally, unlike useContext().

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

Compound components add context and provider overhead, so they are unnecessary for simple components with few variations. They are most valuable when a component has multiple variants or needs dependency-injectable state across use cases.