React Render Optimization

Advanced techniques to minimize re-renders.

Windowing/Virtualization

For long lists, use react-window:

npm install react-window

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

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

// 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!