Cursor Rule: React Optimization

1---
2description: Rules for modern React Optimization
3globs: *
4alwaysApply: false
5---
6# React Optimization Rules
7 
8## Core Principles
9 
10Optimize for real performance bottlenecks, not perceived ones. Profile before optimizing. Premature optimization adds complexity without guaranteed benefits.
11 
12## Component Optimization
13 
14Use React.memo for expensive pure components that receive the same props frequently. Avoid wrapping every component—this adds overhead.
15 
16Implement useMemo for expensive calculations, not simple operations. Reserve for computationally intensive transformations, filtered/sorted large arrays, or complex object creations.
17 
18Apply useCallback when passing callbacks to memoized children or when callbacks are dependencies in useEffect/useMemo. Don't use it everywhere.
19 
20## State Management
21 
22Keep state as local as possible. Lift state only when necessary for sharing between components.
23 
24Avoid storing derived values in state. Calculate them during render or use useMemo for expensive derivations.
25 
26Split large state objects into smaller, independent pieces to prevent unnecessary re-renders.
27 
28Use state updater functions when new state depends on previous state to avoid stale closures.
29 
30## Rendering Optimization
31 
32Implement key props correctly in lists. Use stable, unique identifiers, never array indices for dynamic lists.
33 
34Break large components into smaller ones. This enables more granular re-rendering and improves code organization.
35 
36Use React.lazy and Suspense for code-splitting routes and heavy components.
37 
38Avoid creating objects or functions in render. Define them outside the component or memoize them.
39 
40## Event Handlers
41 
42Bind event handlers in the component body or use arrow functions in class properties, not in JSX.
43 
44Debounce or throttle expensive event handlers like scroll, resize, or input changes.
45 
46## Lists and Virtualization
47 
48Implement virtualization for long lists using libraries like react-window or react-virtual.
49 
50Avoid inline arrow functions in list item props unless the list is small and static.
51 
52## Context Optimization
53 
54Split contexts by update frequency. Separate rarely-changing and frequently-changing values.
55 
56Memoize context values to prevent unnecessary provider re-renders.
57 
58Consider using multiple smaller contexts instead of one large context.
59 
60## Images and Assets
61 
62Lazy load images below the fold using native loading="lazy" or intersection observers.
63 
64Serve appropriately sized images. Use responsive images with srcset.
65 
66// … truncated