In react, I have a vertical menu/submenu that takes up the entire height of a page. When the menu is initially rendered, the submenus are closed. When the user clicks on an item in the menu, the area beneath it expands to show more links (submenu).

When this happens, the parent menu box re renders completely. On the one hand, this seems reasonable because the height of the menu changes (it is 100% of the height of the window already, but scrollable). On the other hand, it seems odd.

Menu Box
----------------------------------------------
|. Menu Header                               |
----------------------------------------------
|. Menu Link 1                               |
|. Menu Link 2                               |
|. Menu Link 3                               |
|.     Submenu Link 1                        |
|.     Submenu Link 2                        |
|.     Submenu Link 3                        |
|. Menu Link 4                               |
|. Menu Link 5                               |

So, the Submenu of links is initially hidden. When a “Menu Link” is clicked, the submenu area expands to show those links. When this happens, not only does the div holding the submenu render, the entire menu link area as well as the menu header and the entire menu box re renders.

This is causing INP issues. I’ve looked at state issues and there is not cross state between the menus/submenus.