react-composition-patterns

Replace boolean props with explicit variant components that compose shared internals. Instead of one Composer with isThread and isEditing flags, create ThreadComposer and EditComposer components that each compose the pieces they need from a shared compound component.

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, avoiding hidden conditionals and prop drilling.

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

No. In React 19, ref is a regular prop, so function components can accept ref directly without the forwardRef wrapper. React 19 also introduces use() as a replacement for useContext(), which can be called conditionally.

Lift state into a provider when sibling components outside the main UI need access to that state or its actions. This avoids useEffect syncing hacks and ref-based state reads, letting any component within the provider boundary consume the context.

Do not use this skill for React or Next.js performance optimization, which is out of its scope. The React 19 rules also do not apply to codebases running React 18 or earlier.