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

Question 3

When should I use children instead of render props in React?

Accepted Answer

Use children when composing static structure because 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, in React 19 ref is a regular prop, so the forwardRef wrapper is no longer needed. Additionally, use() replaces useContext() and can be called conditionally, unlike useContext.

Question 5

How do I share React component state with sibling components outside the UI?

Accepted Answer

Lift state into a provider component so any component within the provider boundary can access state and actions via context. Components do not need to be visually nested inside the main UI, only within the same provider.

vercel-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-composition-patterns

Related Skills