What problem does it solve?
This guide helps frontend teams reduce cognitive load and avoid common pitfalls by codifying React patterns, performance considerations, and type-safe practices for scalable apps.
Core Features & Use Cases
- Component Design Principles: server, client, presentational, and container roles with clear rules like one responsibility per component and composition over inheritance.
- Hook Patterns: guidance on when to extract hooks, rules for use at top level, and naming conventions like starting with use.
- State Management & Architecture: guidance on selecting approaches (useState, useReducer, Context, React Query/SWR, and global stores) based on scope.
- React 19 Patterns: new hooks and compiler benefits that influence how resources are read and UI is updated.
- Composition Patterns: compound components and render props vs hooks for flexible, reusable UI.
- Performance Principles: when to optimize, profiling, memoization, virtualization, and stable callbacks.
- Error Handling: error boundaries, recovery strategies, and resilient UX.
- TypeScript Patterns: typing props, generics, and common types to ensure type safety.
- Testing Principles: unit, integration, and e2e testing guidance and priorities.
- Anti-Patterns: common pitfalls to avoid and suggested improvements.
Quick Start
Explain a React component you’re building, and I will apply patterns to improve its structure and performance.
