storybook: preview > decorators causes: "Rendered more hooks than during the previous render."

I encountered this error after enabling strict mode and fast refresh, and was able to resolve it in my decorator function by changing <Story /> to {Story()}

i.e.

// preview.tsx ❌ errors
import {DecoratorFn} from '@storybook/react';

export const decorators: DecoratorFn[] = [
  Story => {
     return (
      <ThemeProvider>
        <Story />
      </ThemeProvider>
    );
  },
];

// preview.tsx ✅ works
import {DecoratorFn} from '@storybook/react';

export const decorators: DecoratorFn[] = [
  story => {
    return (
      <ThemeProvider>
        {story()}
      </ThemeProvider>
    );
  },
];

@shilman should we patch https://github.com/storybookjs/storybook/pull/22336 back to 7.0?

I am getting this error on stories that have decorators (not conditional). Changing the syntax from <Story /> to {Story()} in the decorators seems to be a viable workaround for now.

Using Storybook 7.0.18 with Vite and React.

I missed one spot where it was setting prevMountedDecorators, once I fixed that one too, now it works for both repros, so I think we have a working solution. See the linked PR

We just ran into this again, only this time it was caused by running storybook through Cypress tests. We have a decorator for our stories that need authentication to prompt to authenticate, and that decorator works fine in storybook alone, but as soon as we try to hit those stories with Cypress tests, then we get the hooks error and those stories fail. So that’s a new wrinkle. I will continue to investigate and see if I can figure out why running inside the Cypress runner iframe causes the rendering and hooks to behave differently when just running normally.

Switching our decorator from <Story /> to {Story()} did not help in this case

For us the issue started on storybook 7.0.2, when we upgraded @storybook/builder-vite and @storybook/react-vite from 7.0.2 to 7.0.7. Reverting these two back solved the issue.

I have reproduced this issue today. https://github.com/marybeshaw/storybook-issue-15223

@seppzero reproduced this issue a year ago: https://github.com/seppzero/sb-decorator-issue.

@shilman is there anything else you need to take off the “needs reproduction” tag?

I just enabled reactOptions.strictMode and hitting this error as well.

Seems to come from a combination of reactOptions.strictMode, a preview.js decorator, and addons. I can make it go away by either removing the decorator, or disabling @storybook/addon-essentials.

Will try to make repro.

Seeing the same problem now on 7.4.4 -> Had no problems on 7.4.2 before updating

Hey, the workarounds listed here don’t work. I’m hitting this with latest SB version (7.0.23), when is 7.1.0 going to be released?

Thanks for the reminder @mcrider. I can’t push to @redbugz’s branch so I’ll just need to make a new PR from my branch I guess.

We just also run in that issue.

@shilman here is a reproduction-repo based on sb@next init https://github.com/seppzero/sb-decorator-issue. I hope that helps.

Can you please create a reproduction by running npx sb@next repro, following the instructions, and linking it in your issue description? We prioritize issues with reproductions over those without. Thank you! 🙏