Why does the React component render?

Question

I have a rather complicated React app. The problem I am facing is that when a link is click on in the navbar the navbar re-renders. Obviously this is a sign that the app is doing unnecessary rendering. The navbar exists in a "header" component. This "header" should be fixed. But it is getting called numerous times. What is the recommended way to tell WHY a component renders. I can think of numerous reasons and I would like to start eliminating them to cut down on unnecessary renders. The component could be

Changing internal state (via useState)
useEffect
subscribed to "external" state via useSelect
have props change

There may be others. How do I tell WHY a component renders?

Props and state change in the component or parent will make it re-render. Can you please share the code? — Jibin Francis, Jan 14 '22 at 03:40

score 1 · Accepted Answer · answered Jan 15 '22 at 10:30

There (apparently) is no easy way to tell why a component renders, probably because it inherently requires deep comparison (at least to cover all cases), which can be an expensive operation.

But there are many tools and workarounds.

use the React dev tools (helps, but doesn't show why something renders)
temporarily add a useEffect to observe specific values
write a hook that can observe several specific values at once
install some node package
check out trace-why-a-react-component-is-re-rendering

Why does the React component render?

1 Answers1