React Composable Components

Patterns for authoring React components that are small, focused, and highly composable.

Core idea

Large components that manage too much state and render multiple distinct UI areas suffer from poor readability, reusability, and render performance.

Avoid: Massive monolithic components that accept dozens of props (hasHeader, showFooter).
Prefer: Breaking UI down into atomic, composable pieces (Compound Components) that transparently pass HTML attributes and merge utility classes for easy customization.

1. Extract Inline Render Methods

If a component has methods like renderStoryScreen(), extract them into independent child components. This prevents unnecessary re-renders of the entire monolith when small parts of the state change.