React: Fix source snippet decorator for story functions with suspense

[redbugz]

fixes #17839

In Storybook 6.4, if a story function triggers Suspense by throwing a Promise like some third party hooks do, the story will fail to render
because the useEffect is skipped the first time and then run the second time, resulting in the
"Rendered more hooks than during the previous render." error
This runs the story function after the useEffect hook so the same number of hooks are run whether it triggers suspense or not, and in keeping with the guidelines on not conditionally running hooks.

This is preventing us from upgrading to 6.4, so it would be nice if this were backported to the 6.4 release as well.

Example scenario:

export function MyStory() {
  const [data] = useSomeHook() // <-- this third party hook triggers Suspense and will throw a Promise

  return <MyComponent data={data} />
}

There probably aren't too many hooks triggering Suspense yet, but we use one, and I imagine it will increase as React 18 and concurrent mode become more common, and especially once Suspense for Data Fetching is generally released.

We could wrap every story that uses this third-party hook in our own Suspense, but that seems tedious and can't be done with a decorator (we already have a decorator that wraps all our stories in Suspense, but this is called outside of that scope)

function MyStoryInner() {
  const [data] = useSomeHook() // <-- this third party hook triggers Suspense and will throw a Promise

  return <MyComponent data={data} />
}

export function MyStory() {
  return <Suspense fallback="Loading ..."><MyStoryInner /></Suspense>
}

But that seems tedious and makes it harder to write clean stories.

Issue:

What I did

I moved the execution of the storyFn until after the useEffect so the useEffect will run even if storyFn throws a Promise.

I don't understand the scope and semantics of SNIPPET_RENDERED enough to know if the useEffect should skip emitting that event until the Suspense resolves, or if it would be better to wrap the StoryFn in a <Suspense /> tag and provide some kind of fallback UI. Right now it will emit SNIPPET_RENDERED with an empty string until the Suspense resolves, then it will submit it again on the second render with the correct story content.

How to test

• Is this testable with Jest or Chromatic screenshots?
• Does this need a new example in the kitchen sink apps?
• Does this need an update to the documentation?

If your answer is yes to any of these, please make sure to include it in your PR.

[nx-cloud]

☁️ Nx Cloud Report

CI is running/has finished running commands for commit ba31493. As they complete they will appear below. Click to see the status, the terminal output, and the build insights.

📂 See all runs for this branch

---

✅ Successfully ran 1 target

• nx run-many --target=prepare --all --parallel=2 --max-parallel=15 -- --optimized

---

Sent with 💌 from NxCloud.

[yannbf]

Hey @redbugz thanks for making this PR! Seems like a delicate change, @ndelangen could you take a look at this? Thanks!