Storybook: Knobs do not update in Storybook 5.2.0 release candidate, or 5.2.1

[rey-wright]

@shilman

Describe the bug
Knobs don't continue to update the component.

To Reproduce
https://cbinsights.github.io/form-design-system/fds-components/?path=/story/interactive-button--knobs

Go to the button and toggle the "disabled" knob on and off.

Our design system is thankfully open source, so you can try this out locally too:

https://github.com/cbinsights/form-design-system

Clone the above repo, and run yarn && yarn build:full && yarn storybook to install all dependencies and run storybook, and try to disable that button, same as on that URL above.

Now I did a bisect on this, and was able to nail down the commit that introduces this bug: 3fa319cb7bef80a82be1a1a462f7962b0dbc8379 which is the storybook upgrade to the release candidate 5.2.0 (note: updating to 5.2.1 does not fix this either)

So if you go to the commit prior: be0ead9857a40e2c720f0b8d162dc40adfa77743 and yarn install --force, you'll notice that everything fixes itself. I believe this is pretty much a smoking gun (to be fair, maybe I'm doing something that isn't supported in newer versions of Storybook too).

Expected behavior
It's expected for the knobs to continue to update... they do not.

(final note: none of the errors in the console.log are the direct result of this problem. I've fixed a lot of those locally and the problem still occurs).

Screenshots
N/A

Code snippets
N/A

System:

Environment Info:

  System:
    OS: macOS 10.14.5
    CPU: (8) x64 Intel(R) Core(TM) i5-8259U CPU @ 2.30GHz
  Binaries:
    Node: 10.16.0 - /usr/local/bin/node
    Yarn: 1.16.0 - /usr/local/bin/yarn
    npm: 6.9.0 - /usr/local/bin/npm
  Browsers:
    Chrome: 77.0.3865.90
    Firefox: 67.0.1
    Safari: 12.1.1
  npmPackages:
    @storybook/addon-actions: ^5.2.0-rc.11 => 5.2.0-rc.11 
    @storybook/addon-centered: ^5.2.0-rc.11 => 5.2.0-rc.11 
    @storybook/addon-knobs: ^5.2.0-rc.11 => 5.2.0-rc.11 
    @storybook/addon-links: ^5.2.0-rc.11 => 5.2.0-rc.11 
    @storybook/addon-notes: ^5.2.0-rc.11 => 5.2.0-rc.11 
    @storybook/addons: ^5.2.0-rc.11 => 5.2.0-rc.11 
    @storybook/react: ^5.2.0-rc.11 => 5.2.0-rc.11 
    @storybook/theming: ^5.2.0-rc.11 => 5.2.0-rc.11 

Additional context
N/A

[sathishj21]

I am also facing the same issue after upgrading to 5.2.0 version. it was working with 5.1.11 but the viewport add-on not working in 5.1.11 so I upgraded to 5.2.0 and now viewport is working fine but the knobs changes are not working after once (if I change any knob input it update the component once, after no response for any knob change).

[shilman]

@Hypnosphi could this be related to preview hooks?

[Hypnosphi]

@shilman yes, it's related. More precisely, the problem is storybook-addon-react-docgen decorator calling getStory(context) three times. It's actually fixed by https://github.com/hipstersmoothie/storybook-addon-react-docgen/pull/49, so the issue doesn't reproduce with [email protected]. @rey-wright please upgrade to this version

Nevertheless, seems like we have a bug in useEffect: it adds multiple instances of the same effect on synchronous rerender, which may lead to issues when using synchronous setState

[Hypnosphi]

UPD

may lead to issues when using synchronous setState

Not really: we clear the effects list in that case

So the problem only happens if a decorator calls getStory more than once

[dcecile]

I'm using react-docgen-typescript-loader and I don't have storybook-addon-react-docgen installed, so hipstersmoothie/storybook-addon-react-docgen#49 isn't a workaround for me.

[sebinsua]

See also: https://github.com/storybookjs/storybook/issues/8111

[Hypnosphi]

@dcecile Can you please create a GitHub repo with minimal reproduction of your setup?

[dcecile]

@Hypnosphi No problem, here's the minimal reproduction of my setup: https://github.com/dcecile/storybook-react-ts-knobs

git clone https://github.com/dcecile/storybook-react-ts-knobs.git
cd storybook-react-ts-knobs
yarn install
yarn view

When you try out the button knob stories you should see they have no effect and they generate this error message in the JavaScript console:

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

[dcecile]

Sorry, yes that's correct my issue with 5.2.1 is related only to button
knobs.

My examples "worked" in 5.1 (they buttons changed the React state), but the
button callbacks didn't get updated with new state variables so I had to
work around that with useRef (i.e. the counter would keep incrementing
from 0 to 1, because the button knob didn't get updated to the new callback
that included the 1 state in its closure).

On Wed, Sep 25, 2019 at 5:19 PM Filipp Riabchun [e-mail]
wrote:

@dcecile https://github.com/dcecile OK, looks like your issue is
related only to button knobs. Did your examples work with 5.1?

[shilman]

Yippee!! I just released https://github.com/storybookjs/storybook/releases/tag/v5.3.0-alpha.9 containing PR #8287 that references this issue. Upgrade today to try it out!

You can find this prerelease on the @next NPM tag.

Closing this issue. Please re-open if you think there's still more to do.

[dcecile]

Thanks @Hypnosphi and @shilman! The fix worked in v5.3.0-alpha.9 worked right away for my minimal reproduction, and also worked for my app once I replaced React.createElement(story) with story() in one of my decorators.

There's one more bug though: when the Storybook gets hot-reloaded, an extra button handler gets added. For my minimal repro with yarn view you'll see the counter incremented/decremented multiple times per button click after you change a source file. Do you want me to open a separate issue?

[Hypnosphi]

@dcecile yes please

[dcecile]

@Hypnosphi No problem, I've created #8298

[feonit]

5.2 still has the bug!

[shilman]

@feonit can you create a minimal repro?