Update subscription-in-startTransition warning

The message now explicitly mentions the useSyncExternalStore API.
facebook · Feb 23, 2022 · 9e4c304 · 9e4c304
1 parent 97673a6
commit 9e4c304
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 15 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberHooks.new.js b/packages/react-reconciler/src/ReactFiberHooks.new.js
@@ -1995,9 +1995,11 @@ function startTransition(setPending, callback) {
         const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
-            'Detected a large number of updates inside startTransition. ' +
-              'If this is due to a subscription please re-write it to use React provided hooks. ' +
-              'Otherwise concurrent mode guarantees are off the table.',
+            'Detected a large number of updates within a startTransition ' +
+              'scope. This likely means you have subscribed to an external ' +
+              'store. To ensure compatibility with concurrent features ' +
+              'like startTransition, subscriptions should be managed by the ' +
+              'useSyncExternalStore API.',
           );
         }
         currentTransition._updatedFibers.clear();

diff --git a/packages/react-reconciler/src/ReactFiberHooks.old.js b/packages/react-reconciler/src/ReactFiberHooks.old.js
@@ -1995,9 +1995,11 @@ function startTransition(setPending, callback) {
         const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
-            'Detected a large number of updates inside startTransition. ' +
-              'If this is due to a subscription please re-write it to use React provided hooks. ' +
-              'Otherwise concurrent mode guarantees are off the table.',
+            'Detected a large number of updates within a startTransition ' +
+              'scope. This likely means you have subscribed to an external ' +
+              'store. To ensure compatibility with concurrent features ' +
+              'like startTransition, subscriptions should be managed by the ' +
+              'useSyncExternalStore API.',
           );
         }
         currentTransition._updatedFibers.clear();

diff --git a/packages/react/src/ReactStartTransition.js b/packages/react/src/ReactStartTransition.js
@@ -27,9 +27,11 @@ export function startTransition(scope: () => void) {
         const updatedFibersCount = currentTransition._updatedFibers.size;
         if (updatedFibersCount > 10) {
           console.warn(
-            'Detected a large number of updates inside startTransition. ' +
-              'If this is due to a subscription please re-write it to use React provided hooks. ' +
-              'Otherwise concurrent mode guarantees are off the table.',
+            'Detected a large number of updates within a startTransition ' +
+              'scope. This likely means you have subscribed to an external ' +
+              'store. To ensure compatibility with concurrent features ' +
+              'like startTransition, subscriptions should be managed by the ' +
+              'useSyncExternalStore API.',
           );
         }
         currentTransition._updatedFibers.clear();

diff --git a/packages/react/src/__tests__/ReactStartTransition-test.js b/packages/react/src/__tests__/ReactStartTransition-test.js
@@ -63,9 +63,11 @@ describe('ReactStartTransition', () => {
       });
     }).toWarnDev(
       [
-        'Detected a large number of updates inside startTransition. ' +
-          'If this is due to a subscription please re-write it to use React provided hooks. ' +
-          'Otherwise concurrent mode guarantees are off the table.',
+        'Detected a large number of updates within a startTransition ' +
+          'scope. This likely means you have subscribed to an external ' +
+          'store. To ensure compatibility with concurrent features ' +
+          'like startTransition, subscriptions should be managed by the ' +
+          'useSyncExternalStore API.',
       ],
       {withoutStack: true},
     );
@@ -80,9 +82,11 @@ describe('ReactStartTransition', () => {
       });
     }).toWarnDev(
       [
-        'Detected a large number of updates inside startTransition. ' +
-          'If this is due to a subscription please re-write it to use React provided hooks. ' +
-          'Otherwise concurrent mode guarantees are off the table.',
+        'Detected a large number of updates within a startTransition ' +
+          'scope. This likely means you have subscribed to an external ' +
+          'store. To ensure compatibility with concurrent features ' +
+          'like startTransition, subscriptions should be managed by the ' +
+          'useSyncExternalStore API.',
       ],
       {withoutStack: true},
     );