Skip to content

Commit 91c9f18

Browse files
josephsavonajosephsavona
committed
[compiler] Detect known incompatible libraries (#34027)
A few libraries are known to be incompatible with memoization, whether manually via `useMemo()` or via React Compiler. This puts us in a tricky situation. On the one hand, we understand that these libraries were developed prior to our documenting the [Rules of React](https://react.dev/reference/rules), and their designs were the result of trying to deliver a great experience for their users and balance multiple priorities around DX, performance, etc. At the same time, using these libraries with memoization — and in particular with automatic memoization via React Compiler — can break apps by causing the components using these APIs not to update. Concretely, the APIs have in common that they return a function which returns different values over time, but where the function itself does not change. Memoizing the result on the identity of the function will mean that the value never changes. Developers reasonable interpret this as "React Compiler broke my code". Of course, the best solution is to work with developers of these libraries to address the root cause, and we're doing that. We've previously discussed this situation with both of the respective libraries: * React Hook Form: react-hook-form/react-hook-form#11910 (comment) * TanStack Table: #33057 (comment) and TanStack/table#5567 In the meantime we need to make sure that React Compiler can work out of the box as much as possible. This means teaching it about popular libraries that cannot be memoized. We also can't silently skip compilation, as this confuses users, so we need these error messages to be visible to users. To that end, this PR adds: * A flag to mark functions/hooks as incompatible * Validation against use of such functions * A default type provider to provide declarations for two known-incompatible libraries Note that Mobx is also incompatible, but the `observable()` function is called outside of the component itself, so the compiler cannot currently detect it. We may add validation for such APIs in the future. Again, we really empathize with the developers of these libraries. We've tried to word the error message non-judgementally, because we get that it's hard! We're open to feedback about the error message, please let us know. DiffTrain build for [4082b0e](4082b0e)
1 parent 790f9d1 commit 91c9f18

26 files changed

+275
-113
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.2.0-native-fb-872b4fef-20250828
1+
19.2.0-native-fb-4082b0e7-20250828

‎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<<900ad256fe6c3ac39b417274a1e8b35f>>
10+
* @generated SignedSource<<4175c435d44f4319000cb9436906673a>>
1111
*/
1212

1313
"use strict";
@@ -404,5 +404,5 @@ __DEV__ &&
404404
exports.useFormStatus = function () {
405405
return resolveDispatcher().useHostTransitionStatus();
406406
};
407-
exports.version = "19.2.0-native-fb-872b4fef-20250828";
407+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";
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<<9cb135702a4f45635a5a436f02e09003>>
10+
* @generated SignedSource<<5d8d1e06786393aa6dee0f4c366443e2>>
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.2.0-native-fb-872b4fef-20250828";
206+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";

‎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<<9cb135702a4f45635a5a436f02e09003>>
10+
* @generated SignedSource<<5d8d1e06786393aa6dee0f4c366443e2>>
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.2.0-native-fb-872b4fef-20250828";
206+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";

‎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<<a4c803d2d1c19c8d55e3316161f54c15>>
10+
* @generated SignedSource<<ab4680231897c4d1836653d922219a57>>
1111
*/
1212

1313
/*
@@ -29448,11 +29448,11 @@ __DEV__ &&
2944829448
};
2944929449
(function () {
2945029450
var isomorphicReactPackageVersion = React.version;
29451-
if ("19.2.0-native-fb-872b4fef-20250828" !== isomorphicReactPackageVersion)
29451+
if ("19.2.0-native-fb-4082b0e7-20250828" !== isomorphicReactPackageVersion)
2945229452
throw Error(
2945329453
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2945429454
(isomorphicReactPackageVersion +
29455-
"\n - react-dom: 19.2.0-native-fb-872b4fef-20250828\nLearn more: https://react.dev/warnings/version-mismatch")
29455+
"\n - react-dom: 19.2.0-native-fb-4082b0e7-20250828\nLearn more: https://react.dev/warnings/version-mismatch")
2945629456
);
2945729457
})();
2945829458
("function" === typeof Map &&
@@ -29489,10 +29489,10 @@ __DEV__ &&
2948929489
!(function () {
2949029490
var internals = {
2949129491
bundleType: 1,
29492-
version: "19.2.0-native-fb-872b4fef-20250828",
29492+
version: "19.2.0-native-fb-4082b0e7-20250828",
2949329493
rendererPackageName: "react-dom",
2949429494
currentDispatcherRef: ReactSharedInternals,
29495-
reconcilerVersion: "19.2.0-native-fb-872b4fef-20250828"
29495+
reconcilerVersion: "19.2.0-native-fb-4082b0e7-20250828"
2949629496
};
2949729497
internals.overrideHookState = overrideHookState;
2949829498
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -29631,5 +29631,5 @@ __DEV__ &&
2963129631
listenToAllSupportedEvents(container);
2963229632
return new ReactDOMHydrationRoot(initialChildren);
2963329633
};
29634-
exports.version = "19.2.0-native-fb-872b4fef-20250828";
29634+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";
2963529635
})();

‎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<<974ad2eb818dfd4907aab37eccdbab15>>
10+
* @generated SignedSource<<8d6d9e793eb29ee9af951fc3851228d5>>
1111
*/
1212

1313
/*
@@ -17258,14 +17258,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1725817258
};
1725917259
var isomorphicReactPackageVersion$jscomp$inline_2034 = React.version;
1726017260
if (
17261-
"19.2.0-native-fb-872b4fef-20250828" !==
17261+
"19.2.0-native-fb-4082b0e7-20250828" !==
1726217262
isomorphicReactPackageVersion$jscomp$inline_2034
1726317263
)
1726417264
throw Error(
1726517265
formatProdErrorMessage(
1726617266
527,
1726717267
isomorphicReactPackageVersion$jscomp$inline_2034,
17268-
"19.2.0-native-fb-872b4fef-20250828"
17268+
"19.2.0-native-fb-4082b0e7-20250828"
1726917269
)
1727017270
);
1727117271
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17287,10 +17287,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1728717287
};
1728817288
var internals$jscomp$inline_2565 = {
1728917289
bundleType: 0,
17290-
version: "19.2.0-native-fb-872b4fef-20250828",
17290+
version: "19.2.0-native-fb-4082b0e7-20250828",
1729117291
rendererPackageName: "react-dom",
1729217292
currentDispatcherRef: ReactSharedInternals,
17293-
reconcilerVersion: "19.2.0-native-fb-872b4fef-20250828"
17293+
reconcilerVersion: "19.2.0-native-fb-4082b0e7-20250828"
1729417294
};
1729517295
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1729617296
var hook$jscomp$inline_2566 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17388,4 +17388,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1738817388
listenToAllSupportedEvents(container);
1738917389
return new ReactDOMHydrationRoot(initialChildren);
1739017390
};
17391-
exports.version = "19.2.0-native-fb-872b4fef-20250828";
17391+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";

‎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<<e4fab2b0fb466a5647a64feca444aa96>>
10+
* @generated SignedSource<<02cfe06f045497c2649aed5a9f17bc41>>
1111
*/
1212

1313
/*
@@ -19268,14 +19268,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1926819268
};
1926919269
var isomorphicReactPackageVersion$jscomp$inline_2285 = React.version;
1927019270
if (
19271-
"19.2.0-native-fb-872b4fef-20250828" !==
19271+
"19.2.0-native-fb-4082b0e7-20250828" !==
1927219272
isomorphicReactPackageVersion$jscomp$inline_2285
1927319273
)
1927419274
throw Error(
1927519275
formatProdErrorMessage(
1927619276
527,
1927719277
isomorphicReactPackageVersion$jscomp$inline_2285,
19278-
"19.2.0-native-fb-872b4fef-20250828"
19278+
"19.2.0-native-fb-4082b0e7-20250828"
1927919279
)
1928019280
);
1928119281
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -19297,10 +19297,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1929719297
};
1929819298
var internals$jscomp$inline_2292 = {
1929919299
bundleType: 0,
19300-
version: "19.2.0-native-fb-872b4fef-20250828",
19300+
version: "19.2.0-native-fb-4082b0e7-20250828",
1930119301
rendererPackageName: "react-dom",
1930219302
currentDispatcherRef: ReactSharedInternals,
19303-
reconcilerVersion: "19.2.0-native-fb-872b4fef-20250828",
19303+
reconcilerVersion: "19.2.0-native-fb-4082b0e7-20250828",
1930419304
getLaneLabelMap: function () {
1930519305
for (
1930619306
var map = new Map(), lane = 1, index$321 = 0;
@@ -19414,4 +19414,4 @@ exports.hydrateRoot = function (container, initialChildren, options) {
1941419414
listenToAllSupportedEvents(container);
1941519415
return new ReactDOMHydrationRoot(initialChildren);
1941619416
};
19417-
exports.version = "19.2.0-native-fb-872b4fef-20250828";
19417+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";

‎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<<0486a24a2afbb4f15e0f9515e509b97f>>
10+
* @generated SignedSource<<c669e12b676113bbd946c795325d626d>>
1111
*/
1212

1313
/*
@@ -29504,11 +29504,11 @@ __DEV__ &&
2950429504
};
2950529505
(function () {
2950629506
var isomorphicReactPackageVersion = React.version;
29507-
if ("19.2.0-native-fb-872b4fef-20250828" !== isomorphicReactPackageVersion)
29507+
if ("19.2.0-native-fb-4082b0e7-20250828" !== isomorphicReactPackageVersion)
2950829508
throw Error(
2950929509
'Incompatible React versions: The "react" and "react-dom" packages must have the exact same version. Instead got:\n - react: ' +
2951029510
(isomorphicReactPackageVersion +
29511-
"\n - react-dom: 19.2.0-native-fb-872b4fef-20250828\nLearn more: https://react.dev/warnings/version-mismatch")
29511+
"\n - react-dom: 19.2.0-native-fb-4082b0e7-20250828\nLearn more: https://react.dev/warnings/version-mismatch")
2951229512
);
2951329513
})();
2951429514
("function" === typeof Map &&
@@ -29545,10 +29545,10 @@ __DEV__ &&
2954529545
!(function () {
2954629546
var internals = {
2954729547
bundleType: 1,
29548-
version: "19.2.0-native-fb-872b4fef-20250828",
29548+
version: "19.2.0-native-fb-4082b0e7-20250828",
2954929549
rendererPackageName: "react-dom",
2955029550
currentDispatcherRef: ReactSharedInternals,
29551-
reconcilerVersion: "19.2.0-native-fb-872b4fef-20250828"
29551+
reconcilerVersion: "19.2.0-native-fb-4082b0e7-20250828"
2955229552
};
2955329553
internals.overrideHookState = overrideHookState;
2955429554
internals.overrideHookStateDeletePath = overrideHookStateDeletePath;
@@ -30003,7 +30003,7 @@ __DEV__ &&
3000330003
exports.useFormStatus = function () {
3000430004
return resolveDispatcher().useHostTransitionStatus();
3000530005
};
30006-
exports.version = "19.2.0-native-fb-872b4fef-20250828";
30006+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";
3000730007
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
3000830008
"function" ===
3000930009
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<<e4d11760d01994eb0cae6086ca4b9100>>
10+
* @generated SignedSource<<1f8f1c948f52fa4ee6ba9c1236786753>>
1111
*/
1212

1313
/*
@@ -17269,14 +17269,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1726917269
};
1727017270
var isomorphicReactPackageVersion$jscomp$inline_2035 = React.version;
1727117271
if (
17272-
"19.2.0-native-fb-872b4fef-20250828" !==
17272+
"19.2.0-native-fb-4082b0e7-20250828" !==
1727317273
isomorphicReactPackageVersion$jscomp$inline_2035
1727417274
)
1727517275
throw Error(
1727617276
formatProdErrorMessage(
1727717277
527,
1727817278
isomorphicReactPackageVersion$jscomp$inline_2035,
17279-
"19.2.0-native-fb-872b4fef-20250828"
17279+
"19.2.0-native-fb-4082b0e7-20250828"
1728017280
)
1728117281
);
1728217282
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -17298,10 +17298,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1729817298
};
1729917299
var internals$jscomp$inline_2568 = {
1730017300
bundleType: 0,
17301-
version: "19.2.0-native-fb-872b4fef-20250828",
17301+
version: "19.2.0-native-fb-4082b0e7-20250828",
1730217302
rendererPackageName: "react-dom",
1730317303
currentDispatcherRef: ReactSharedInternals,
17304-
reconcilerVersion: "19.2.0-native-fb-872b4fef-20250828"
17304+
reconcilerVersion: "19.2.0-native-fb-4082b0e7-20250828"
1730517305
};
1730617306
if ("undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__) {
1730717307
var hook$jscomp$inline_2569 = __REACT_DEVTOOLS_GLOBAL_HOOK__;
@@ -17552,4 +17552,4 @@ exports.useFormState = function (action, initialState, permalink) {
1755217552
exports.useFormStatus = function () {
1755317553
return ReactSharedInternals.H.useHostTransitionStatus();
1755417554
};
17555-
exports.version = "19.2.0-native-fb-872b4fef-20250828";
17555+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";

‎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<<6953358e513e81e472bfb050e6b0e04a>>
10+
* @generated SignedSource<<8fa3c002aca208939e8997eabbefd78e>>
1111
*/
1212

1313
/*
@@ -19283,14 +19283,14 @@ ReactDOMHydrationRoot.prototype.unstable_scheduleHydration = function (target) {
1928319283
};
1928419284
var isomorphicReactPackageVersion$jscomp$inline_2286 = React.version;
1928519285
if (
19286-
"19.2.0-native-fb-872b4fef-20250828" !==
19286+
"19.2.0-native-fb-4082b0e7-20250828" !==
1928719287
isomorphicReactPackageVersion$jscomp$inline_2286
1928819288
)
1928919289
throw Error(
1929019290
formatProdErrorMessage(
1929119291
527,
1929219292
isomorphicReactPackageVersion$jscomp$inline_2286,
19293-
"19.2.0-native-fb-872b4fef-20250828"
19293+
"19.2.0-native-fb-4082b0e7-20250828"
1929419294
)
1929519295
);
1929619296
ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
@@ -19312,10 +19312,10 @@ ReactDOMSharedInternals.findDOMNode = function (componentOrElement) {
1931219312
};
1931319313
var internals$jscomp$inline_2293 = {
1931419314
bundleType: 0,
19315-
version: "19.2.0-native-fb-872b4fef-20250828",
19315+
version: "19.2.0-native-fb-4082b0e7-20250828",
1931619316
rendererPackageName: "react-dom",
1931719317
currentDispatcherRef: ReactSharedInternals,
19318-
reconcilerVersion: "19.2.0-native-fb-872b4fef-20250828",
19318+
reconcilerVersion: "19.2.0-native-fb-4082b0e7-20250828",
1931919319
getLaneLabelMap: function () {
1932019320
for (
1932119321
var map = new Map(), lane = 1, index$321 = 0;
@@ -19582,7 +19582,7 @@ exports.useFormState = function (action, initialState, permalink) {
1958219582
exports.useFormStatus = function () {
1958319583
return ReactSharedInternals.H.useHostTransitionStatus();
1958419584
};
19585-
exports.version = "19.2.0-native-fb-872b4fef-20250828";
19585+
exports.version = "19.2.0-native-fb-4082b0e7-20250828";
1958619586
"undefined" !== typeof __REACT_DEVTOOLS_GLOBAL_HOOK__ &&
1958719587
"function" ===
1958819588
typeof __REACT_DEVTOOLS_GLOBAL_HOOK__.registerInternalModuleStop &&

0 commit comments

Comments
 (0)