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?