React Compositional Components

Build functional, compositional React components following headless UI patterns with proper state separation and react-query integration.

Core Workflow

When creating compositional components:

1. Identify state types - Separate UI state from server state
2. Extract logic to hooks - Create headless hooks for reusable logic
3. Design composition API - Plan how components combine (compound, slots, render props)
4. Implement pure components - Ensure idempotency and no side effects in render
5. Integrate react-query - Add server state management where needed
6. Support both patterns - Allow controlled and uncontrolled usage

State Management Strategy

UI State vs Server State