In the current docs for writing decorators <Story /> will remount story for every change!

[ckwong90]

Describe the bug
In the docs
https://storybook.js.org/docs/react/writing-stories/decorators
decorators are being advised to be written using <Story />

decorators: [(Story) => <div style={{ margin: '3em' }}><Story/></div>]

However this will REMOUNT your entire story every time, canceling any HMR and react-fast-refresh. This includes making any changes using the Controls addon will trigger a full remount of your story instead of re-rendering

As seen in #12255

To change this use Story() instead of <Story />

decorators: [(Story) => <div style={{ margin: '3em' }}>{Story()}</div>]

Please ether update the docs:
https://storybook.js.org/docs/react/writing-stories/decorators
or patch the decorators such that <Story /> doesn't trigger a full remount

To Reproduce
Steps to reproduce the behavior:

1. create the default react storybook template
2. add Story => <Story /> in decorators
3. add useEffect(() => console.log("REMOUNT"), []) into the story
4. observe mounting behaviour
5. retry with Story => Story()

[stale]

Hi everyone! Seems like there hasn't been much going on in this issue lately. If there are still questions, comments, or bugs, please feel free to continue the discussion. Unfortunately, we don't have time to get to every issue. We are always open to contributions so please send us a pull request if you would like to help. Inactive issues will be closed after 30 days. Thanks!

[Javimtib92]

Totally right, I was experiencing this behaviour and I didn't know what was causing the issue, I came up to this thread and applied the suggested fix and now it is working. I think this should be fixed or documented

[shilman]

cc @jonniebigodes @tmeasday

[tmeasday]

Let's do both (document for now, fix if possible)