vercel-composition-patterns

Replace boolean props like isThread or isEditing with explicit variant components that compose shared internals. Each variant, such as ThreadComposer or EditComposer, declares exactly what it renders, eliminating exponential conditional states.

Compound components are subcomponents sharing a common context, exported as a group like Composer.Frame, Composer.Input, and Composer.Submit. Consumers compose the pieces they need while subcomponents access shared state via context instead of props.

Prefer children for composing static structure since they are more readable and compose naturally. Use render props only when the parent must pass data back to the child, such as a List component providing item and index to renderItem.

React 19 makes ref a regular prop, so the forwardRef wrapper is no longer needed. The guidance also replaces useContext() with use(), which can additionally be called conditionally. Skip these rules if you are on React 18 or earlier.

Lift state into a provider component so any descendant, not just visually nested children, can access state and actions via context. This avoids prop drilling, useEffect syncing, and reading state from refs.