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?

Answer 1

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