Question 1

How do I refactor React components with too many boolean props?

Accepted Answer

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

Question 2

What are compound components in React?

Accepted Answer

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, like Composer.Frame, Composer.Input, and Composer.Submit, without hidden conditionals.

Question 3

Should I use children or render props for React composition?

Accepted Answer

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.

Question 4

Does React 19 still require forwardRef?

Accepted Answer

No, React 19 makes ref a regular prop, so forwardRef is unnecessary. The use() hook also replaces useContext() and can be called conditionally, unlike useContext.

Question 5

How do I share state between sibling React components without prop drilling?

Accepted Answer

Lift state into a provider component that wraps the siblings. Components inside the provider boundary access state and actions through context, even if they are not visually nested inside the main UI.

vercel-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-composition-patterns

Related Skills

vercel-composition-patterns

component-library

type-system-governance

react-state-management