diff --git a/code/lib/store/template/stories/rendering.stories.ts b/code/lib/store/template/stories/rendering.stories.ts index 4c00bf8e32dc..f7388fe59d61 100644 --- 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 index 54260e7825aa..9ec2fffd5264 100644 --- 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( - resolve(null)}> - {node} - - ); + root.render( resolve(null)}>{node}); } else { ReactDOM.render(node, el, () => resolve(null)); }