Dropdown menu item cannot use hooks

[saskliutas]

I am adding DropdownMenu to my component and want to allow consumers of that component to control what items should be shown. I achieved that by taking an array of render functions dropdownItems: Array<(props: ItemProps) => ReactNode>. This works fine with simple components but I want to provide some DropdownItem components that use internal things that I don't want to expose through ItemProps. For that I tried using useContext, however I have encountered an error: Do not call Hooks inside useEffect(...), useMemo(...), or other built-in Hooks.. I made simple sandbox to show what I want to achieve: https://codesandbox.io/s/unruffled-darwin-6hr9g7?file=/src/App.tsx

Looking at DropdownMenu source code it looks like this is caused by this useMemo call. Is there a way to use hooks inside DropdownMenu item components?

[mayank99]

The menuItems prop is supposed to be an array of functions which return a component, rather than an array of components.

You can fix it like this:

function ContextItem({ onClick, ...props }: React.ComponentPropsWithoutRef<typeof MenuItem>) {
  const { message } = React.useContext(internalContext);
  return (
    <MenuItem
      onClick={(...args) => {
        console.log(`Context Item Clicked - ${message}`);
        onClick?.(...args);
      }}
      {...props}
    >
      ContextItem
    </MenuItem>
  );
}

- ContextItem,
+ ({ close }) => <ContextItem onClick={close} />,

[saskliutas]

🤦‍♂️ I knew I am missing something. Thanks for quick reply.