Fix ignored setState in Safari when iframe is touched #24459

gaearon · 2022-04-28T16:41:23Z

Just like #22459, this is caused by a Safari bug (https://bugs.webkit.org/show_bug.cgi?id=235322).

Our original solution for #22459 was #23111: if the microtask callback runs prematurely, we ignore it. This relied on the assumption that we always check for more work at the end of the task anyway. However, we don't check for more work if we aren't either rendering or committing — notably, we don't check for more work at the end of the event handler.

This fix is to allow the update to flush early. This doesn't respect batching but matches what Safari is trying to do (which is to flush everything early).

sizebot · 2022-04-28T16:46:42Z

Comparing: 340060c...b7b40cd

Critical size changes

Includes critical production bundles, as well as any change greater than 2%:

Name	+/-	Base	Current	+/- gzip	Base gzip	Current gzip
oss-stable/react-dom/cjs/react-dom.production.min.js	=	131.58 kB	131.58 kB	=	42.11 kB	42.11 kB
oss-experimental/react-dom/cjs/react-dom.production.min.js	=	136.82 kB	136.82 kB	=	43.69 kB	43.69 kB
facebook-www/ReactDOM-prod.classic.js	=	441.17 kB	441.18 kB	=	80.49 kB	80.49 kB
facebook-www/ReactDOM-prod.modern.js	=	426.38 kB	426.39 kB	=	78.29 kB	78.29 kB
facebook-www/ReactDOMForked-prod.classic.js	=	441.17 kB	441.18 kB	=	80.49 kB	80.49 kB

Significant size changes

Includes any change greater than 0.2%:

(No significant changes)

Generated by 🚫 dangerJS against b7b40cd

gaearon · 2022-04-28T16:48:22Z

packages/react-dom/src/__tests__/ReactDOMSafariMicrotaskBug-test.js

-      queue.forEach(cb => cb());
-      queue = [];
+    flushMicrotasksPrematurely = function() {
+      while (queue.length > 0) {


This simulates the Safari behavior of trying to drain the queue until it's empty. So that we don't "fix" this by adding an infinite loop.

Proof:

<body> <script> let busy = true const callback = () => { if (busy) { console.error('noo im busy') queueMicrotask(callback) } else { console.log('im ok') } } queueMicrotask(callback); console.log("will add iframe"); const iframe = document.createElement("iframe"); iframe.src = "localhost"; document.body.appendChild(iframe); console.log("did add iframe"); busy = false </script> </body>

gets Safari infinitely stuck

gaearon · 2022-05-06T20:53:32Z

ping @acdlite

Summary: This sync includes the following changes: - **[dd4950c90](facebook/react@dd4950c90 )**: [Flight] Implement useId hook ([#24172](facebook/react#24172)) //<Josh Story>// - **[26a5b3c7f](facebook/react@26a5b3c7f )**: Explicitly set `highWaterMark` to 0 for `ReadableStream` ([#24641](facebook/react#24641)) //<Josh Larson>// - **[aec575914](facebook/react@aec575914 )**: [Fizz] Send errors down to client ([#24551](facebook/react#24551)) //<Josh Story>// - **[a2766387e](facebook/react@a2766387e )**: [Fizz] Improve text separator byte efficiency ([#24630](facebook/react#24630)) //<Josh Story>// - **[f7860538a](facebook/react@f7860538a )**: Fix typo in useSyncExternalStore main entry point error ([#24631](facebook/react#24631)) //<François Chalifour>// - **[1bed20731](facebook/react@1bed20731 )**: Add a module map option to the Webpack Flight Client ([#24629](facebook/react#24629)) //<Sebastian Markbåge>// - **[b2763d3ea](facebook/react@b2763d3ea )**: Move hydration code out of normal Suspense path ([#24532](facebook/react#24532)) //<Andrew Clark>// - **[357a61324](facebook/react@357a61324 )**: [DevTools][Transition Tracing] Added support for Suspense Boundaries ([#23365](facebook/react#23365)) //<Luna Ruan>// - **[2c8a1452b](facebook/react@2c8a1452b )**: Fix ignored setState in Safari when iframe is touched ([#24459](facebook/react#24459)) //<dan>// - **[62662633d](facebook/react@62662633d )**: Remove enableFlipOffscreenUnhideOrder ([#24545](facebook/react#24545)) //<Ricky>// - **[34da5aa69](facebook/react@34da5aa69 )**: Only treat updates to lazy as a new mount in legacy mode ([#24530](facebook/react#24530)) //<Ricky>// - **[46a6d77e3](facebook/react@46a6d77e3 )**: Unify JSResourceReference Interfaces ([#24507](facebook/react#24507)) //<Timothy Yung>// - **[6cbf0f7fa](facebook/react@6cbf0f7fa )**: Fork ReactSymbols ([#24484](facebook/react#24484)) //<Ricky>// - **[a10a9a6b5](facebook/react@a10a9a6b5 )**: Add test for hiding children after layout destroy ([#24483](facebook/react#24483)) //<Ricky>// - **[b4eb0ad71](facebook/react@b4eb0ad71 )**: Do not replay erroring beginWork with invokeGuardedCallback when suspended or previously errored ([#24480](facebook/react#24480)) //<Josh Story>// - **[99eef9e2d](facebook/react@99eef9e2d )**: Hide children of Offscreen after destroy effects ([#24446](facebook/react#24446)) //<Ricky>// - **[ce1386028](facebook/react@ce1386028 )**: Remove enablePersistentOffscreenHostContainer flag ([#24460](facebook/react#24460)) //<Andrew Clark>// - **[72b7462fe](facebook/react@72b7462fe )**: Bump local package.json versions for 18.1 release ([#24447](facebook/react#24447)) //<Andrew Clark>// - **[22edb9f77](facebook/react@22edb9f77 )**: React `version` field should match package.json ([#24445](facebook/react#24445)) //<Andrew Clark>// - **[6bf3deef5](facebook/react@6bf3deef5 )**: Upgrade react-shallow-renderer to support react 18 ([#24442](facebook/react#24442)) //<Michael サイトー中村 Bashurov>// Changelog: [General][Changed] - React Native sync for revisions bd4784c...d300ceb jest_e2e[run_all_tests] Reviewed By: cortinico, kacieb Differential Revision: D36874368 fbshipit-source-id: c0ee015f4ef2fa56e57f7a1f6bc37dd05c949877

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [react](https://reactjs.org/) ([source](https://github.com/facebook/react/tree/HEAD/packages/react)) | dependencies | minor | [`18.1.0` -> `18.3.1`](https://renovatebot.com/diffs/npm/react/18.1.0/18.3.1) | | [@types/react](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react) ([source](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react)) | dependencies | minor | [`18.0.9` -> `18.3.12`](https://renovatebot.com/diffs/npm/@types%2freact/18.0.9/18.3.12) | --- ### Release Notes <details> <summary>facebook/react (react)</summary> ### [`v18.3.1`](https://github.com/facebook/react/blob/HEAD/CHANGELOG.md#1831-April-26-2024) [Compare Source](facebook/react@v18.3.0...v18.3.1) - Export `act` from `react` [f1338f](facebook/react@f1338f8) ### [`v18.3.0`](https://github.com/facebook/react/blob/HEAD/CHANGELOG.md#1830-April-25-2024) [Compare Source](facebook/react@v18.2.0...v18.3.0) This release is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. Read the [React 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) for more info. ##### React - Allow writing to `this.refs` to support string ref codemod [909071](facebook/react@9090712) - Warn for deprecated `findDOMNode` outside StrictMode [c3b283](facebook/react@c3b2839) - Warn for deprecated `test-utils` methods [d4ea75](facebook/react@d4ea75d) - Warn for deprecated Legacy Context outside StrictMode [415ee0](facebook/react@415ee0e) - Warn for deprecated string refs outside StrictMode [#25383](facebook/react#25383) - Warn for deprecated `defaultProps` for function components [#25699](facebook/react#25699) - Warn when spreading `key` [#25697](facebook/react#25697) - Warn when using `act` from `test-utils` [d4ea75](facebook/react@d4ea75d) ##### React DOM - Warn for deprecated `unmountComponentAtNode` [8a015b](facebook/react@8a015b6) - Warn for deprecated `renderToStaticNodeStream` [#28874](facebook/react#28874) ### [`v18.2.0`](https://github.com/facebook/react/blob/HEAD/CHANGELOG.md#1820-June-14-2022) [Compare Source](facebook/react@v18.1.0...v18.2.0) ##### React DOM - Provide a component stack as a second argument to `onRecoverableError`. ([@gnoff](https://github.com/gnoff) in [#24591](facebook/react#24591)) - Fix hydrating into `document` causing a blank page on mismatch. ([@gnoff](https://github.com/gnoff) in [#24523](facebook/react#24523)) - Fix false positive hydration errors with Suspense. ([@gnoff](https://github.com/gnoff) in [#24480](facebook/react#24480) and [@acdlite](https://github.com/acdlite) in [#24532](facebook/react#24532)) - Fix ignored `setState` in Safari when adding an iframe. ([@gaearon](https://github.com/gaearon) in [#24459](facebook/react#24459)) ##### React DOM Server - Pass information about server errors to the client. ([@salazarm](https://github.com/salazarm) and [@gnoff](https://github.com/gnoff) in [#24551](facebook/react#24551) and [#24591](facebook/react#24591)) - Allow to provide a reason when aborting the HTML stream. ([@gnoff](https://github.com/gnoff) in [#24680](facebook/react#24680)) - Eliminate extraneous text separators in the HTML where possible. ([@gnoff](https://github.com/gnoff) in [#24630](facebook/react#24630)) - Disallow complex children inside `<title>` elements to match the browser constraints. ([@gnoff](https://github.com/gnoff) in [#24679](facebook/react#24679)) - Fix buffering in some worker environments by explicitly setting `highWaterMark` to `0`. ([@jplhomer](https://github.com/jplhomer) in [#24641](facebook/react#24641)) ##### Server Components (Experimental) - Add support for `useId()` inside Server Components. ([@gnoff](https://github.com/gnoff) in [#24172](facebook/react#24172)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.bruyant.xyz/alexandre/PaletteSwitcher/pulls/49 Co-authored-by: Renovate <[email protected]> Co-committed-by: Renovate <[email protected]>

This PR contains the following updates: | Package | Type | Update | Change | |---|---|---|---| | [react-dom](https://reactjs.org/) ([source](https://github.com/facebook/react/tree/HEAD/packages/react-dom)) | dependencies | minor | [`18.1.0` -> `18.3.1`](https://renovatebot.com/diffs/npm/react-dom/18.1.0/18.3.1) | | [@types/react-dom](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/react-dom) ([source](https://github.com/DefinitelyTyped/DefinitelyTyped/tree/HEAD/types/react-dom)) | devDependencies | minor | [`18.0.3` -> `18.3.1`](https://renovatebot.com/diffs/npm/@types%2freact-dom/18.0.3/18.3.1) | --- ### Release Notes <details> <summary>facebook/react (react-dom)</summary> ### [`v18.3.1`](https://github.com/facebook/react/blob/HEAD/CHANGELOG.md#1831-April-26-2024) [Compare Source](facebook/react@v18.3.0...v18.3.1) - Export `act` from `react` [f1338f](facebook/react@f1338f8) ### [`v18.3.0`](https://github.com/facebook/react/blob/HEAD/CHANGELOG.md#1830-April-25-2024) [Compare Source](facebook/react@v18.2.0...v18.3.0) This release is identical to 18.2 but adds warnings for deprecated APIs and other changes that are needed for React 19. Read the [React 19 Upgrade Guide](https://react.dev/blog/2024/04/25/react-19-upgrade-guide) for more info. ##### React - Allow writing to `this.refs` to support string ref codemod [909071](facebook/react@9090712) - Warn for deprecated `findDOMNode` outside StrictMode [c3b283](facebook/react@c3b2839) - Warn for deprecated `test-utils` methods [d4ea75](facebook/react@d4ea75d) - Warn for deprecated Legacy Context outside StrictMode [415ee0](facebook/react@415ee0e) - Warn for deprecated string refs outside StrictMode [#25383](facebook/react#25383) - Warn for deprecated `defaultProps` for function components [#25699](facebook/react#25699) - Warn when spreading `key` [#25697](facebook/react#25697) - Warn when using `act` from `test-utils` [d4ea75](facebook/react@d4ea75d) ##### React DOM - Warn for deprecated `unmountComponentAtNode` [8a015b](facebook/react@8a015b6) - Warn for deprecated `renderToStaticNodeStream` [#28874](facebook/react#28874) ### [`v18.2.0`](https://github.com/facebook/react/blob/HEAD/CHANGELOG.md#1820-June-14-2022) [Compare Source](facebook/react@v18.1.0...v18.2.0) ##### React DOM - Provide a component stack as a second argument to `onRecoverableError`. ([@gnoff](https://github.com/gnoff) in [#24591](facebook/react#24591)) - Fix hydrating into `document` causing a blank page on mismatch. ([@gnoff](https://github.com/gnoff) in [#24523](facebook/react#24523)) - Fix false positive hydration errors with Suspense. ([@gnoff](https://github.com/gnoff) in [#24480](facebook/react#24480) and [@acdlite](https://github.com/acdlite) in [#24532](facebook/react#24532)) - Fix ignored `setState` in Safari when adding an iframe. ([@gaearon](https://github.com/gaearon) in [#24459](facebook/react#24459)) ##### React DOM Server - Pass information about server errors to the client. ([@salazarm](https://github.com/salazarm) and [@gnoff](https://github.com/gnoff) in [#24551](facebook/react#24551) and [#24591](facebook/react#24591)) - Allow to provide a reason when aborting the HTML stream. ([@gnoff](https://github.com/gnoff) in [#24680](facebook/react#24680)) - Eliminate extraneous text separators in the HTML where possible. ([@gnoff](https://github.com/gnoff) in [#24630](facebook/react#24630)) - Disallow complex children inside `<title>` elements to match the browser constraints. ([@gnoff](https://github.com/gnoff) in [#24679](facebook/react#24679)) - Fix buffering in some worker environments by explicitly setting `highWaterMark` to `0`. ([@jplhomer](https://github.com/jplhomer) in [#24641](facebook/react#24641)) ##### Server Components (Experimental) - Add support for `useId()` inside Server Components. ([@gnoff](https://github.com/gnoff) in [#24172](facebook/react#24172)) </details> --- ### Configuration 📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined). 🚦 **Automerge**: Enabled. ♻ **Rebasing**: Whenever PR is behind base branch, or you tick the rebase/retry checkbox. 🔕 **Ignore**: Close this PR and you won't be reminded about these updates again. --- - [ ] If you want to rebase/retry this PR, check this box --- This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).  Reviewed-on: https://gitea.bruyant.xyz/alexandre/PaletteSwitcher/pulls/50 Co-authored-by: Renovate <[email protected]> Co-committed-by: Renovate <[email protected]>

Fix ignored setState in Safari when iframe is touched

b7b40cd

facebook-github-bot added the CLA Signed label Apr 28, 2022

gaearon requested review from acdlite and sebmarkbage April 28, 2022 16:41

facebook-github-bot added the React Core Team Opened by a member of the React Core Team label Apr 28, 2022

gaearon commented Apr 28, 2022

View reviewed changes

acdlite approved these changes May 12, 2022

View reviewed changes

gaearon merged commit 2c8a145 into facebook:main May 12, 2022

gaearon deleted the safari-flush-early branch May 12, 2022 16:58

lunaruan pushed a commit to lunaruan/react that referenced this pull request May 13, 2022

Fix ignored setState in Safari when iframe is touched (facebook#24459)

0220f92

cssecautomation mentioned this pull request Mar 3, 2023

[Snyk] Upgrade: react, react-dom OutSystems/ReactView#126

Open

cssecautomation mentioned this pull request Mar 11, 2023

[Snyk] Upgrade: react, react-dom OutSystems/ReactView#136

Open

mnathsnyk mentioned this pull request May 15, 2024

[Snyk] Upgrade: react, react-dom mnathsnyk/AWSGoat#1

Open

leanSecurityBot mentioned this pull request May 17, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.0 leantechnologies/link-sdk-react-native#83

Closed

Marv1nChaviel mentioned this pull request May 18, 2024

[Snyk] Upgrade: react, react-dom Marv1nChaviel/AppCine#5

Open

b-geyer mentioned this pull request May 18, 2024

[Snyk] Upgrade: react, react-dom Cognigy/chat-components#58

Open

NOUIY mentioned this pull request May 18, 2024

[Snyk] Upgrade: react, react-dom NOUIY/nodejs.org#1306

Open

diyakou mentioned this pull request May 18, 2024

[Snyk] Upgrade: react, react-dom diyakou/Chatgpt#97

Open

danielgtmn mentioned this pull request May 18, 2024

[Snyk] Upgrade: react, react-dom danielgtmn/unsplashimages-react#2

Closed

VikramRathodk mentioned this pull request May 18, 2024

[Snyk] Upgrade: react, react-dom VikramRathodk/login-form#5

Open

mrkamronbey mentioned this pull request Nov 6, 2024

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 mrkamronbey/workwear#56

Open

This was referenced Nov 6, 2024

[Snyk] Upgrade react from 16.14.0 to 18.3.1 jakejack13/realmeye-extension#58

Merged

[Snyk] Upgrade react-dom from 16.14.0 to 18.3.1 jakejack13/realmeye-extension#59

Closed

This was referenced Nov 7, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 Sryther/HomeComfort#58

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 Sryther/HomeComfort#59

Open

This was referenced Nov 7, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 dizee-goat/taskon.xyz#11

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 dizee-goat/taskon.xyz#12

Open

sufi0900 mentioned this pull request Nov 7, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 sufi0900/old-version-of-portfolio#275

Open

This was referenced Nov 8, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 nejidevelops/alx-react#239

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 nejidevelops/alx-react#240

Open

doperiddle mentioned this pull request Nov 8, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 doperiddle/web-examples#8

Merged

This was referenced Nov 8, 2024

[Snyk] Upgrade react from 17.0.2 to 18.3.1 https-quantumblockchainai-atlassian-net/layer0-startup#536

Open

[Snyk] Upgrade react-dom from 17.0.2 to 18.3.1 https-quantumblockchainai-atlassian-net/layer0-startup#537

Open

This was referenced Nov 9, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 iamaffanyasir/SocialPulsev2#6

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 iamaffanyasir/SocialPulsev2#7

Open

This was referenced Nov 10, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 nejidevelops/alx-react#242

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 nejidevelops/alx-react#243

Open

This was referenced Nov 10, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 zer0cheros/zer0cheros.fi#3

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 zer0cheros/zer0cheros.fi#4

Open

This was referenced Nov 11, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 mdfarhan0203/qoute-generator#1

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 mdfarhan0203/qoute-generator#2

Open

This was referenced Nov 11, 2024

[Snyk] Upgrade react from 17.0.2 to 18.3.1 https-quantumblockchainai-atlassian-net/layer0-startup#540

Open

[Snyk] Upgrade react-dom from 17.0.2 to 18.3.1 https-quantumblockchainai-atlassian-net/layer0-startup#541

Open

This was referenced Nov 12, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 LisMaRad/visual-literacy#3

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 LisMaRad/visual-literacy#4

Open

This was referenced Nov 12, 2024

[Snyk] Upgrade react from 18.2.0 to 18.3.1 thnbih/Harmonious-Living-Website#1

Open

[Snyk] Upgrade react-dom from 18.2.0 to 18.3.1 thnbih/Harmonious-Living-Website#2

Open

kibanamachine mentioned this pull request Jan 28, 2025

[8.x] Update react-is to v18.2 (main) (#204237) elastic/kibana#208609

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Fix ignored setState in Safari when iframe is touched #24459

Fix ignored setState in Safari when iframe is touched #24459

gaearon commented Apr 28, 2022 •

edited

Loading

Uh oh!

sizebot commented Apr 28, 2022

Uh oh!

gaearon Apr 28, 2022

Uh oh!

gaearon commented May 6, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

Fix ignored setState in Safari when iframe is touched #24459

Fix ignored setState in Safari when iframe is touched #24459

Conversation

gaearon commented Apr 28, 2022 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

sizebot commented Apr 28, 2022

Critical size changes

Significant size changes

Uh oh!

gaearon Apr 28, 2022

Choose a reason for hiding this comment

Uh oh!

gaearon commented May 6, 2022

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

gaearon commented Apr 28, 2022 •

edited

Loading