[Bug]: SB/React diffing is very slow about storybook HOT 1 OPEN

Hey @UltimateGG thank you so much for this detailed report and repro! I'll add some detailed information to assist the maintainers/contributors when working on a solution for this.

I investigated and figured out the root cause. Storybook's addon-docs has a feature to show the rendered JSX element like so:

This is the line of code that gets executed in order to provide a stringified version of the React components, using react-element-to-jsx-string:

The problem is a combination of two things:

1. Your component's props are too huge and complex to parse, and react-element-to-jsx-string has trouble do to that in a performant way.
2. Storybook injects a jsxDecorator which, unless the user opts out of it (I'll get to it later), will execute the "stringification" of the rendered component, in every render cycle, as can be seen here:
   

   storybook/code/renderers/react/src/docs/jsxDecorator.tsx

   Line 263 in eac115d

   const rendered = renderJsx(sourceJsx, options);

It's quite unfortunate because react-element-to-jsx-string is being executed even if you're not using the component in a Storybook docs page.

To circumvent the issue, for now, you can opt-out of the jsxDecorator by adding the following parameter to your story (or to the default export):

Demo.parameters = {
  docs: {
    source: {
      type: 'code'
    }
  }
}

This should make sure the stringification won't happen and your interacting with your component will become instant again.

from storybook.