Skip to content

Commit ffe288a

Browse files
sammy-SCsammy-SC
committed
Fix asserts caused by OffscreenComponent rendering in React Native with passChildrenWhenCloningPersistedNodes (#32528)
<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> This PR fixes asserts when `passChildrenWhenCloningPersistedNodes` is enabled for React Native and OffscreenComponent child rendering unhides host components. Discussions around possible fixes for the asserts seen in React Native suggested changing the way we handle hiding/unhiding host components by updating the fiber state with the hidden host component instead of submitting a hidden clone Fabric and keeping the original as the current fiber. Implementing this fix would require holding onto the original styling of the hidden host component. The reconciler updates the styling by adding `display: none` to hide the contents. If the original host component was already hidden, the renderer would lose that information and remove the styling when showing the contents again. To reduce the changes required to make `passChildrenWhenCloningPersistedNodes` work, this PR falls back to the original cloning method when OffscreenComponents are part of the children needed to be added back. This effectively resolve the asserts triggered by the feature in RN and improves overall performance. ## How did you test this change? <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. --> This fix was tested by enabling `passChildrenWhenCloningPersistedNodes` in an app built with React Native that had a repro for triggering the asserts. The asserts do not occur anymore when using the changes in this PR. --------- Co-authored-by: Nick <[email protected]> DiffTrain build for [cc68006](cc68006)
1 parent 5fa6693 commit ffe288a

23 files changed

+280
-240
lines changed

‎compiled-rn/VERSION_NATIVE_FB‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
19.1.0-native-fb-029e8bd6-20250306
1+
19.1.0-native-fb-cc680065-20250307

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-dev.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<10cc0214fb26fcb3aa0d21e311984e72>>
10+
* @generated SignedSource<<5edff3291918daa3857981ff8465b386>>
1111
*/
1212

1313
"use strict";
@@ -404,5 +404,5 @@ __DEV__ &&
404404
exports.useFormStatus = function () {
405405
return resolveDispatcher().useHostTransitionStatus();
406406
};
407-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
407+
exports.version = "19.1.0-native-fb-cc680065-20250307";
408408
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-prod.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<b1e41d6164c903e76d1a369ef3627687>>
10+
* @generated SignedSource<<588a475c946866c40c1cf959e83fadd6>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
206+
exports.version = "19.1.0-native-fb-cc680065-20250307";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOM-profiling.js‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<b1e41d6164c903e76d1a369ef3627687>>
10+
* @generated SignedSource<<588a475c946866c40c1cf959e83fadd6>>
1111
*/
1212

1313
"use strict";
@@ -203,4 +203,4 @@ exports.useFormState = function (action, initialState, permalink) {
203203
exports.useFormStatus = function () {
204204
return ReactSharedInternals.H.useHostTransitionStatus();
205205
};
206-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
206+
exports.version = "19.1.0-native-fb-cc680065-20250307";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-dev.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<3d5e3cf2a749819fe2ea6292b61d5613>>
10+
* @generated SignedSource<<0538a76ba9831542fbb02dae6934c679>>
1111
*/
1212

1313
/*
@@ -26064,11 +26064,11 @@ __DEV__ &&
2606426064
};
2606526065
(function () {
2606626066
var isomorphicReactPackageVersion = React.version;
26067-
if ("19.1.0-native-fb-029e8bd6-20250306" !== isomorphicReactPackageVersion)
26067+
if ("19.1.0-native-fb-cc680065-20250307" !== isomorphicReactPackageVersion)
2606826068
throw Error(
2606926069
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2607026070
(isomorphicReactPackageVersion +
26071-
"\n - react-dom: 19.1.0-native-fb-029e8bd6-20250306\nLearn more: https://react.dev/warnings/version-mismatch")
26071+
"\n - react-dom: 19.1.0-native-fb-cc680065-20250307\nLearn more: https://react.dev/warnings/version-mismatch")
2607226072
);
2607326073
})();
2607426074
("function" === typeof Map &&
@@ -26105,10 +26105,10 @@ __DEV__ &&
2610526105
!(function () {
2610626106
var internals = {
2610726107
bundleType: 1,
26108-
version: "19.1.0-native-fb-029e8bd6-20250306",
26108+
version: "19.1.0-native-fb-cc680065-20250307",
2610926109
rendererPackageName: "react-dom",
2611026110
currentDispatcherRef: ReactSharedInternals,
26111-
reconcilerVersion: "19.1.0-native-fb-029e8bd6-20250306"
26111+
reconcilerVersion: "19.1.0-native-fb-cc680065-20250307"
2611226112
};
2611326113
internals.overrideHookState = overrideHookState;
2611426114
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -26252,5 +26252,5 @@ __DEV__ &&
2625226252
listenToAllSupportedEvents(container);
2625326253
return new ReactDOMHydrationRoot(initialChildren);
2625426254
};
26255-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
26255+
exports.version = "19.1.0-native-fb-cc680065-20250307";
2625626256
})();

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-prod.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<0a10ceab8bc4a4e4452882db288d9a33>>
10+
* @generated SignedSource<<203350160db7029b23ae52387671cd50>>
1111
*/
1212

1313
/*
@@ -16173,14 +16173,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1617316173
};
1617416174
var isomorphicReactPackageVersion$jscomp$inline_1817 = React.version;
1617516175
if (
16176-
"19.1.0-native-fb-029e8bd6-20250306" !==
16176+
"19.1.0-native-fb-cc680065-20250307" !==
1617716177
isomorphicReactPackageVersion$jscomp$inline_1817
1617816178
)
1617916179
throw Error(
1618016180
formatProdErrorMessage(
1618116181
527,
1618216182
isomorphicReactPackageVersion$jscomp$inline_1817,
16183-
"19.1.0-native-fb-029e8bd6-20250306"
16183+
"19.1.0-native-fb-cc680065-20250307"
1618416184
)
1618516185
);
1618616186
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16202,10 +16202,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1620216202
};
1620316203
var internals$jscomp$inline_2290 = {
1620416204
bundleType: 0,
16205-
version: "19.1.0-native-fb-029e8bd6-20250306",
16205+
version: "19.1.0-native-fb-cc680065-20250307",
1620616206
rendererPackageName: "react-dom",
1620716207
currentDispatcherRef: ReactSharedInternals,
16208-
reconcilerVersion: "19.1.0-native-fb-029e8bd6-20250306"
16208+
reconcilerVersion: "19.1.0-native-fb-cc680065-20250307"
1620916209
};
1621016210
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1621116211
var hook$jscomp$inline_2291 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16309,4 +16309,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1630916309
listenToAllSupportedEvents(container);
1631016310
return new ReactDOMHydrationRoot(initialChildren);
1631116311
};
16312-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
16312+
exports.version = "19.1.0-native-fb-cc680065-20250307";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMClient-profiling.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<c59cb0344c0bec14080dbdd984569667>>
10+
* @generated SignedSource<<7a330aec4fa972445bd767d7231bc931>>
1111
*/
1212

1313
/*
@@ -16823,14 +16823,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1682316823
};
1682416824
var isomorphicReactPackageVersion$jscomp$inline_1912 = React.version;
1682516825
if (
16826-
"19.1.0-native-fb-029e8bd6-20250306" !==
16826+
"19.1.0-native-fb-cc680065-20250307" !==
1682716827
isomorphicReactPackageVersion$jscomp$inline_1912
1682816828
)
1682916829
throw Error(
1683016830
formatProdErrorMessage(
1683116831
527,
1683216832
isomorphicReactPackageVersion$jscomp$inline_1912,
16833-
"19.1.0-native-fb-029e8bd6-20250306"
16833+
"19.1.0-native-fb-cc680065-20250307"
1683416834
)
1683516835
);
1683616836
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16852,10 +16852,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1685216852
};
1685316853
var internals$jscomp$inline_1919 = {
1685416854
bundleType: 0,
16855-
version: "19.1.0-native-fb-029e8bd6-20250306",
16855+
version: "19.1.0-native-fb-cc680065-20250307",
1685616856
rendererPackageName: "react-dom",
1685716857
currentDispatcherRef: ReactSharedInternals,
16858-
reconcilerVersion: "19.1.0-native-fb-029e8bd6-20250306",
16858+
reconcilerVersion: "19.1.0-native-fb-cc680065-20250307",
1685916859
getLaneLabelMap: function () {
1686016860
for (
1686116861
var map = new Map(), lane = 1, index$294 = 0;
@@ -16974,4 +16974,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1697416974
listenToAllSupportedEvents(container);
1697516975
return new ReactDOMHydrationRoot(initialChildren);
1697616976
};
16977-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
16977+
exports.version = "19.1.0-native-fb-cc680065-20250307";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-dev.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<38aaa237560b9801414098eec2e540d7>>
10+
* @generated SignedSource<<bdeb7247beb66d1cca26602f057756b5>>
1111
*/
1212

1313
/*
@@ -26125,11 +26125,11 @@ __DEV__ &&
2612526125
};
2612626126
(function () {
2612726127
var isomorphicReactPackageVersion = React.version;
26128-
if ("19.1.0-native-fb-029e8bd6-20250306" !== isomorphicReactPackageVersion)
26128+
if ("19.1.0-native-fb-cc680065-20250307" !== isomorphicReactPackageVersion)
2612926129
throw Error(
2613026130
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2613126131
(isomorphicReactPackageVersion +
26132-
"\n - react-dom: 19.1.0-native-fb-029e8bd6-20250306\nLearn more: https://react.dev/warnings/version-mismatch")
26132+
"\n - react-dom: 19.1.0-native-fb-cc680065-20250307\nLearn more: https://react.dev/warnings/version-mismatch")
2613326133
);
2613426134
})();
2613526135
("function" === typeof Map &&
@@ -26166,10 +26166,10 @@ __DEV__ &&
2616626166
!(function () {
2616726167
var internals = {
2616826168
bundleType: 1,
26169-
version: "19.1.0-native-fb-029e8bd6-20250306",
26169+
version: "19.1.0-native-fb-cc680065-20250307",
2617026170
rendererPackageName: "react-dom",
2617126171
currentDispatcherRef: ReactSharedInternals,
26172-
reconcilerVersion: "19.1.0-native-fb-029e8bd6-20250306"
26172+
reconcilerVersion: "19.1.0-native-fb-cc680065-20250307"
2617326173
};
2617426174
internals.overrideHookState = overrideHookState;
2617526175
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -26629,7 +26629,7 @@ __DEV__ &&
2662926629
exports.useFormStatus = function () {
2663026630
return resolveDispatcher().useHostTransitionStatus();
2663126631
};
26632-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
26632+
exports.version = "19.1.0-native-fb-cc680065-20250307";
2663326633
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
2663426634
"function" ===
2663526635
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-prod.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<47b29a3372d33cc96afd005da9a3d840>>
10+
* @generated SignedSource<<ed9751fa94555f13c9e1cc986321aab1>>
1111
*/
1212

1313
/*
@@ -16184,14 +16184,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1618416184
};
1618516185
var isomorphicReactPackageVersion$jscomp$inline_1818 = React.version;
1618616186
if (
16187-
"19.1.0-native-fb-029e8bd6-20250306" !==
16187+
"19.1.0-native-fb-cc680065-20250307" !==
1618816188
isomorphicReactPackageVersion$jscomp$inline_1818
1618916189
)
1619016190
throw Error(
1619116191
formatProdErrorMessage(
1619216192
527,
1619316193
isomorphicReactPackageVersion$jscomp$inline_1818,
16194-
"19.1.0-native-fb-029e8bd6-20250306"
16194+
"19.1.0-native-fb-cc680065-20250307"
1619516195
)
1619616196
);
1619716197
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16213,10 +16213,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1621316213
};
1621416214
var internals$jscomp$inline_2293 = {
1621516215
bundleType: 0,
16216-
version: "19.1.0-native-fb-029e8bd6-20250306",
16216+
version: "19.1.0-native-fb-cc680065-20250307",
1621716217
rendererPackageName: "react-dom",
1621816218
currentDispatcherRef: ReactSharedInternals,
16219-
reconcilerVersion: "19.1.0-native-fb-029e8bd6-20250306"
16219+
reconcilerVersion: "19.1.0-native-fb-cc680065-20250307"
1622016220
};
1622116221
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1622216222
var hook$jscomp$inline_2294 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -16474,4 +16474,4 @@ exports.useFormState = function (action, initialState, permalink) {
1647416474
exports.useFormStatus = function () {
1647516475
return ReactSharedInternals.H.useHostTransitionStatus();
1647616476
};
16477-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
16477+
exports.version = "19.1.0-native-fb-cc680065-20250307";

‎compiled-rn/facebook-fbsource/xplat/js/RKJSModules/vendor/react/react-dom/cjs/ReactDOMProfiling-profiling.js‎

Lines changed: 6 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,7 @@
77
* @noflow
88
* @nolint
99
* @preventMunge
10-
* @generated SignedSource<<2b406c6a24893e46d90e2cab2d92492b>>
10+
* @generated SignedSource<<6d765dd4f38cc7ab485a323b437fb85d>>
1111
*/
1212

1313
/*
@@ -16838,14 +16838,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1683816838
};
1683916839
var isomorphicReactPackageVersion$jscomp$inline_1913 = React.version;
1684016840
if (
16841-
"19.1.0-native-fb-029e8bd6-20250306" !==
16841+
"19.1.0-native-fb-cc680065-20250307" !==
1684216842
isomorphicReactPackageVersion$jscomp$inline_1913
1684316843
)
1684416844
throw Error(
1684516845
formatProdErrorMessage(
1684616846
527,
1684716847
isomorphicReactPackageVersion$jscomp$inline_1913,
16848-
"19.1.0-native-fb-029e8bd6-20250306"
16848+
"19.1.0-native-fb-cc680065-20250307"
1684916849
)
1685016850
);
1685116851
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -16867,10 +16867,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1686716867
};
1686816868
var internals$jscomp$inline_1920 = {
1686916869
bundleType: 0,
16870-
version: "19.1.0-native-fb-029e8bd6-20250306",
16870+
version: "19.1.0-native-fb-cc680065-20250307",
1687116871
rendererPackageName: "react-dom",
1687216872
currentDispatcherRef: ReactSharedInternals,
16873-
reconcilerVersion: "19.1.0-native-fb-029e8bd6-20250306",
16873+
reconcilerVersion: "19.1.0-native-fb-cc680065-20250307",
1687416874
getLaneLabelMap: function () {
1687516875
for (
1687616876
var map = new Map(), lane = 1, index$294 = 0;
@@ -17143,7 +17143,7 @@ exports.useFormState = function (action, initialState, permalink) {
1714317143
exports.useFormStatus = function () {
1714417144
return ReactSharedInternals.H.useHostTransitionStatus();
1714517145
};
17146-
exports.version = "19.1.0-native-fb-029e8bd6-20250306";
17146+
exports.version = "19.1.0-native-fb-cc680065-20250307";
1714717147
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1714817148
"function" ===
1714917149
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)