DEV Community

Sachin Maurya
Sachin Maurya

Posted on

React Performance Profiling: Finding and Fixing Bottlenecks

#webdev #react #javascript #programming

When your React app slows down, guessing is the worst thing you can do.
Profiling gives you data-driven insights so you know exactly what’s causing the lag.

In this post, I’ll walk you through profiling techniques I’ve used to debug and fix real-world performance issues in React and Next.js apps.

🔍 Why Profile?

Without profiling, performance fixes are just guesses.
With profiling, you can:

  • See which components are re-rendering unnecessarily
  • Measure rendering times
  • Identify heavy computations or network delays

🛠️ Tools for Profiling React Apps

1. React DevTools Profiler

Built right into the React DevTools extension.

How to use:

  1. Open your app in Chrome or Firefox.
  2. Open DevTools → React tab → Profiler.
  3. Record interactions and see which components take the most render time.

Look for:

  • Components rendering too often
  • Large rendering times (highlighted in red)

2. Why-Did-You-Render (WDYR)

A library to spot unnecessary re-renders.

npm install @welldone-software/why-did-you-render
Enter fullscreen mode Exit fullscreen mode 
import React from "react"; if (process.env.NODE_ENV === "development") { const whyDidYouRender = require("@welldone-software/why-did-you-render"); whyDidYouRender(React, { trackAllPureComponents: true }); }
Enter fullscreen mode Exit fullscreen mode

3. Performance Tab in Chrome DevTools

For JS execution time, network delays, and layout thrashing.

Pro tip: Use it alongside the React Profiler to see both JS and React-specific issues.

🧠 Common Bottlenecks & Fixes

1. Unnecessary Re-renders

  • Use React.memo for pure components.
  • Use useCallback and useMemo to memoize functions and values.

2. Large Lists

  • Use virtualization (react-window or react-virtualized).

3. Heavy Computations

  • Move to a Web Worker.
  • Precompute on the server in Next.js getServerSideProps or getStaticProps.

4. Slow API Calls

  • Cache results with SWR or React Query.
  • Use parallel fetching instead of sequential.

📈 Best Practices for Continuous Profiling

  • Profile before and after changes to measure impact.
  • Add profiling checkpoints during big feature merges.
  • Keep performance budgets (e.g., TTI < 2s).

Final Thought:

Performance isn’t just about speed; it’s about perceived speed. Profiling lets you make targeted fixes that users actually notice.

💬 Have you tried profiling your React apps? What was your biggest “aha!” moment?

Top comments (0)