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

Describe the bug When adding a decorator to .storybook/preview.js an error occurs: “Rendered more hooks than during the previous render.”

Error
Rendered more hooks than during the previous render.
Call Stack
 useHook
  vendors~main.iframe.bundle.js:11148:13
 useMemoLike
  vendors~main.iframe.bundle.js:11175:18
 useMemo
  vendors~main.iframe.bundle.js:11187:10
 withBackground
  vendors~main.iframe.bundle.js:3858:106
 undefined
  vendors~main.iframe.bundle.js:11056:21
 undefined
  vendors~main.iframe.bundle.js:12992:12
 undefined
  vendors~main.iframe.bundle.js:12999:14
 renderWithHooks
  vendors~main.iframe.bundle.js:249128:18
 mountIndeterminateComponent
  vendors~main.iframe.bundle.js:251954:13
 beginWork
  vendors~main.iframe.bundle.js:253192:16

To Reproduce Repro: TBD

Add the following code to your .storybook/preview.js

export const decorators = [Story => <Story />];

System

  System:
    OS: macOS 11.4
    CPU: (16) x64 Intel(R) Core(TM) i9-9880H CPU @ 2.30GHz
  Binaries:
    Node: 14.16.0 - ~/.nvm/versions/node/v14.16.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.14.11 - ~/.nvm/versions/node/v14.16.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.101
    Firefox: 87.0
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.2.9 => 6.2.9 
    @storybook/addon-essentials: ^6.2.9 => 6.2.9 
    @storybook/addon-links: ^6.2.9 => 6.2.9 
    @storybook/react: ^6.2.9 => 6.2.9 

[penx]

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>
    );
  },
];

[redbugz]

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