Performance optimization is an art, and in the world of React, small tweaks can yield massive speed boosts. In this post, I’ll walk you through how I transformed a sluggish React app into a high-performance machine. I’ll share real code examples, mistakes I made, and the lessons learned along the way.

1. Profiling and Identifying Bottlenecks

Before optimizing, I needed to find out where the slowdowns were happening. React DevTools’ Profiler was my go-to.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

import { Profiler } from 'react';

function onRenderCallback(
  id, 
  phase, 
  actualDuration, 
  baseDuration,
  startTime, 
  commitTime
) {
  console.log(`${id} rendered in ${actualDuration}ms`);
}

<Profiler id="App" onRender={onRenderCallback}>
  <App />
</Profiler>

By running this, I identified a few components that were rendering excessively, and that’s where the real work began.

2. Eliminating Unnecessary Renders with React.memo and useMemo

One of the culprits was a list of items that re-rendered unnecessarily. Wrapping the component in React.memo helped, but I also combined it with useMemo to optimize prop calculations:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

const Item = React.memo(({ name }) => {
  console.log(`Rendering ${name}`);
  return <div>{name}</div>;
});

const List = ({ items }) => {
  const memoizedItems = useMemo(() =>
    items.map(item => <Item key={item.id} name={item.name} />),
    [items]
  );

  return <>{memoizedItems}</>;
};

This eliminated redundant calculations and ensured the list didn’t trigger unnecessary re-renders.

3. Batching State Updates to Prevent Re-renders

React batches multiple state updates into a single re-render in event handlers, but outside of them (e.g., inside async functions), it doesn’t. I used unstable_batchedUpdates from react-dom to manually batch updates when needed:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

import { unstable_batchedUpdates } from 'react-dom';

const fetchData = async () => {
  const data = await fetch('/api/data').then(res => res.json());
  
  unstable_batchedUpdates(() => {
    setItems(data.items);
    setLoading(false);
  });
};

This small tweak prevented unnecessary intermediate renders.

4. Optimizing Expensive Computations with useMemo and useCallback

Some computations were expensive and repeated unnecessarily. useMemo and useCallback helped reduce that overhead:

1

const filteredItems = useMemo(() => items.filter(item => item.active), [items]);

For passing stable functions as props:

1
2
3

const handleClick = useCallback(() => {
  console.log('Button clicked');
}, []);

These hooks ensured computations were only recalculated when necessary.

5. Virtualizing Large Lists with react-window

Rendering a large dataset was killing performance. The fix? Virtualization using react-window:

1
2
3
4
5
6
7
8
9

import { FixedSizeList as List } from 'react-window';

const Row = ({ index, style }) => (
  <div style={style}>Row {index}</div>
);

<List height={500} itemCount={1000} itemSize={35} width={300}>
  {Row}
</List>

This drastically reduced the number of DOM elements, leading to faster rendering.

6. Debouncing and Throttling Expensive Operations

Certain user interactions—like search input or window resizing—were triggering expensive updates too frequently. Implementing debouncing with lodash solved this issue:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

import { useState } from 'react';
import { debounce } from 'lodash';

const SearchComponent = () => {
  const [query, setQuery] = useState('');
  
  const handleSearch = debounce(value => {
    setQuery(value);
  }, 300);
  
  return <input type="text" onChange={e => handleSearch(e.target.value)} />;
};

For events like window resizing, throttling prevented excessive updates:

1
2
3
4
5
6
7

import { throttle } from 'lodash';

const handleResize = throttle(() => {
  console.log('Window resized');
}, 500);

window.addEventListener('resize', handleResize);

7. Code-Splitting with React Lazy Loading

To improve initial load time, I used lazy loading for large components:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11

import { lazy, Suspense } from 'react';

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

function App() {
  return (
    <Suspense fallback={<div>Loading...</div>}>
      <HeavyComponent />
    </Suspense>
  );
}

This prevented unnecessary JavaScript from being loaded upfront.

8. Leveraging Web Workers for Heavy Computations

For CPU-intensive tasks that would otherwise block the main thread, I moved computations to a Web Worker:

1
2
3
4
5
6
7

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

worker.onmessage = (event) => {
  console.log('Result from worker:', event.data);
};

worker.postMessage({ numbers: [1, 2, 3, 4, 5] });

Inside worker.js:

1
2
3
4

self.onmessage = (event) => {
  const result = event.data.numbers.reduce((sum, num) => sum + num, 0);
  self.postMessage(result);
};

This freed up the main thread, ensuring a smooth UI experience.

Wrapping Up

Optimizing React apps is an iterative process. By profiling, memoizing, batching state updates, debouncing expensive operations, leveraging Web Workers, and virtualizing lists, I was able to drastically improve performance.

If your React app feels sluggish, try these techniques, and you’ll likely see huge improvements!

What performance tricks have you used in your React projects? Let’s discuss in the comments!