Open UltimateGG opened 3 months ago
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: https://github.com/storybookjs/storybook/blob/b94ad4473564d8ca16f252f3b038e6aedf2df08e/code/renderers/react/src/docs/jsxDecorator.tsx#L173
The problem is a combination of two things:
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:
https://github.com/storybookjs/storybook/blob/eac115d7f30975b57bef1f33979cdae9f0d8e7fc/code/renderers/react/src/docs/jsxDecorator.tsx#L263It'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.
Describe the bug
This is a pretty niche case, but it is with a popular library (
tanstack/react-table
), and shows something underlying must be wrong.The reason I say it is the React diffing is because in the reproduction url, uncommenting line 139 (Removing table from being passed in props) fixes the issue.
table
is a huge object with lots of functions (you can console.log it to see). This does not happen in normal React so it is not a react-table issue.I doubt it is only for react-table, but this is the use case I found the issue in. It most likely happens from large deep objects (Needs further narrowing/testing though).
Just noting it down: In the profiler I also see a function called "hookify" a lot which comes from storybook.
Reproduction link
https://stackblitz.com/edit/github-8gtech
Reproduction steps
System
Additional context
This is a very odd bug because you can remove the
props: any
from the Demo story, and the issue is fixed. I need to be able to pass props to this story though.