react-patterns

Topics in the source

• React Patterns
• 1. Component Design Principles
• Component Types
• Design Rules
• 2. Hook Patterns
• When to Extract Hooks
• Hook Rules
• 3. State Management Selection

Principles for building production-ready React applications. -- | Type | Use | State | |------|-----|-------| | Server | Data fetching, static | None | | Client | Interactivity | useState, effects | | Presentational | UI display | Props only | | Container | Logic/state | Heavy state | One responsibility per component Props down, events up Composition over inheritance Prefer small, focused components -- | Pattern | Extract When | |---------|-------------| | useLocalStorage | Same storage logic needed | | useDebounce | Multiple debounced values | | useFetch | Repeated fetch patterns | | useForm | Complex form state | Hooks at top level only Same order every render Custom hooks start with "use" Clean up effects on unmount -- | Complexity | Solution | |------------|----------| | Simple | useState, useReducer | | Shared local | Context | | Server state | React Query, SWR | | Complex global | Zustand, Redux Toolkit | | Scope | Where | |-------|-------| | Single component | useState | | Parent-child | Lift state up | | Subtree | Context | | App-wide | Global store | -- | Hook | Purpose | |------|---------| | useActionState | Form submission state | | useOptimistic | Optimistic UI updates

This is an excerpt. Refer to the complete source and its current requirements.