Question 1

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

Accepted Answer

Replace boolean props with explicit component variants that compose shared internals. Create separate components like ThreadComposer or EditComposer, each composing only the pieces it needs from a compound component structure.

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 explicitly compose the pieces they need, eliminating hidden conditionals and prop drilling.

Question 3

Should I use children or render props for React composition?

Accepted Answer

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 or state 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

When should I lift state into a provider component?

Accepted Answer

Lift state into a provider when sibling components outside the main UI need access to that state or its actions. This avoids prop drilling, useEffect syncing, and ref-based workarounds while keeping UI decoupled from state implementation.

vercel-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-composition-patterns

Related Skills

vercel-composition-patterns

tdd-workflow

vercel-composition-patterns

state-management