Component Multiple Times when Enabled

[jcq]

We are seeing an odd behavior where components seem to be reloading/remounting multiple times when this addon is enabled.

In our case, we can see this happening by adding this to a component that has stories:

React.useEffect(() => console.log('mounted'), [])

When parameters.locale and parameters.locales keys are set in preview.js, we see the console.log firing 4 times. When those are commented out, we see it fire just a single time.

This causes issues with the play functions, since the component reloads in the middle of the scripted behavior, so later interactions might be attempting to execute on elements that are no longer present.

This is with 1.0.17 of this addon, 6.4.19 of the various Storybook deps.

[stevensacks]

If you take a look at the source code, you'll see how it works.

1. Suspense is required by i18next
2. The timeout is required when changing languages in order to fully unmount/mount because <Trans> components have a tendency to not update without it.

Perhaps if you add a short delay at the start of your "play" that will solve it.

[stevensacks]

I will try a release where suspense is disabled which should resolve this issue.

[stevensacks]

@jcq I have released a version with suspense disabled. Please update and check the README for instructions.