Question 1

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

Accepted Answer

Replace boolean props with composition by creating explicit variant components like ThreadComposer or EditComposer. Each variant composes shared subcomponents through a common provider, eliminating conditional logic and impossible states.

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 only the pieces they need, such as Composer.Frame, Composer.Input, and Composer.Submit.

Question 3

Should I use children or render props for React composition?

Accepted Answer

Prefer children for composing static structure because they are more readable and compose naturally. Use render props only when the parent needs to 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

vercel-composition-patterns

typescript-strict

react-state-management