Locate and solve performance issue in React App

[reboottime]

Overview

This article is about general practices on solving performance issue in React app.

• general strategy on solving performance issue in react app
  
• tools used in figuring out the where the performance issue locates
• If the performance issue is in your code, how it happens, see this article

[reboottime]

General Strategy

1. Measure first, optimize later

• Use objective metrics before making assumptions
• Establish performance baselines to compare improvements

2. Isolate the problem area

• Test in production vs. development mode
• Check if issues occur in specific components/routes only

3. Use the right tools in sequence

• Browser performance tools for main thread bottlenecks
• React-specific tools for component render issues
• Memory profiling for leaks and growing memory usage

4. Identify common patterns

• Excessive re-rendering (missing memoization)
• Main thread blocking (synchronous operations)
• Memory leaks (uncleaned subscriptions/event handlers)
• Network waterfall issues (sequential API calls)

[reboottime]

Tools used for digging performance problems

Using Chrome Developer tool Performance Tab

See Screenshot below

• Frames: Visual snapshots showing how long it takes to render each visual update.
• Network: Timeline of resource requests, showing when assets load and how they impact performance. Useful for identifying slow-loading resources.
• Main: The browser's main thread activity where JavaScript runs, DOM updates, and layout calculations happen. Yellow/orange blocks represent JavaScript execution that's blocking other work.

React DevTools

See screenshot below about the Memory tab in Chrome DevTool

Performance issues in web applications can stem from network bottlenecks or main thread congestion, in react, see this screenshot. Chrome DevTools helps identify whether slow API responses are causing delays or if JavaScript execution is blocking the main thread.

React DevTools Profiler helps you log metrics and identify which components cause performance issues, see React profiler doc.

See screenshot below

Dig out Memory Leak Problem

• What is memory leak: A memory leak occurs when a program fails to release memory that's no longer needed, causing the application to consume increasing amounts of memory over time.

• How could a memory leak happens in Javascript application, see this short video's sample
  

• How memory Leak happens in React application

  • Forgotten event listeners that aren't properly removed when components unmount
  • Closures capturing references to DOM elements or components
  • setInterval/setTimeout calls without corresponding clearInterval/clearTimeout
  • Creating large objects or arrays without properly disposing them

See the memory leak problem in my small app brought by toggling the visibility of the react calendar dialog