useEffect gets called twice

[calebeby]

In almost all of our stories which use useEffect, we are using it inside of a function embedded in JSX like this:

{() => {
  useEffect(() => {
    // ...
  }, []);
}}

Storybook changed the number of times the function in JSX is called. Now useEffect gets called twice, even when we meant for it to be called once.

This is a problem for stories which might attach event listeners inside useEffect: we only want those listeners to get attached once, but they would get called multiple times.

We can fix this by moving the useEffect into a decorator:

(story) => {
  useEffect(() => {
    // ...
  }, []);
  return story();
},

To see an example of this change, see #1918