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 subcomponents sharing a common context, exported as a group like Composer.Frame, Composer.Input, and Composer.Submit. Consumers compose exactly the pieces they need while subcomponents access shared state via context instead of props.

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 forwardRef still work in React 19?

Accepted Answer

In React 19, ref is a regular prop so forwardRef is unnecessary. Accept ref directly in the component signature, and use the use() hook instead of useContext() for reading context.

Question 5

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

Accepted Answer

Lift state into a provider component that wraps the UI tree. Any component inside the provider boundary, even siblings outside the main component frame, can access state and actions through context without prop drilling or refs.

vercel-composition-patterns

SYSTEM DOCUMENTATION & REQUIREMENTS

Frequently Asked Questions about vercel-composition-patterns

Related Skills

vercel-composition-patterns

component-library

vue-fix

state-machines