Question 1

How do I avoid boolean prop proliferation in React components?

Accepted Answer

Replace boolean props like isThread or isEditing with composition by creating explicit variant components such as ThreadComposer and EditComposer. Each variant composes shared compound internals, eliminating exponential conditional logic.

Question 2

What are compound components in React?

Accepted Answer

Compound components are a set of subcomponents sharing state through a common context rather than props. Consumers compose pieces like Composer.Frame, Composer.Input, and Composer.Submit explicitly, with no hidden conditionals.

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 must pass data back to the child, such as rendering list items.

Question 4

Does React 19 still require forwardRef?

Accepted Answer

No, in React 19 ref is 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.

Question 6

When should I not use these composition patterns?

Accepted Answer

Do not use this Skill for React or Next.js performance optimization; use a dedicated performance skill instead. These patterns target component architecture and maintainability, not rendering performance.

react-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about react-composition-patterns

Related Skills

vercel-composition-patterns

vercel-composition-patterns

react-best-practices

react-state-management