React Performance Optimization Techniques

When an app slows down, users get frustrated. In React, small tweaks can make a big difference. Here are the techniques I use to keep my dashboard feeling fast and smooth.

1. Pass only the props a component really needs

2. Avoid Unnecessary Renders

• Split large components into smaller ones

• Use React.memo for pure function components

Example

const UserList = React.memo(function UserList({ users }) {
  // only re-renders when users change
  return users.map(u => <User key={u.id} name={u.name} />)
})

3. Use useCallback and useMemo Wisely

• wrap event handlers with useCallback so child components don’t re-render

• wrap heavy calculations or derived data in useMemo

Example

const filtered = useMemo(() => {
  return items.filter(i => i.active)
}, [items])

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

Only use these hooks where they save you work. Overusing them adds complexity.

4. Code Splitting and Lazy Loading

• Break your app into chunks so the browser only downloads what it needs

• Use React.lazy and Suspense for route-based splitting

Example

const Dashboard = React.lazy(() => import(’./Dashboard’))

function App() {
  return (
    <Suspense fallback={<div>Loading…</div>}>
      <Routes>
        <Route path="/dashboard" element={<Dashboard />} />
      </Routes>
    </Suspense>
  )
}

This speeds up initial load, and loads heavy parts later.

5. Virtualize Long Lists

• Don’t render hundreds or thousands of DOM nodes at once

• Use libraries like react-window or react-virtualized

Example with react-window

<FixedSizeList
  height={400}
  itemCount={data.length}
  itemSize={50}
>
  {({ index, style }) => (
    <div style={style}>{data[index].name}</div>
  )}
</FixedSizeList>

The list only renders what’s visible on screen.

6. Optimize Images and Media

• Use compressed formats (WebP, optimized SVG)

• Lazy-load images below the fold with loading="lazy"

• Preload critical assets in your HTML head

Small images and delayed loads free up bandwidth and reduce jank.

7. Minimize Reconciliation Cost

• Give each list item a stable key (avoid using array index)

• Keep your JSX trees shallow when possible

• Avoid inline object or function props that always change

Bad key example

{items.map((item, i) => (
  <Row key={i} data={item} />
))}

Better

{items.map(item => (
  <Row key={item.id} data={item} />
))}

8. Debounce or Throttle Expensive Events

• For scroll or resize handlers, only run your code every 100ms or so

• Use lodash.debounce or write a simple debounce utility

Example

const handleScroll = debounce(() => {
  console.log(window.scrollY)
}, 100)

This avoids flooding your app with too many updates.

9. Use Production Builds

• Make sure you build with NODE_ENV=production

• Production builds remove dev warnings and enable optimizations

In Create React App or Vite, running npm run build gives you an optimized bundle.

10. Monitor and Iterate

• Add real-user monitoring with tools like Sentry or LogRocket

• Track Core Web Vitals in Google Analytics

• Revisit your profiling data every few months as your app grows

Performance work never really ends. Small gains today add up over time.

---

Putting these tips into practice will help your React app stay quick, even as you add features. Start with profiling, pick the low-hanging fruit, and keep measuring as you go. Happy coding!