Part 46: React Performance Optimization: Profiler & Memo Audits

Before optimizing your React application, measure first. Guessing where performance bottlenecks lie often leads to unneeded complexity.

1. Using the React DevTools Profiler

1. Open DevTools in Chrome/Firefox and click on the Profiler tab.
2. Click the gear icon (Settings) and check: - "Record why each component rendered while profiling."
3. Click the Record button, interact with your UI, and click Stop.

Interpreting the Results:

• Flamegraph Chart: Colors indicate rendering duration (Yellow/Orange = slow, Blue/Green = fast, Grey = did not render).
• Hover over any component bar to see the exact reason it rendered (e.g. props changed, hooks changed).

2. Top Causes of Wasted Rerenders

A. Inline Object / Array Literals in Props

// ❌ Re-creates a new object reference on every parent render
<UserCard config={{ theme: 'dark', showBio: true }} />

//  Store outside component or memoize
const userConfig = { theme: 'dark', showBio: true };
<UserCard config={userConfig} />

B. Inline Arrow Functions

// ❌ New function reference every render
<CustomButton onClick={() => handleSelect(id)} />

//  Memoize with useCallback if passed to React.memo child

3. Effective Use of React.memo

import { memo } from 'react';

const LargeTableRow = memo(function LargeTableRow({ item, onSelect }) {
  return (
    <tr>
      <td>{item.name}</td>
      <td>{item.price}</td>
      <td><button onClick={() => onSelect(item.id)}>Select</button></td>
    </tr>
  );
});

Key Takeaways

• Measure performance bottlenecks using the React DevTools Profiler before optimizing.
• Prevent broken memoization by stabilizing object references and callbacks.
• Use React.memo on components rendered many times in large lists or tables.

In Part 47, we will write unit and component tests using Vitest and React Testing Library!