React warning in browser console when controls are disabled

[Jakob-em]

Describe the bug When using controls: {disable: true} in the parameters of a story, the following warning message shows up in the browser console:

Warning: React has detected a change in the order of Hooks called by null. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks:

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

    in Unknown
    in Unknown
    in Unknown
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Panel)
    in Panel (created by Layout)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in div (created by Context.Consumer)
    in Styled(div) (created by Main)
    in Main (created by Layout)
    in Layout (created by Context.Consumer)
    in WithTheme(Layout)
    in Unknown
    in div (created by Context.Consumer)
    in Styled(div)
    in Unknown
    in Unknown (created by SizeMeRenderer(Component))
    in SizeMeReferenceWrapper (created by SizeMeRenderer(Component))
    in SizeMeRenderer(Component) (created by SizeMe(Component))
    in SizeMe(Component)
    in ThemeProvider
    in Unknown (created by ManagerConsumer)
    in ManagerConsumer (created by Manager)
    in EffectOnMount (created by Manager)
    in Manager (created by Context.Consumer)
    in Location (created by QueryLocation)
    in QueryLocation (created by Root)
    in LocationProvider (created by Root)
    in HelmetProvider (created by Root)
    in Root

To Reproduce npx sb@next repro

Replace "@storybook/addon-essentials" in main.js with "@storybook/addon-docs", "@storybook/addon-controls", "@storybook/addon-actions",

Add controls: {disable: true} to the parameters of the Button Story

Reload Button story page and watch the browser console.

System

  System:
    OS: macOS 11.4
    CPU: (8) arm64 Apple M1
  Binaries:
    Node: 16.0.0 - ~/.nvm/versions/node/v16.0.0/bin/node
    Yarn: 2.4.2 - ~/.nvm/versions/node/v16.0.0/bin/yarn
    npm: 7.13.0 - ~/.nvm/versions/node/v16.0.0/bin/npm
  Browsers:
    Chrome: 91.0.4472.114
    Safari: 14.1.1
  npmPackages:
    @storybook/addon-actions: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-docs: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-essentials: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/addon-links: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/node-logger: ^6.4.0-alpha.11 => 6.4.0-alpha.11
    @storybook/preset-create-react-app: ^3.1.7 => 3.1.7
    @storybook/react: ^6.4.0-alpha.11 => 6.4.0-alpha.11

Additional context I could only reproduce this when importing "@storybook/addon-docs", "@storybook/addon-controls" and "@storybook/addon-actions" instead of "@storybook/addon-essentials" so just importing "@storybook/addon-essentials" is a good workaround.

[brandondurham]

I’m only using @storybook/addon-essentials and still see the error.

Running Storybook 6.3.6. The error:

Warning: React has detected a change in the order of Hooks called by Tabs. This will lead to bugs and errors if not fixed. For more information, read the Rules of Hooks: https://reactjs.org/link/rules-of-hooks

   Previous render            Next render
   ------------------------------------------------------
1. useContext                 useState
   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^

[spector32]

Still an issue for me as well.

"@storybook/addons" "6.4.20"
"@storybook/api" "6.4.20"
"@storybook/components" "6.4.20"
"@storybook/core-events" "6.4.20"
"@storybook/csf" "0.0.2--canary.87bc651.0"
"@storybook/theming" "6.4.20"

"@storybook/addon-actions": "^6.4.19",
"@storybook/addon-essentials": "^6.4.19",
"@storybook/addon-interactions": "^6.4.19",
"@storybook/addon-links": "^6.4.19",
"@storybook/builder-webpack5": "^6.4.19",
"@storybook/manager-webpack5": "^6.4.19",
"@storybook/preset-scss": "^1.0.3",
"@storybook/react": "^6.4.19",
"@storybook/testing-library": "^0.0.9",

[orlando]

Looks like @storybook/addon-actions is the one causing the issue. If I disable it from the addons-essentials plugin it stops throwing this error.

# main.js
addons: [
  {
    name: '@storybook/addon-essentials',
    options: {
      actions: false,
    },
  },
],

[Cedric-ruiu]

I have the same issue with controls: {disable: true} using @storybook/addon-essentials on Storybook 6.5.14 The fix of @orlando is working but not useful, because action is globally disabled.

[emilschultz]

Experiencing the same issue as well (Storybook-html 6.5.14 and @storybook/addon-essentials) . It is possible to disable actions for separate stories though, so that action is not globally disabled. Just add options: { actions: false } to your story's parameters:

export default {
  title: 'Stories/myComponent,
  component: 'myComponent',
  parameters: { 
    options: { actions: false },
  }

cc @Cedric-ruiu