How to avoid child menu render when it is not visible?

[seperman]

Hello,
Thanks for the great menu library.

I have some menu components that depend on the state in the rest of the page.
For example, the contents of editMenu will change based on the user interactions in another component in the page. However most of the times, the editMenu is hidden until the user clicks on the MenuButton. How can I avoid the unnecessary editMenu re-renders while it is not visible? It only needs to be rendered when the user clicks on MenuButton.

    <Menu transition menuButton={<MenuButton>Edit</MenuButton>}>
      {editMenu}
    <Menu/>

"react": "^17.0.2",
"react-dom": "^17.0.2",
"@szhsin/react-menu": "^4.0.3",

[szhsin]

Hi @seperman , this is a great question. In fact, we can avoid re-rendering menu items by unmounting them, which can be achieved by the unmountOnClose prop of Menu component.

Here is a sandbox example.

Notice that when typing into the input while menu is closed, the menu items are not rendered.

[seperman]

Thanks for the prompt response!