Remove React warning when unmounting a docs page

[tmeasday]

Describe the bug

Warning: Attempted to synchronously unmount a root while React was already rendering. React cannot finish unmounting the root until the current render has completed, which may lead to a race condition.

[aryatalathi]

Can I work on this issue? Waiting for a reply. Thank you.

[ndelangen]

@aryatalathi yes please, that'd be great!

I can assist, if needed.

[tmeasday]

Reading this issue:

In short: Triggers a warning if you unmount a root in a ref callback. Also getting the warning of the state update is caused by a non-discrete event.

So seems intended that you use setTimeout instead? Though it is confusing to me that ref callbacks are considered "during rendering".

I think this the line where we do that (cleanup comes from here in react):

storybook/code/ui/blocks/src/components/Story.tsx

Line 50 in bbc8f9b

cleanup();

So maybe we should just wrap it in a setTimeout(...,0)? I tried that and the warning went away.

If that's the right approach, then I would want to be sure that we don't accidentally break the teardown/cleanup mechanism, which was added in: #18457

[tmeasday]

@aryatalathi - I ended up doing this: #21214

[shilman]

Hurrah!! I just released https://github.com/storybookjs/storybook/releases/tag/v7.0.0-beta.58 containing PR #21214 that references this issue. Upgrade today to the @next NPM tag to try it out!

npx sb@next upgrade --prerelease