vercel-composition-patterns

Compound components in React are reusable UI pieces that share context implicitly without prop drilling. Use them when building flexible component architectures that require decoupled state management across nested elements.

Refactor a monolithic React component by splitting it into smaller, composable parts like headers and activity feeds, lifting shared state into context providers to decouple state logic from the UI layer.

React 19 introduces modern API practices for context and state management, including using the `use()` hook instead of `useContext()` and updating ref handling to build scalable, maintainable component architectures.

The best way to manage state in scalable React applications is lifting state logic into context providers, decoupling it from the UI layer to prevent unmaintainable codebases and enable more flexible component architectures.

Avoid using context providers for React state management when component state is strictly local and lacks shared descendants, as unnecessary providers add complexity without benefiting the composition architecture.