Modern React patterns and principles. Hooks, composition, performance, TypeScript best practices.

React Patterns Principles for building production ready React applications. 1. Component Design Principles Component Types Type Use State Server Data fetching, static None Client Interactivity useState, effects Presentational UI display Props only Container Logic/state Heavy state Design Rules One responsibility per component Props down, events up Composition over inheritance Prefer small, focused components 2. Hook Patterns When to Extract Hooks Pattern Extract When useLocalStorage Same storage logic needed useDebounce Multiple debounced values useFetch Repeated fetch patterns useForm Complex form state Hook Rules Hooks at top level only Same order every render Custom hooks start with "use" Clean up effects on unmount 3. State Management Selection Complexity Solution Simple useState, useReducer Shared local Context Server state React Query, SWR Complex global Zustand, Redux Toolkit State Placement Scope Where Single component useState Parent child Lift state up Subtree Context App wide Global store 4. React 19 Patterns New Hooks Hook Purpose useActionState Form submission state useOptimistic Optimistic UI updates use Read resources in render Compiler Benefits Automatic memoization Less manual useMemo/useCallback Focus on pure components 5. Composition Patterns Compound Components Parent provides context Children consume context Flexible slot based composition Example: Tabs, Accordion, Dropdown Render Props vs Hooks Use Case Prefer Reusable logic Custom hook Render flexibility Render props Cross cutting Higher order component 6. Performance Principles When to Optimize Signal Action Slow renders Profile first Large lists Virtualize Expensive calc useMemo Stable callbacks useCallback Optimization Order 1. Check if actually slow 2. Profile with DevTools 3. Identify bottleneck 4. Apply targeted fix 7. Error Handling Error Boundary Usage Scope Placement App wide Root level Feature Route/feature level Component Around risky component Error Recovery Show fallback UI Log error Offer retry option Preserve user data 8. TypeScript Patterns Props Typing Pattern Use Interface Component props Type Unions, complex Generic Reusable components Common Types Need Type Children ReactNode Event handler MouseEventHandler Ref RefObject<Element 9. Testing Principles Level Focus Unit Pure functions, hooks Integration Component behavior E2E User flows Test Priorities User visible behavior Edge cases Error states Accessibility 10. Anti Patterns ❌ Don't ✅ Do Prop drilling deep Use context Giant components Split smaller useEffect for everything Server components Premature optimization Profile first Index as key Stable unique ID 11. File Structure <img width="1150" height="1438" alt="image" src="https://github.com/user attachments/assets/10369698 472c 4695 a494 2c0672103aa1" / Use this image as a reference for a better file structure of the project Remember: React is about composition. Build small, combine thoughtfully. When to Use This skill is applicable to execute the workflow or actions described in the overview. Example User request: Use @react patterns for this task: Modern React patterns and principles. Limitations Use this skill only when the task clearly matches the scope described above. Do not treat the output as a substitute for environment specific validation, testing, or expert review. Stop and ask for clarification if required inputs, permissions, safety boundaries, or success criteria are missing.

react-patterns