Bug: setState updater called but not rendered, in Safari, in concurrent mode

[jamesknelson]

React version: 18.0.0-alpha-9175f4d15-20210928

Steps To Reproduce

Minimal reproduction in this codesandbox.

This issue only appears in Safari, including mobile Safari. It works fine in Chrome and Firefox.

In order to reproduce, you'll need to:

0. Render the app with createRoot in the latest 18.0 alpha
1. Within an element's ref function, append an iframe to that element using appendChild

The following steps have been removed after simplifying the reproduction:

1. Make a state change originating in a message from a YouTube embed iframe. I assume the same issue would occur with messages from other cross domain iframes, although I have not tested this. The issue does not appear when making an async state change through setTimeout.
2. Render a tooltip using the "tippy.js" library. I haven't dug into what inside of Tippy is causing this, but commenting out the tippy element resolves the issue. I have confirmed that rendering a simple portal does not reproduce the issue.

Link to code example:

https://codesandbox.io/s/black-moon-ymw10?file=/src/index.js

The current behavior

In the example in safari, the updater function passed to setState is run (confirmed with the "run state updater" console.log)... but the new state is never passed to the component function, leaving the app hanging with no error message, and displaying "not done".

The expected behavior

In Chrome and Firefox, the App component updates after the state updater function is called, as expected, displaying "done".

---

Thanks for all the wonderful work on React, btw! It's been a lot of fun playing with the new concurrent React features. Can't wait to see them hit a stable release!

[eps1lon]

Confirmed with Safari 14.1.2.

Works with a production build though: https://csb-y2mb5-bjp2gai2h-eps1lon.vercel.app/

I would also open this against the tippy.js repository since they are more likely to know if they're doing something funky.

[jamesknelson]

I've done a little more playing with this and it turns out it's not postMessage that's triggering the issue, but adding an iframe in the ref.

Here's another demo with an <iframe src="localhost"> added within the ref function: https://codesandbox.io/s/sharp-fermat-zvmoi?file=/src/index.js

[jamesknelson]

I've played with this a little more and managed to reproduce the issue without any dependencies other than React: https://codesandbox.io/s/black-moon-ymw10?file=/src/index.js

The trigger seems to be appending an iframe to an element within its ref function. Appending a div does not cause the issue, and rendering a <iframe /> element using React (instead of manually appending with appendChild) also avoids the issue.

Will update the steps to reproduce.

[stale]

This issue has been automatically marked as stale. If this issue is still affecting you, please leave any comment (for example, "bump"), and we'll keep it open. We are sorry that we haven't been able to prioritize it yet. If you have any new additional information, please include it with your comment!

[jamesknelson]

Confirmed this issue still exists on Safari 14.1.1, with react 18.0.0-rc.0

[gaearon]

Seems like a bug. Have you tried debugging what's causing the difference in behavior? We haven't looked into this yet.

[jamesknelson]

I haven't been able to figure it out myself. For now I've just disabled some of my app's functionality in safari as a workaround, although it would be nice to see a fix, as appending an iframe inside a ref callback is useful when dealing with the YouTube embed API.

[gaearon]

A bit of an investigation shows that we hit this in Safari. I don't know why.

react/packages/react-reconciler/src/ReactFiberWorkLoop.new.js

Lines 1094 to 1095 in 51947a1

	if ((executionContext & (RenderContext | CommitContext)) !== NoContext) {
	throw new Error('Should not already be working.');

I also don't know why the error end up silenced.

[gaearon]

Apparently calling appendChild with the iframe in Safari causes scheduled microtasks to run synchronously. This shows that our userland ref callback has caused flushSyncCallbacks to run during commit phase which React probably doesn't expect and can't handle.

[gaearon]

#23111

[gaearon]

I also don't know why the error end up silenced.

likely this:

https://bugs.webkit.org/show_bug.cgi?id=224315

[gaearon]

Related issue in Preact preactjs/preact#2814

[gaearon]

Filed platform bug as https://bugs.webkit.org/show_bug.cgi?id=235322.

[gaearon]

Fixed in @next.

https://codesandbox.io/s/silly-curran-6kk1y

[dangkhoipro]

I still encountered the bug in Safari iOS (14, 15.3.1) with a slightly different scenario.
Here is the simply reproduced codesandbox with React 18.1
https://codesandbox.io/s/pedantic-albattani-b3elrk?file=/src/App.js

[gaearon]

That one's fixed in 18.2 which was released yesterday.

[gaearon]

• webkit fix Adding iframe flushes microtasks synchronously with dirty stack WebKit/WebKit#1909