Optimizing React Performance

Why Performance Matters

A 1-second delay in page response can result in a 7% reduction in conversions. On mobile, this is even more critical.

1. React.memo for Component Memoization

Prevent unnecessary re-renders:

1const ExpensiveComponent = React.memo(({ data }) => {
2  return (
3    <div>
4      {data.map(item => (
5        <Item key={item.id} {...item} />
6      ))}
7    </div>
8  );
9});

2. useMemo and useCallback

useMemo for Expensive Calculations

1const sortedItems = useMemo(() => {
2  return items.sort((a, b) => a.name.localeCompare(b.name));
3}, [items]);

useCallback for Stable References

1const handleClick = useCallback((id) => {
2  setSelectedId(id);
3}, []);

3. Code Splitting with Dynamic Imports

1const HeavyComponent = dynamic(() => import('./HeavyComponent'), {
2  loading: () => <Skeleton />,
3  ssr: false
4});

4. Virtual Lists for Large Data Sets

Don't render thousands of items – virtualize them:

1import { FixedSizeList } from 'react-window';
2
3<FixedSizeList
4  height={400}
5  itemCount={10000}
6  itemSize={35}
7>
8  {Row}
9</FixedSizeList>

5. Image Optimization

Use Next.js Image component:

1<Image
2  src="/photo.jpg"
3  alt="Photo"
4  width={800}
5  height={600}
6  placeholder="blur"
7  loading="lazy"
8/>

Performance Checklist

• [ ] Audit with Lighthouse
• [ ] Use React DevTools Profiler
• [ ] Enable production builds
• [ ] Implement error boundaries
• [ ] Monitor Core Web Vitals

Conclusion

Performance optimization is an ongoing process. Start with the biggest wins and iterate from there.