Skip to main content

Performance Optimization

React.memo​

const ExpensiveComponent = React.memo(({ data }) => {
  return <div>{expensiveRender(data)}</div>;
});

useMemo and useCallback​

const memoizedValue = useMemo(() => computeExpensive(a, b), [a, b]);
const memoizedCallback = useCallback(() => doSomething(a), [a]);

Code Splitting​

const LazyComponent = lazy(() => import('./Component'));

Virtualization​

import { FixedSizeList } from 'react-window';

<FixedSizeList height={400} itemCount={1000} itemSize={35} width='100%'>
  {Row}
</FixedSizeList>;

Web Vitals Monitoring​

import { getCLS, getFID, getFCP } from 'web-vitals';

getCLS(console.log);
getFID(console.log);
getFCP(console.log);

Best Practices​

  1. Profile before optimizing - Use React DevTools Profiler
  2. Lazy load routes - Split by route
  3. Virtualize long lists - Use react-window
  4. Debounce expensive operations - Search, filtering
  5. Optimize images - Use WebP, lazy loading
  6. Code split - Dynamic imports
  7. Memoize selectively - Don't over-optimize