React Re-render Rules and Profiling Bottlenecks

1. Demystifying When React Re-renders

A pervasive myth among beginner and intermediate React developers is that components only re-render when their props change. This is completely false.

In standard React:

2. The 4 Triggers of a Re-render

A component re-renders if and only if one of four events occurs:

1. 1
   Local State Update: The component calls its own useState or useReducer updater function.
2. 2
   Parent Component Re-render: The parent component re-renders (triggering an automatic downward cascade).
3. 3
   Context Consumption: A React Context that the component subscribes to via useContext changes its value.
4. 4
   Hook Update: A custom hook called inside the component triggers a state update.

3. Re-rendering vs DOM Updating

Engineers often panic when they see re-renders in DevTools, confusing a Virtual DOM re-render with a real DOM mutation.

• Re-rendering: Executing the component function in memory to produce a new Virtual DOM tree. In modern JavaScript engines, this calculation is measured in microseconds and is extremely cheap.
• Reconciliation & DOM Painting: Modifying physical DOM nodes on screen. React's diffing engine ensures that even if a component re-renders, the real browser DOM is only touched if the calculated output actually changed!

Re-renders only become a performance problem when:

• Components perform expensive computations (e.g. large mathematical matrix operations, sorting 10,000 items).
• Huge subtrees (hundreds of components) re-render on high-frequency events like typing or scrolling.

4. Profiling Bottlenecks with React DevTools

Never optimize blindly! Use the React DevTools Profiler to identify genuine bottlenecks:

1. 1
   Open DevTools -> Profiler tab.
2. 2
   Click Record (blue circle).
3. 3
   Interact with the application (e.g. type in a search box).
4. 4
   Click Stop.
5. 5
   Examine the Ranked Chart:

• Components are ordered by the amount of time they took to render.
• Look for wide, yellow, or red bars (components taking >16ms, dropping 60fps frames).
• Inspect "Why did this render?" to discover the root cause.