How to get rid of redundant renders?

Question

React

I have two menus. Each highlights its active item. It is defined using withRouter . BUT when switching in one menu, re-rendering occurs in another, which, in my opinion, is not good. This happens due to the fact that the props lacation.pathname is changed , which is used both there and there. What is the best way to implement active points then?
As an option, in each menu, create an array with all your own routes, and in shouldComponentUpdate check for the presence of the current route. It smells like a crutch .... Or not?

Answer 1

and each menu cannot have its own local state that will store the active item? Or is it somehow tied to the general navigation of the application?