Merge pull request #19125 from storybookjs/react-18-followup

React: Fix issue with react 18 implementation
storybookjs · Sep 8, 2022 · bae212c · bae212c
2 parents 64dd6b1 + 4283383
commit bae212c
Show file tree

Hide file tree

Showing 2 changed files with 11 additions and 15 deletions.
diff --git a/code/lib/store/template/stories/rendering.stories.ts b/code/lib/store/template/stories/rendering.stories.ts
@@ -30,13 +30,13 @@ export const ChangeArgs = {
     await button.focus();
     await expect(button).toHaveFocus();
 
-    // // When we change the args to the button, it should not rerender
-    // await channel.emit('updateStoryArgs', { storyId: id, updatedArgs: { children: 'New Text' } });
-    // await within(canvasElement).findByText(/New Text/);
-    // await expect(button).toHaveFocus();
+    // When we change the args to the button, it should not rerender
+    await channel.emit('updateStoryArgs', { storyId: id, updatedArgs: { children: 'New Text' } });
+    await within(canvasElement).findByText(/New Text/);
+    await expect(button).toHaveFocus();
 
-    // await channel.emit('resetStoryArgs', { storyId: id });
-    // await within(canvasElement).findByText(/Click me/);
-    // await expect(button).toHaveFocus();
+    await channel.emit('resetStoryArgs', { storyId: id });
+    await within(canvasElement).findByText(/Click me/);
+    await expect(button).toHaveFocus();
   },
 };
diff --git a/code/renderers/react/src/render.tsx b/code/renderers/react/src/render.tsx
@@ -39,10 +39,10 @@ const WithCallback: FC<{ callback: () => void; children: ReactElement }> = ({
   children,
 }) => {
   // See https://github.com/reactwg/react-18/discussions/5#discussioncomment-2276079
-  const once = useRef(false);
+  const once = useRef<() => void>();
   useLayoutEffect(() => {
-    if (once.current) return;
-    once.current = true;
+    if (once.current === callback) return;
+    once.current = callback;
     callback();
   }, [callback]);
 
@@ -55,11 +55,7 @@ const renderElement = async (node: ReactElement, el: Element) => {
 
   return new Promise((resolve) => {
     if (root) {
-      root.render(
-        <WithCallback key={Math.random()} callback={() => resolve(null)}>
-          {node}
-        </WithCallback>
-      );
+      root.render(<WithCallback callback={() => resolve(null)}>{node}</WithCallback>);
     } else {
       ReactDOM.render(node, el, () => resolve(null));
     }