React Performance Optimization Techniques

# React Performance Optimization Techniques

React is fast, but poorly optimized React apps can be slow. Let's explore techniques to keep your React applications performant.

## 1. Use React.memo for Component Memoization

Prevent unnecessary re-renders with `React.memo`:

```typescript import { memo } from 'react';

interface UserCardProps { name: string; email: string; }

const UserCard = memo(({ name, email }: UserCardProps) => { console.log('Rendering UserCard'); return ( {name} {email}

); }); ```

## 2. useMemo for Expensive Calculations

Cache expensive computation results:

```typescript import { useMemo } from 'react';

function DataTable({ data }: { data: Item[] }) { const sortedData = useMemo(() => { return [...data].sort((a, b) => a.value - b.value); }, [data]);

return ( {sortedData.map(item => ( {item.name} ))} ); } ```

## 3. useCallback for Function Memoization

Prevent function recreation on every render:

```typescript import { useCallback, useState } from 'react';

function TodoList() { const [todos, setTodos] = useState ([]);

const addTodo = useCallback((text: string) => { setTodos(prev => [...prev, text]); }, []);

return ; } ```

## 4. Code Splitting with React.lazy

Load components only when needed:

```typescript import { lazy, Suspense } from 'react';

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

function App() { return ( Loading... }> ); } ```

## 5. Virtual Scrolling for Long Lists

Use libraries like `react-window` for long lists:

```typescript import { FixedSizeList } from 'react-window';

function VirtualList({ items }: { items: string[] }) { return ( {({ index, style }) => ( {items[index]} )} ); } ```

## 6. Avoid Inline Functions and Objects

Inline definitions create new references:

```typescript // ❌ Avoid handleClick(id)} />

// ✅ Better const handleButtonClick = useCallback(() => handleClick(id), [id]); const buttonStyle = useMemo(() => ({ margin: 10 }), []);

```

## 7. Use the Production Build

Always use production builds in production:

```bash npm run build ```

Production builds: - Remove development warnings - Minify code - Enable optimizations - Use smaller bundle sizes

## 8. Profiling with React DevTools

Use React DevTools Profiler to identify bottlenecks:

1. Open React DevTools 2. Go to Profiler tab 3. Click record 4. Interact with your app 5. Stop recording and analyze

## 9. Optimize Images

```typescript // Use modern formats

// Lazy load images

// Responsive images ```

## 10. Use Web Workers for Heavy Tasks

Offload heavy computations:

```typescript const worker = new Worker(new URL('./worker.ts', import.meta.url));

worker.postMessage({ data: heavyData });

worker.onmessage = (e) => { setResult(e.data); }; ```

## Measuring Performance

Always measure before optimizing:

```typescript import { Profiler } from 'react';

function onRenderCallback( id: string, phase: 'mount' | 'update', actualDuration: number ) { console.log(`${id} took ${actualDuration}ms`); }

```

## Conclusion

Performance optimization is about finding the right balance. Don't optimize prematurely, but know these techniques when you need them.

Remember: **Measure, optimize, measure again!**