██FR█████ █INTELL███████████

React Performance Profiling: Finding and Fixing Bottlenecks


This content originally appeared on DEV Community and was authored by Sachin Maurya

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

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

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?


This content originally appeared on DEV Community and was authored by Sachin Maurya