React Ecosystem

React Hooks Expert Master React Hooks patterns, custom hooks, and state management with these comprehensive guidelines. Essential Hook Patterns State Management useState for Local Component State useReducer for Complex State Logic Side Effects useEffect with Proper Cleanup useContext for Consuming Context Values Custom Hooks Create Reusable Logic Extract complex logic into custom hooks Prefix custom hooks with 'use' Return consistent data structures Handle Loading, Error, and Data States Best Practices Checklist [ ] Hooks called at top level only [ ] Proper dependency arrays in useEffect/useMemo/useCallback [ ] Custom hooks for reusable logic [ ] Cleanup effects to prevent memory leaks [ ] Memoization for performance optimization [ ] Consistent return patterns from custom hooks

React Query Rules This document outlines the ultimate set of rules and best practices for using React Query effectively in production environments. Organizing Queries Normalize Query Keys Create a helper to avoid duplication. Example: Encapsulate Queries in Custom Hooks Define reusable hooks like or . Keeps components clean and ensures consistent query usage across the app. Set and Wisely : How long data is considered "fresh". Set based on data volatility. : How long unused data stays cached before garbage collection. Avoid Over-Fetching Use for conditional queries. Example: wait until is available. Data Synchronization Invalidate Queries Intentionally Use after mutations that affect cached data. Narrow scope: invalidate only related queries instead of all queries. Background Refetching Use and sparingly. Enable only when data must stay real-time fresh. Error & Loading States Centralize Error Handling Use React Query's global handler. Provide user-friendly error boundaries in the UI. Never Block UI Avoid full-page global spinners. Use skeletons, placeholders, or incremental loading instead. Security & Reliability Never Expose Sensitive Data in Query Keys Query keys should be serializable and safe to log. Use Retry Strategically Default retries may harm UX on destructive operations. Configure retries per-query to fit the use case. Follow these rules to keep your React Query setup clean, scalable, and production-ready.

React Testing Library Best Practices Comprehensive guide for testing React applications with React Testing Library, focusing on user-centric testing patterns and best practices. Component Testing Patterns Form Testing Test form validation, submission, and error handling Use userEvent for realistic user interactions Test accessibility of form elements Example form testing: Testing Custom Hooks Use renderHook for testing custom hooks in isolation Test hook state changes and side effects Mock dependencies and external APIs Example hook testing: Advanced Testing Patterns Testing Error Boundaries Test error boundary behavior Verify error reporting and fallback UI Test error recovery mechanisms Example error boundary testing: Performance Testing Test component rendering performance Verify memoization and optimization Test for unnecessary re-renders Example performance testing: Summary Checklist [ ] Test user behavior, not implementation details [ ] Use semantic queries that mirror user interactions [ ] Write tests that promote accessible markup [ ] Handle async operations with waitFor and findBy queries [ ] Test form validation, submission, and error handling [ ] Use MSW for realistic API mocking [ ] Test custom hooks in isolation with renderHook [ ] Write integration tests for user workflows [ ] Test error boundaries and error recovery [ ] Verify performance optimizations work correctly [ ] Set up proper test environment and utilities [ ] Organize tests logically with clear descriptions [ ] Keep tests focused, independent, and maintainable [ ] Mock external dependencies appropriately [ ] Test loading states, error states, and edge cases Follow these practices to write comprehensive, maintainable tests that give confidence in your React applications and promote better accessibility and user experience.

Next.js 14 App Router Best Practices Ultimate guide for building production-ready applications with Next.js 14 App Router, React Server Components, and modern web development patterns. Data Fetching Patterns Server Component Data Fetching Fetch data directly in server components using async/await No need for useState or useEffect for initial data loading Example: Parallel Data Fetching Use Promise.all() to fetch multiple data sources simultaneously Prevents waterfall requests and improves performance Example: Client-Side Data Fetching Use SWR or React Query for client-side data fetching when needed Implement proper loading and error states Only use for user-triggered actions or real-time updates Special Files and Conventions Loading UI Create files for instant loading states Use loading boundaries to show progressive loading Implement skeleton components for better perceived performance Error Handling Use files for error boundaries at route level Implement for custom 404 pages Add proper error recovery mechanisms Route Handlers (API Routes) Create API endpoints using files in app directory Support multiple HTTP methods in a single file Example: State Management Server State vs Client State Keep server state on the server (in server components) Use client state only for UI-specific state (modals, form inputs) Consider React Context or Zustand for complex client state Form Handling Use Server Actions for form submissions when possible Implement proper form validation and error handling Example: Testing Component Testing Test server components by testing their data fetching logic Use React Testing Library for client component testing Mock external API calls appropriately E2E Testing Use Playwright or Cypress for end-to-end testing Test critical user journeys and form submissions Implement visual regression testing for UI consistency Follow these patterns to build scalable, performant, and maintainable Next.js 14 applications.

TypeScript Expert Best Practices Comprehensive guide for mastering TypeScript's advanced type system, generics, and building type-safe applications at scale. Advanced Type Patterns Generic Types with Constraints Use generic constraints to limit type parameters Implement proper bounds checking for type safety Create reusable generic utilities Example generic patterns: Conditional Types and Mapped Types Use conditional types for type-level logic Create mapped types for transforming existing types Implement advanced type utilities Example conditional types: Template Literal Types Create dynamic string types with template literals Build type-safe APIs with string manipulation Generate types from string patterns Example template literal types: Type Guards and Validation Type Guards and Predicates Implement type guards for runtime type checking Use assertion functions for validation Create branded types for type safety Example type guard patterns: Discriminated Unions Use discriminated unions for type-safe state management Implement exhaustiveness checking with never type Create type-safe reducers and state machines Example discriminated union patterns: Error Handling and Validation Type-Safe Error Handling Use Result types instead of throwing exceptions Implement proper error type hierarchies Create composable error handling patterns Example error handling: Runtime Validation with Types Integrate runtime validation with TypeScript types Use libraries like Zod or io-ts for schema validation Ensure type safety at runtime boundaries Example validation patterns: Testing and Type Safety Type Testing Write tests for your types using type-level assertions Use tools like or for type testing Implement type-safe test helpers Example type testing: Mocking with Type Safety Create type-safe mocks for testing Use branded types for test data Implement proper mock type checking Example type-safe mocking: Follow these advanced TypeScript patterns to build robust, type-safe applications that scale effectively.