Component Re-rendering: How to profile and fix slow UIs

React Performance Profiling

In React, a "Re-render" isn't necessarily bad. But **Wasted Re-renders** (when a component renders but the DOM doesn't change) can turn a fast app into a laggy mess. As a frontend architect, you must know how to use the React DevTools Profiler to find these killers.

1. The Profiler "Flame Chart"

The Profiler shows you a bar for every component.

Gray Bars: The component did NOT re-render. (Perfect).
Colored Bars: The component re-rendered. The wider the bar, the longer it took.

Click on a colored bar, and React will tell you exactly which prop or state change caused that specific component to wake up.

2. Fixing the "Drilling" Re-render

If a parent state changes, all children re-render by default. You can stop this using React.memo(). It performs a "Shallow Comparison" of the props. If the props are and identical, React skips the component entirely.

4. Interview Mastery

Q: "Why would you NOT want to wrap every component in React.memo?"

Architect Answer: "Because `React.memo` is not free. It involves storing a copy of the old props in memory and performing a comparison on every render. If your component is small and simple (like an icon or a basic button), the 'Shallow Comparison' can actually take MORE time than just letting React re-render. Memoization should be reserved for expensive components or components that re-render hundreds of times per second."

Interview Q&A for this course