Storybook: [addons/knobs] Component doesn't re-render on knob change

[inodino]

Describe the bug
I can't get the component to "re-render" when I change one of the knobs. It "re-renders" if I refresh the browser but not on changing the actual knob value within storybook. I am using the below packages in my package.json:

...
"@storybook/addon-actions": "^5.2.8",
"@storybook/addon-console": "^1.2.1",
"@storybook/addon-knobs": "^5.2.8",
"@storybook/addon-links": "^5.2.8",
"@storybook/addons": "^5.2.8",
"@storybook/react": "^5.2.8",
...

I have added the "withKnobs" decorator to my story and I can see the knobs in the tab. The knobs will sometimes not show up if I switch between the tabs or stories.

[stale[bot]]

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!

[stale[bot]]

Hey there, it's me again! I am going close this issue to help our maintainers focus on the current development roadmap instead. If the issue mentioned is still a concern, please open a new ticket and mention this old one. Cheers and thanks for using Storybook!

[daraclare]

I have the same issue, if I change a knob that affects the design it changes, but not if I change a knob that affects how the component renders. For instance, I have an iframe component, if it has a thumbnail, it should not render the iframe until the thumbnail is clicked, if it doesn't have a thumbnail it should render the iframe without needing to be clicked.

The story:

import { storiesOf } from '@storybook/react';
import React from 'react';
import { withKnobs, text } from '@storybook/addon-knobs';

import { Iframe } from '../Iframe';

const WidthDecorator = (storyFn: any) => (
  <div
    style={{
      maxWidth: '640px',
    }}
  >
    {storyFn()}
  </div>
);

const stories = storiesOf('Iframe', module)
  .addDecorator(withKnobs)
  .addDecorator(WidthDecorator);

stories.add('Iframe', () => (
  <Iframe
    title={text('title', 'virtual-tour')}
    src={text('src', 'some_url')}
    thumbnail={text('thumbnails', 'https://via.placeholder.com/640x360')}
    trackingAttribute="virtual-tour"
  />
));

The component:
```
export const Iframe: FC = ({
title,
src,
thumbnail,
trackingAttribute,
}) => {
const [showThumbnail, setShowThumbnail] = useState(thumbnail ? true : false);

return (
thumbnail={thumbnail ? thumbnail : ''}
data-tracking={trackingAttribute}
onClick={() => setShowThumbnail(false)}
data-testid={${title}-thumbnail}
>
{!showThumbnail && (
title={title}
src={src}
frameBorder="0"
allowFullScreen
data-testid={${title}-iframe}
/>
)}

);
};