Merge pull request #21214 from storybookjs/20731-fix-unmounting-warning

Docs: Remove warning when browsing away in React

code/renderers/react/template/stories/teardown.stories.tsx

@@ -0,0 +1,23 @@
+import { useEffect } from 'react';
+
+const LoggingComponent = () => {
+  useEffect(() => {
+    console.log('mounted');
+    return () => {
+      console.log('unmounted');
+    };
+  }, []);
+
+  return 'Component';
+};
+
+export default {
+  component: LoggingComponent,
+  tags: ['autodocs'],
+  parameters: {
+    storyshots: { disable: true },
+    chromatic: { disable: true },
+  },
+};
+
+export const Default = {};

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

@@ -58,7 +58,9 @@ const InlineStory: FunctionComponent<InlineStoryProps> = (props) => {
     );
     setShowLoader(false);
     return () => {
-      cleanup();
+      // It seems like you are supposed to unmount components outside of `useEffect`:
+      //   https://github.com/facebook/react/issues/25675#issuecomment-1363957941
+      setTimeout(() => cleanup(), 0);
     };
   }, [autoplay, renderStoryToElement, story]);