Storybook: Arg changes reset component state

[jonrimmer]

Describe the bug

The documentation for args says that "When an arg’s value is changed, the component re-renders", but that does not seem to be what happens. Instead of re-rendering, the whole story/component appears to be re-instantiated from scratch, losing any existing state in the process.

To Reproduce
Steps to reproduce the behavior:

1. Run the following story:

export const Test: Story<{ count: number }> = args => {
  const [yes, setYes] = useState(false);
  useEffect(() => {
    console.log('Initalised');
  }, []);
  return (
    <div>
      <p>{yes ? 'Yes' : 'No'}</p>
      <p>Count: {args.count}</p>
      <p>
        <button onClick={() => setYes(!yes)}>Toggle</button>
      </p>
    </div>
  );
};

Test.args = {
  count: 0,
};

1. Click on "Toggle" to change "No" to "Yes".
2. Change the value of the count arg.
3. See that the value of yes gets reset to false.
4. Check the console and see that the init effect has been re-run.

Expected behavior

The story should retain the value of yes as true. The init effect should only be run once, when the story is first loaded.

Code snippets

See above.

System

Environment Info:

  System:
    OS: macOS
  Binaries:
    Node: 13.8.0 - ~/.nvm/versions/node/v13.8.0/bin/node
    Yarn: 1.22.10 - /usr/local/bin/yarn
    npm: 6.13.6 - ~/.nvm/versions/node/v13.8.0/bin/npm
  Browsers:
    Chrome: 86.0.4240.111
    Firefox: 82.0
    Safari: 14.0

Additional context
Add any other context about the problem here.

[shilman]

cc @tmeasday

[tmeasday]

@jonrimmer are you using any decorators which render the story via JSX? (<StoryFn />).

If so this is a dupe of https://github.com/storybookjs/storybook/issues/12255 and a workaround is to just use StoryFn().

[jonrimmer]

@tmeasday Ah, yes, we are. That'll be it then. Thanks.

[tmeasday]

Ok, I'm going to close this (and look at that issue again really soon!)

[morgs32]

@tmeasday this seems to be an issue without decorators. Here is some logging in the react-ts-essentials example:
https://github.com/morgs32/storybook/tree/next/examples/cra-ts-essentials

[morgs32]

When you call reactDOM.render() with new args it doesn't automatically dismount and remount?
https://github.com/storybookjs/storybook/pull/13069/files#diff-4ff35b6b89e790db308e2624d4187ab9a4cbc01bb54f92c0a0095f7b11a01189L10

[tmeasday]

@morgs32 it does too have a decorator ;):

https://github.com/morgs32/storybook/blob/94b46dcecab629508b16c805fcd6c650b40090bf/examples/cra-ts-essentials/.storybook/preview.js#L7

When you call reactDOM.render() with new args it doesn't automatically dismount and remount?

Not if the component hasn't changed, no. Try it out in codesandbox!