Component in object prop freezes the story

[GuidovdRiet]

Describe the bug
Component in object prop freezes the story. If I provide an object prop like this:

bottomLine={{
  icon: <IconAgenda />,
  text: args.bottomLineText,
}}

The component is not rendered or renders really slow. Also the actions don't work. The following component renders as expected:

// works
<Button
  topLine={args.topLineText}
/>

// does not render correctly (action add-on doesn't work)
<Button
  topLine={args.topLineText}
  bottomLine={{
    icon: <Component />,
    text: args.bottomLineText,
  }}
/>

To Reproduce
Clone the repro -> npm install -> npm run storybook -> change text in action of DoesNotWorkButton story

System

Environment Info:

  System:
    OS: macOS 11.6.4
    CPU: (8) x64 Intel(R) Core(TM) i5-1038NG7 CPU @ 2.00GHz
  Binaries:
    Node: 16.2.0 - ~/.nvm/versions/node/v16.2.0/bin/node
    Yarn: 1.22.4 - /usr/local/bin/yarn
    npm: 7.13.0 - ~/.nvm/versions/node/v16.2.0/bin/npm
  Browsers:
    Chrome: 99.0.4844.51
    Firefox: 98.0.1
    Safari: 14.1.2
  npmPackages:
    @storybook/addon-actions: ^6.4.19 => 6.4.19 
    @storybook/addon-essentials: ^6.4.19 => 6.4.19 
    @storybook/addon-interactions: ^6.4.19 => 6.4.19 
    @storybook/addon-links: ^6.4.19 => 6.4.19 
    @storybook/addon-toolbars: ^6.4.19 => 6.4.19 
    @storybook/builder-webpack5: ^6.4.19 => 6.4.19 
    @storybook/manager-webpack5: ^6.4.19 => 6.4.19 
    @storybook/node-logger: ^6.4.19 => 6.4.19 
    @storybook/preset-create-react-app: ^4.0.1 => 4.0.1 
    @storybook/react: ^6.4.19 => 6.4.19 
    @storybook/testing-library: ^0.0.9 => 0.0.9 

Additional context
This pattern used to work in previous versions of Storybook. When '@storybook/addon-docs' is not used, everything works as expected.

[pof-justinchan]

we are also experiencing this issue

[matthew-dean]

Note, we're also seeing huge story freezes. Up to 40 seconds for a single story.

For us, it wasn't related to component args. Changing from this:

// Simplified
const Template: Story = (args) => (
  <OurComponent args={args} />
)
export const Basic: Story<StoryProps> = Template.bind({})
Basic.args = args

to this:

export const Basic: Story<StoryProps> = () => (
    <OurComponent args={args} />
)

...dropped the delay / render time from 40 seconds to zero!!

[emlai]

For me, rendering the component outside the story helped:

Hangs:

export const Icons: Story<ButtonProps> = args => {
  return (
    <PropsTable
      component={Button}
      commonProps={args}
      columnTitle={xProps => Object.keys(xProps)[0]}
      xProps={[{ startIcon: <IconArrowRightArrowLeftHorizontalSMIcon /> }, { endIcon: <IconArrowRightArrowLeftHorizontalSMIcon /> }]}
      yProps={[
        { size: "x-large" },
        { size: "large" },
        { size: "medium" },
        { size: "small" },
      ]}
    />
  );
};

Works:

const icon = <IconArrowRightArrowLeftHorizontalSMIcon />;
export const Icons: Story<ButtonProps> = args => {
  return (
    <PropsTable
      component={Button}
      commonProps={args}
      columnTitle={xProps => Object.keys(xProps)[0]}
      xProps={[{ startIcon: icon }, { endIcon: icon }]}
      yProps={[
        { size: "x-large" },
        { size: "large" },
        { size: "medium" },
        { size: "small" },
      ]}
    />
  );
};

[aabuhijleh]

@matthew-dean removing the story args like this fixed the issue

export const Basic: Story<StoryProps> = () => (
    <OurComponent args={args} />
)

But this is really undesirable behaviour 😢

[shilman]

Does up upgrading to the latest 7.0 prerelease fix this?

Migration guide: https://storybook.js.org/migration-guides/7.0

[codebutler]

I noticed that the JSX rendering code sometimes gets stuck in an infinite recursion loop.

If you add this to preview.jsx does the problem go away?

export const parameters = {
  docs: {
    source: {
      // any non-empty string here will skip jsx rendering, see:
      // https://github.com/storybookjs/storybook/blob/next/code/renderers/react/src/docs/jsxDecorator.tsx#L165
      code: "hello world",
    },
  },
};

[abhijit945]

@codebutler This worked for me. Thanks!

[ottah]

If you're using 7.0 you can disable per story like so:

export const MyStory: StoryObj<typeof Component> = {
  render: (args) => {
    return (
      <>
        <Component
          {...args}
          slots={{
            prefix: <SearchIcon />
          }}
        />
      </>
    );
  },
  parameters: {
    docs: {
      source: {
        code: "disabled"
      }
    }
  }
};

[github-actions]

Hi there! Thank you for opening this issue, but it has been marked as stale because we need more information to move forward. Could you please provide us with the requested reproduction or additional information that could help us better understand the problem? We'd love to resolve this issue, but we can't do it without your help!

[github-actions]

I'm afraid we need to close this issue for now, since we can't take any action without the requested reproduction or additional information. But please don't hesitate to open a new issue if the problem persists – we're always happy to help. Thanks so much for your understanding.

[emlai]

Bump: this still causes a hang on v7.5.1.

Reopened as #19575

[ardallie]

For me, rendering the component outside the story helped:

It worked for me, too. Thanks.

[sole77850]

I noticed that the JSX rendering code sometimes gets stuck in an infinite recursion loop.

If you add this to preview.jsx does the problem go away?

export const parameters = {
  docs: {
    source: {
      // any non-empty string here will skip jsx rendering, see:
      // https://github.com/storybookjs/storybook/blob/next/code/renderers/react/src/docs/jsxDecorator.tsx#L165
      code: "hello world",
    },
  },
};

@codebutler
Counld you tell us about how to find out "infinite recursion loop" situation?
I want to analyze the problem and grow up myself, but I don't know where can I find the clues

I'm worried if my question bothers you.