React Render Optimization

Advanced techniques to minimize re-renders.

Windowing/Virtualization

For long lists, use react-window:

```bash npm install react-window ```

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

function VirtualList({ items }) { return ( <FixedSizeList height={500} itemCount={items.length} itemSize={50} width="100%" > {({ index, style }) => ( <div style={style}>{items[index]}</div> )} </FixedSizeList> ); } ```

Debouncing

```javascript import { useState, useEffect } from 'react';

function useDebounce(value, delay) { const [debounced, setDebounced] = useState(value);

useEffect(() => { const timer = setTimeout(() => setDebounced(value), delay); return () => clearTimeout(timer); }, [value, delay]);

return debounced; }

// Usage const [search, setSearch] = useState(''); const debouncedSearch = useDebounce(search, 300); ```

Memoization Strategy

```javascript // Expensive component const ExpensiveComponent = memo(({ data }) => { return <div>{/* Heavy rendering */}</div>; });

// Memoize props const memoizedData = useMemo(() => processData(rawData), [rawData]); const memoizedCallback = useCallback(() => doSomething(), []);

<ExpensiveComponent data={memoizedData} onClick={memoizedCallback} /> ```

Remember

- Virtualize long lists - Debounce frequent updates - Memoize expensive operations - Profile before optimizing

> Next: Learn Web Workers!