react▌

45 React and Next.js performance rules organized by impact, from eliminating waterfalls to advanced patterns. \n \n Covers 8 priority categories spanning async optimization, bundle size, server/client data fetching, re-renders, rendering, JavaScript performance, and advanced patterns \n Each rule includes explanation, before/after code examples, and context; rules prefixed by category (e.g., async- , bundle- , server- ) for easy reference \n Prioritizes critical issues like waterfall elimination

React useEffect best practices guide covering when to use Effects and superior alternatives. \n \n Teaches the escape-hatch nature of Effects: use only for synchronizing with external systems, not for derived state, expensive calculations, or user event responses \n Provides a decision tree and quick-reference table mapping common situations (data fetching, state derivation, prop changes) to the correct React pattern \n Covers when NOT to use Effects: transforming data for render, handling user

GSAP integration for React with lifecycle-aware hooks, ref patterns, and automatic cleanup. \n \n useGSAP hook handles component lifecycle, scoped selectors, dependency tracking, and automatic animation cleanup on unmount \n Supports single and multiple element refs, dynamic lists, and timeline management with play/pause/restart controls \n contextSafe wrapper for event handlers ensures animations respect React's context and prevent memory leaks \n Includes ScrollTrigger integration, custom anim

Principles for building production-ready React applications.

Create robust cross-platform mobile applications using React Native with modern development patterns including navigation, state management, API integration, and native module handling.

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 64 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.

Write and review React Native component tests using Testing Library v13 and v14. \n \n Covers render patterns, screen queries (getBy/getAllBy/queryBy/findBy variants), Jest matchers, userEvent interactions, fireEvent, and async patterns with version-specific behavior \n Automatically detects your project's RNTL version (v13 for React 18, v14 for React 19+) and applies correct API signatures and sync/async rules \n Provides query priority guidance (getByRole first), interaction best practices (us

Memoization, code splitting, and virtualization patterns for optimizing React application performance. \n \n Covers four core optimization techniques: memoization (React.memo, useMemo, useCallback), code splitting with lazy/Suspense, virtualization for large lists, and state management strategies to minimize render cascades \n Includes React 18+ concurrent features (useTransition, useDeferredValue) for improved responsiveness and perceived performance \n Provides profiling workflow using React D

Complete development guidelines for building maintainable, scalable applications with Next.js, React, Redux Toolkit, and TypeScript.

Comprehensive performance optimization guide for React and Next.js applications, maintained by Vercel. Contains 45 rules across 8 categories, prioritized by impact to guide automated refactoring and code generation.