{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "cursor-rule-react-optimization",
  "title": "Cursor Rule: React Optimization",
  "description": "Cursor rule file for React optimization guidelines.",
  "dependencies": [],
  "registryDependencies": [],
  "files": [
    {
      "path": "registry/optics/cursor/rules/react-optimization.mdc",
      "content": "---\ndescription: Rules for modern React Optimization\nglobs: *\nalwaysApply: false\n---\n# React Optimization Rules\n\n## Core Principles\n\nOptimize for real performance bottlenecks, not perceived ones. Profile before optimizing. Premature optimization adds complexity without guaranteed benefits.\n\n## Component Optimization\n\nUse React.memo for expensive pure components that receive the same props frequently. Avoid wrapping every component—this adds overhead.\n\nImplement useMemo for expensive calculations, not simple operations. Reserve for computationally intensive transformations, filtered/sorted large arrays, or complex object creations.\n\nApply useCallback when passing callbacks to memoized children or when callbacks are dependencies in useEffect/useMemo. Don't use it everywhere.\n\n## State Management\n\nKeep state as local as possible. Lift state only when necessary for sharing between components.\n\nAvoid storing derived values in state. Calculate them during render or use useMemo for expensive derivations.\n\nSplit large state objects into smaller, independent pieces to prevent unnecessary re-renders.\n\nUse state updater functions when new state depends on previous state to avoid stale closures.\n\n## Rendering Optimization\n\nImplement key props correctly in lists. Use stable, unique identifiers, never array indices for dynamic lists.\n\nBreak large components into smaller ones. This enables more granular re-rendering and improves code organization.\n\nUse React.lazy and Suspense for code-splitting routes and heavy components.\n\nAvoid creating objects or functions in render. Define them outside the component or memoize them.\n\n## Event Handlers\n\nBind event handlers in the component body or use arrow functions in class properties, not in JSX.\n\nDebounce or throttle expensive event handlers like scroll, resize, or input changes.\n\n## Lists and Virtualization\n\nImplement virtualization for long lists using libraries like react-window or react-virtual.\n\nAvoid inline arrow functions in list item props unless the list is small and static.\n\n## Context Optimization\n\nSplit contexts by update frequency. Separate rarely-changing and frequently-changing values.\n\nMemoize context values to prevent unnecessary provider re-renders.\n\nConsider using multiple smaller contexts instead of one large context.\n\n## Images and Assets\n\nLazy load images below the fold using native loading=\"lazy\" or intersection observers.\n\nServe appropriately sized images. Use responsive images with srcset.\n\nConsider next-gen formats like WebP with fallbacks.\n\n## Bundle Optimization\n\nTree-shake libraries by using named imports instead of default imports where possible.\n\nAnalyze bundle size regularly with tools like webpack-bundle-analyzer.\n\nLazy load heavy third-party libraries when possible.\n\n## Effects and Side Effects\n\nKeep useEffect dependencies arrays accurate. Missing dependencies cause stale closures, unnecessary dependencies cause extra runs.\n\nClean up side effects properly to prevent memory leaks.\n\nAvoid useEffect for derived state. Prefer calculating during render.\n\n## Profiling\n\nUse React DevTools Profiler to identify actual bottlenecks.\n\nMeasure performance with Chrome DevTools Performance tab.\n\nMonitor real user metrics, not just development environment performance.\n\n## Anti-Patterns to Avoid\n\nNever mutate state directly. Always create new objects/arrays.\n\nAvoid excessive prop drilling. Use context or composition patterns.\n\nDon't optimize without measuring. Optimization adds complexity.\n\nAvoid anonymous functions as useEffect dependencies.\n\nDon't use index as key in dynamic lists.",
      "type": "registry:file",
      "target": "~/.cursor/rules/react-optimization.mdc"
    }
  ],
  "type": "registry:file"
}