Action logger breaks stateful components

[willdady]

I've just started using storybook and so far it's been great. I've ran into the following issue. Basically if I have a component which maintains it's own internal state the action logger causes the component to be re-rendered when called, effectively creating the component anew.

The following breaks the component by re-rendering the component...

storiesOf('ColorPicker', module)
  .add('default', () => (
    <ColorPicker onChange={action('onChange')} />
  ));

...but the following does not.

storiesOf('ColorPicker', module)
  .add('default', () => (
    <ColorPicker onChange={(color) => console.log(color)} />
  ));

Is this the expected behaviour? Should calling action() really cause a re-render?

[arunoda]

I can see what's going on here. We should not render in that case.

Note:
Find out a way to stop rendering preview iframe if there's no related data change.

[necolas]

That sounds good! The re-render also causes assets like images to flash every time an action is taken as the whole story gets re-rendered.

[arunoda]

Actually, I find out a simple way to fix this.
Here's the line we need to focus: https://github.com/kadirahq/react-storybook/blob/master/src/client/ui/preview.js#L22

We can check for equality of both selectedKind and selectedStory and proceed if only at least one of them has changed.

[arunoda]

Guys, now we've a fix for this with PR #126.
Try this version: v1.16.0

[akblurton]

I'm not sure if I'm doing anything wrong (just picked up storybook, loving it). But it seems like I still get this error if I'm passing the event object from a form submit, rather than a click. More specifically the Storage quote error. Any ideas? I'm assuming that React is sending a different event type that isn't handled.

Edit: Doing some additional testing, it is because I was proxying the default submit event listener and sending the form data as the first parameter to the passed action, and the event as the second i.e.

this.props.onSubmit(values, e)

This causes the system to hang.

[willdady]

This update seems to have fixed my original issue above. Thanks.

[arunoda]

@willdady great.
@de-monkeyz could you submit a new issue.

[arunoda]

Note: @de-monkeyz mentioned issue fixed by his PR: #132

[kevinSuttle]

I came here confused as to how to exec JS in the actions call. I'd rather just call a function on the component that sends data to the action logger.

 <ColorPicker onChange={action('state changed', this.state.colorValue)} />

[iwarner]

handleEntry: () => action('entry-change')