Storybook Docs tab becomes unresponsive for React Menu component

I'm using React 18.3.1 and Storybook 7.6.20. One of my components (ButtonMenu) causes the Docs tab in Storybook to become unresponsive — the browser tab freezes.

Here is the component:

import React, { useState } from 'react';
import { ButtonMenuProps } from './ButtonMenu.const';
import { Menu, AnchorEl } from '../Menu';
import { Button } from '../Button/Button';
import { DropdownArrowDownIcon, DropdownArrowUpIcon } from '../Icons';
import { ButtonProps } from '../Button/Button.consts';

export const ButtonMenu = ({
  buttonProps,
  children,
  showArrowIcon,
  ...rest
}: ButtonMenuProps) => {
  const [anchorEl, setEnchorEl] = useState<AnchorEl>();
  const handleAnchorElSet = (anchorEl: AnchorEl) => {
    setEnchorEl(anchorEl);
  };
  const additionalProps: ButtonProps = showArrowIcon
    ? {
        style: {
          flexDirection: 'row-reverse',
          gap: '8px',
          paddingRight: '0',
        },
        icon: Boolean(anchorEl) ? (
          <DropdownArrowUpIcon className="cptls-menu-icon" />
        ) : (
          <DropdownArrowDownIcon className="cptls-menu-icon" />
        ),
      }
    : {};

  return (
    <Menu {...rest} onAnchorElSet={handleAnchorElSet}>
      <Button {...buttonProps} {...additionalProps} avoidBlur>
        {children}
      </Button>
    </Menu>
  );
};

And the Storybook story:

import React from 'react';
import { Meta, StoryFn } from '@storybook/react';
import {
  ButtonMenu,
  ButtonMenuProps,
  CopyIcon,
  VARIANT,
} from '../src';

export default {
  title: 'Menus/ButtonMenu',
  component: ButtonMenu,
} as Meta;

export const MenuWithDropdownLikeIcon = () => (
  <ButtonMenu
    showArrowIcon
    buttonProps={{ variant: VARIANT.TERTIARY }}
    sections={[
      {
        menuItems: [
          { label: 'Menu Item' },
          { label: 'Menu Item' },
          { label: 'Menu Item' },
        ],
      },
    ]}
  >
    Update Data
  </ButtonMenu>
);

What could cause the Docs tab to freeze or become unresponsive for this component? Are there known performance issues or best practices for handling stateful components in Storybook Docs?

Solution

The issue was related to how Storybook renders source code in the Docs tab for components with state and nested elements. The Docs tab was freezing or becoming unresponsive because Storybook was trying to auto-generate the source code preview, which can be problematic for dynamic or complex components.

To fix it, I added the properties configuration to the default export in my story file:

export default {
  title: 'Menus/ButtonMenu',
  component: ButtonMenu,
  parameters: {
    docs: {
      story: {
        inline: true,
      },
      source: {
        type: 'code',
        transform: () => null,
      },
    },
  },
} as Meta;

This disables the automatic source code rendering, which resolved the performance issue in the Docs tab. Now everything works smoothly again.