How can I optimize a MenuButton+Menu when rendered in 500 table rows?

[jasikpark]

I have a table that can have a large number of rows, at the end of each row is a Menu:

return (
    <>
      <MenuButton
        store={menu}
        className={`btn icon-btn ${styles.MeatballMenu_button}`}
        aria-label={ariaLabel}
        disabled={disabled}
      >
        <Meatballs />
      </MenuButton>

      <Menu store={menu} className={cn('menu-list', className)} portal={false}>
        {children}
      </Menu>
    </>
  );

I have root-caused my lag/loading issues down to the Menu; If I comment out

 <Menu store={menu} className={cn('menu-list', className)} portal={false}>
        {children}
      </Menu>

then I end up w/ a relatively lag-free list page.

Currently trying to learn how to profile and read flamegraphs 😓

<Menu /> source: https://github.com/ariakit/ariakit/blob/main/packages/ariakit-react-core/src/menu/menu.tsx

[diegohaz]

Try unmountOnHide:

<Menu
  store={menu}
  portal={false}
  unmountOnHide
  className={cn('menu-list', className)}
>
  {children}
</Menu>

[jasikpark]

I guess I could probably write up a codesandbox to mess around with at some point...

The main code is a tanstack table w/ the Menu in one of the columns, with 500 rows with unique, simple component props.

[diegohaz]

You can also implement your onOpen and onClose props using state setters:

useMenuStore({
  setOpen(open) {
    if (open) {
      onOpen?.();
    } else {
      onClose?.();
    }
  }
});

Those props don't need to be memoized in this case.

[jasikpark]

Cool! I ended up just removing the onOpen/onClose since we never used them in the app 🤷

[diegohaz]

Did that help with the perf issue? Otherwise, if you put together a CodeSandbox/StackBlitz I can take a better look.

[jasikpark]

Removing the useEffect definitely helped slightly, I'm going to drop this issue for the moment, but I have a perf issue in my project to revisit this problem / the topic later