react-performance-optimizer

✅ Use for:

• Slow component re-renders
• Large lists (>100 items) causing lag
• Bundle size >500KB (gzipped)
• Time to Interactive >3 seconds
• Janky scrolling or animations
• Memory leaks from unmounted components

❌ NOT for:

• Apps with <10 components (premature optimization)
• Backend API slowness (fix the API)
• Network latency (use caching/CDN)
• Non-React frameworks (use framework-specific tools)

```

Is your React app slow?

├── Profiler shows >16ms renders? → Use memoization

├── Lists with >100 items? → Use virtualization

├── Bundle size >500KB? → Code splitting

├── Lighthouse score <70? → Multiple optimizations

└── Feels fast enough? → Don't optimize yet

```

---

Performance Tools (2024)

| Tool | Purpose | When to Use |

|------|---------|-------------|

| React DevTools Profiler | Find slow components | Always start here |

| Lighthouse | Overall performance score | Before/after comparison |

| webpack-bundle-analyzer | Identify large dependencies | Bundle >500KB |

| why-did-you-render | Unnecessary re-renders | Debug re-render storms |

| React Compiler (2024+) | Automatic memoization | React 19+ |

Timeline:

• 2018: React.memo, useMemo, useCallback introduced
• 2020: Concurrent Mode (now Concurrent Rendering)
• 2022: Automatic batching in React 18
• 2024: React Compiler (automatic optimization)
• 2025+: React Compiler expected to replace manual memoization

---

Anti-Pattern 1: Premature Memoization

Novice thinking: "Wrap everything in useMemo for speed"

Problem: Adds complexity and overhead for negligible gains.

Wrong approach:

```typescript

// ❌ Over-optimization

function UserCard({ user }) {

const fullName = useMemo(() => ${user.first} ${user.last}, [user]);

const age = useMemo(() => new Date().getFullYear() - user.birthYear, [user]);

return

}

```

Why wrong: String concatenation is faster than useMemo overhead.

Correct approach:

```typescript

// ✅ Simple is fast

function UserCard({ user }) {

const fullName = ${user.first} ${user.last};

const age = new Date().getFullYear() - user.birthYear;

return

}

```

Rule of thumb: Only memoize if:

1. Computation takes >5ms (use Profiler to measure)
2. Result used in dependency array
3. Prevents child re-renders

---

Anti-Pattern 2: Not Memoizing Callbacks

Problem: New function instance on every render breaks React.memo.

Wrong approach:

```typescript

// ❌ Child re-renders on every parent render

function Parent() {

const [count, setCount] = useState(0);

return (

setCount(count + 1)} />

);

}

const Child = React.memo(({ onUpdate }) => {

return Update;

});

```

Why wrong: Arrow function creates new reference → React.memo useless.

Correct approach:

```typescript

// ✅ Stable callback reference

function Parent() {

const [count, setCount] = useState(0);

const handleUpdate = useCallback(() => {

setCount(c => c + 1); // Updater function avoids dependency

}, []);

return ;

}

const Child = React.memo(({ onUpdate }) => {

return Update;

});

```

---

Anti-Pattern 3: Rendering Large Lists Without Virtualization

Problem: Rendering 1000+ DOM nodes causes lag.

Symptom: Scrolling feels janky, initial render slow.

Wrong approach:

```typescript

// ❌ Renders all 10,000 items

function UserList({ users }) {

return (

);

}

```

Correct approach:

```typescript

// ✅ Only renders visible items

import { FixedSizeList } from 'react-window';

function UserList({ users }) {

return (

height={600}

itemCount={users.length}

itemSize={50}

width="100%"

>

{({ index, style }) => (

)}

);

}

```

Impact: 10,000 items: 5 seconds → 50ms render time.

---

Anti-Pattern 4: No Code Splitting

Problem: 2MB bundle downloaded upfront, slow initial load.

Wrong approach:

```typescript

// ❌ Everything in main bundle

import AdminPanel from './AdminPanel'; // 500KB

import Dashboard from './Dashboard';

import Settings from './Settings';

function App() {

return (

} />

} />

} />

);

}

```

Correct approach:

```typescript

// ✅ Lazy load routes

import { lazy, Suspense } from 'react';

const AdminPanel = lazy(() => import('./AdminPanel'));

const Dashboard = lazy(() => import('./Dashboard'));

const Settings = lazy(() => import('./Settings'));

function App() {

return (

}>

} />

} />

} />

);

}

```

Impact: Initial bundle: 2MB → 300KB.

---

Anti-Pattern 5: Expensive Operations in Render

Problem: Heavy computation on every render.

Wrong approach:

```typescript

// ❌ Sorts on every render (even when data unchanged)

function ProductList({ products }) {

const sorted = products.sort((a, b) => b.price - a.price);

return

}

```

Correct approach:

```typescript

// ✅ Memoize expensive operation

function ProductList({ products }) {

const sorted = useMemo(

() => [...products].sort((a, b) => b.price - a.price),

[products]

);

return

}

```

---

Pattern 1: React.memo for Pure Components

```typescript

// Prevent re-render when props unchanged

const ExpensiveComponent = React.memo(({ data }) => {

// Complex rendering logic

return

});

// With custom comparison

const UserCard = React.memo(

({ user }) =>

(prevProps, nextProps) => {

// Return true if props equal (skip re-render)

return prevProps.user.id === nextProps.user.id;

}

);

```

Pattern 2: useMemo for Expensive Calculations

```typescript

function DataTable({ rows, columns }) {

const sortedAndFiltered = useMemo(() => {

console.log('Recomputing...'); // Only logs when rows/columns change

return rows

.filter(row => row.visible)

.sort((a, b) => a.timestamp - b.timestamp);

}, [rows, columns]);

return

}

```

Pattern 3: useCallback for Stable References

```typescript

function SearchBox({ onSearch }) {

const [query, setQuery] = useState('');

// Stable reference, doesn't break child memoization

const handleSubmit = useCallback(() => {

onSearch(query);

}, [query, onSearch]);

return (

setQuery(e.target.value)} />

);

}

```

Pattern 4: Virtualization (react-window)

```typescript

import { VariableSizeList } from 'react-window';

function MessageList({ messages }) {

const getItemSize = (index) => {

// Dynamic heights based on content

return messages[index].text.length > 100 ? 80 : 50;

};

return (

height={600}

itemCount={messages.length}

itemSize={getItemSize}

width="100%"

>

{({ index, style }) => (

)}

);

}

```

Pattern 5: Code Splitting with React.lazy

```typescript

// Route-based splitting

const routes = [

{ path: '/home', component: lazy(() => import('./Home')) },

{ path: '/about', component: lazy(() => import('./About')) },

{ path: '/contact', component: lazy(() => import('./Contact')) }

];

// Component-based splitting

const HeavyChart = lazy(() => import('./HeavyChart'));

function Dashboard() {

const [showChart, setShowChart] = useState(false);

return (

);

}

```

---