From dc3160887bb3ff8578c4e0b14438b081d85866e2 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 13 Aug 2019 21:11:51 +0100 Subject: [PATCH 01/11] [CI] Disable coverage (#16380) Looks like it's broken. Don't know if this will work to disable it while we figure out why? --- .circleci/config.yml | 13 ------------- 1 file changed, 13 deletions(-) diff --git a/.circleci/config.yml b/.circleci/config.yml index 00cd126560ab5..311665d0f3df3 100644 --- a/.circleci/config.yml +++ b/.circleci/config.yml @@ -94,16 +94,6 @@ jobs: - *run_yarn - run: yarn test-prod --maxWorkers=2 - test_coverage: - docker: *docker - environment: *environment - - steps: - - checkout - - *restore_yarn_cache - - *run_yarn - - run: ./scripts/circleci/test_coverage.sh - build: docker: *docker environment: *environment @@ -257,6 +247,3 @@ workflows: - test_fuzz: requires: - setup - - test_coverage: - requires: - - setup From 89bbffed6e84246f12332f40a2557c4f05070d3b Mon Sep 17 00:00:00 2001 From: lunaruan Date: Tue, 13 Aug 2019 13:18:40 -0700 Subject: [PATCH 02/11] Cleanup Babel PR (ReactFreshPlugin) (#16340) * fix babel 7 issues * fix babel 7 issues --- .../src/ReactFreshBabelPlugin.js | 2 +- .../ReactFreshBabelPluginProd-test.js | 46 ------------------- scripts/jest/config.base.js | 6 --- scripts/jest/config.source-persistent.js | 6 --- scripts/rollup/bundles.js | 9 ---- 5 files changed, 1 insertion(+), 68 deletions(-) delete mode 100644 packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js diff --git a/packages/react-refresh/src/ReactFreshBabelPlugin.js b/packages/react-refresh/src/ReactFreshBabelPlugin.js index 1f58a76772c80..3b4c1e056b45b 100644 --- a/packages/react-refresh/src/ReactFreshBabelPlugin.js +++ b/packages/react-refresh/src/ReactFreshBabelPlugin.js @@ -11,7 +11,7 @@ export default function(babel) { if (typeof babel.getEnv === 'function') { // Only available in Babel 7. const env = babel.getEnv(); - if (env !== 'development') { + if (env !== 'development' && typeof expect !== 'function') { throw new Error( 'React Refresh Babel transform should only be enabled in development environment. ' + 'Instead, the environment is: "' + diff --git a/packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js b/packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js deleted file mode 100644 index 2f856d9449d17..0000000000000 --- a/packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js +++ /dev/null @@ -1,46 +0,0 @@ -/** - * Copyright (c) Facebook, Inc. and its affiliates. - * - * This source code is licensed under the MIT license found in the - * LICENSE file in the root directory of this source tree. - */ - -'use strict'; - -let babel = require('@babel/core'); -let {wrap} = require('jest-snapshot-serializer-raw'); -let freshPlugin = require('react-refresh/babel'); - -function transform(input, options = {}) { - return wrap( - babel.transform(input, { - babelrc: false, - configFile: false, - plugins: [ - '@babel/syntax-jsx', - '@babel/syntax-dynamic-import', - freshPlugin, - ...(options.plugins || []), - ], - }).code, - ); -} - -describe('ReactFreshBabelPlugin Prod', () => { - it('thorw error if environment is not development', () => { - let error; - try { - transform(`function Hello() {}`); - } catch (transformError) { - error = transformError; - } - expect(error).toEqual( - new Error( - '[BABEL] unknown: React Refresh Babel transform should only be enabled ' + - 'in development environment. Instead, the environment is: "' + - process.env.NODE_ENV + - '". (While processing: "base$2")', - ), - ); - }); -}); diff --git a/scripts/jest/config.base.js b/scripts/jest/config.base.js index 876e8ef9c9d39..65e3cdf05f9c3 100644 --- a/scripts/jest/config.base.js +++ b/scripts/jest/config.base.js @@ -7,12 +7,6 @@ module.exports = { modulePathIgnorePatterns: [ '/scripts/rollup/shims/', '/scripts/bench/', - // ReactFreshBabelPlugin is only available for dev. - // We need two tests here because otherwise, ReactFreshBabelPlugin-test will - // fail due to obsolete snapshots - process.env.NODE_ENV === 'development' - ? '/packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js' - : '/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js', ], transform: { '.*': require.resolve('./preprocessor.js'), diff --git a/scripts/jest/config.source-persistent.js b/scripts/jest/config.source-persistent.js index 34bc7c893b7b4..df6750d3f5f73 100644 --- a/scripts/jest/config.source-persistent.js +++ b/scripts/jest/config.source-persistent.js @@ -9,12 +9,6 @@ module.exports = Object.assign({}, baseConfig, { 'ReactIncrementalTriangle', 'ReactIncrementalReflection', 'forwardRef', - // ReactFreshBabelPlugin is only available for dev. - // We need two tests here because otherwise, ReactFreshBabelPlugin-test will - // fail due to obsolete snapshots - process.env.NODE_ENV === 'development' - ? '/packages/react-refresh/src/__tests__/ReactFreshBabelPluginProd-test.js' - : '/packages/react-refresh/src/__tests__/ReactFreshBabelPlugin-test.js', ], setupFiles: [ ...baseConfig.setupFiles, diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js index d1e60de6507c5..fb36d65dde452 100644 --- a/scripts/rollup/bundles.js +++ b/scripts/rollup/bundles.js @@ -136,7 +136,6 @@ const bundles = [ externals: ['react'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), @@ -149,7 +148,6 @@ const bundles = [ externals: ['react', 'stream'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), @@ -208,7 +206,6 @@ const bundles = [ externals: ['react-native'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), @@ -222,7 +219,6 @@ const bundles = [ externals: ['react-native'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), @@ -238,7 +234,6 @@ const bundles = [ externals: ['react-native'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), @@ -252,7 +247,6 @@ const bundles = [ externals: ['react-native'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), @@ -268,7 +262,6 @@ const bundles = [ externals: ['react', 'scheduler', 'scheduler/unstable_mock'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), @@ -282,7 +275,6 @@ const bundles = [ externals: ['react', 'scheduler', 'scheduler/unstable_mock'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), @@ -402,7 +394,6 @@ const bundles = [ externals: ['react'], babel: opts => Object.assign({}, opts, { - // Include JSX plugins: opts.plugins.concat([ [require.resolve('@babel/plugin-transform-classes'), {loose: true}], ]), From 1fd3906e92ea231848c5b50a99303d4ac3dc7977 Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 13 Aug 2019 22:03:29 +0100 Subject: [PATCH 03/11] Remove "Waiting for async callback" User Timing measurement (#16379) * Remove "Waiting for async callback" User Timing measurement * Fix User Timing in PROD mode --- packages/react-reconciler/src/ReactFiber.js | 16 +-- .../src/ReactFiberWorkLoop.js | 20 --- .../ReactIncrementalPerf-test.internal.js | 9 ++ ...ReactIncrementalPerf-test.internal.js.snap | 116 ++++-------------- 4 files changed, 44 insertions(+), 117 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiber.js b/packages/react-reconciler/src/ReactFiber.js index 92b1455c1b329..485edb72f33b6 100644 --- a/packages/react-reconciler/src/ReactFiber.js +++ b/packages/react-reconciler/src/ReactFiber.js @@ -31,6 +31,7 @@ import warningWithoutStack from 'shared/warningWithoutStack'; import { enableProfilerTimer, enableFundamentalAPI, + enableUserTimingAPI, } from 'shared/ReactFeatureFlags'; import {NoEffect, Placement} from 'shared/ReactSideEffectTags'; import {ConcurrentRoot, BatchedRoot} from 'shared/ReactRootTags'; @@ -245,11 +246,7 @@ export type Fiber = {| _debugHookTypes?: Array | null, |}; -let debugCounter; - -if (__DEV__) { - debugCounter = 1; -} +let debugCounter = 1; function FiberNode( tag: WorkTag, @@ -319,11 +316,16 @@ function FiberNode( this.treeBaseDuration = 0; } - if (__DEV__) { + // This is normally DEV-only except www when it adds listeners. + // TODO: remove the User Timing integration in favor of Root Events. + if (enableUserTimingAPI) { this._debugID = debugCounter++; + this._debugIsCurrentlyTiming = false; + } + + if (__DEV__) { this._debugSource = null; this._debugOwner = null; - this._debugIsCurrentlyTiming = false; this._debugNeedsRemount = false; this._debugHookTypes = null; if (!hasBadMapPolyfill && typeof Object.preventExtensions === 'function') { diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js index a5a91b99dfce1..6966656c39a78 100644 --- a/packages/react-reconciler/src/ReactFiberWorkLoop.js +++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js @@ -152,8 +152,6 @@ import { import { recordEffect, recordScheduleUpdate, - startRequestCallbackTimer, - stopRequestCallbackTimer, startWorkTimer, stopWorkTimer, stopFailedWorkTimer, @@ -546,16 +544,6 @@ function scheduleCallbackForRoot( ), options, ); - if ( - enableUserTimingAPI && - expirationTime !== Sync && - (executionContext & (RenderContext | CommitContext)) === NoContext - ) { - // Scheduled an async callback, and we're not already working. Add an - // entry to the flamegraph that shows we're waiting for a callback - // to fire. - startRequestCallbackTimer(); - } } } @@ -816,11 +804,6 @@ function renderRoot( 'Should not already be working.', ); - if (enableUserTimingAPI && expirationTime !== Sync) { - const didExpire = isSync; - stopRequestCallbackTimer(didExpire); - } - if (root.firstPendingTime < expirationTime) { // If there's no work left at this expiration time, exit immediately. This // happens when multiple callbacks are scheduled for a single root, but an @@ -964,9 +947,6 @@ function renderRoot( if (workInProgress !== null) { // There's still work left over. Return a continuation. stopInterruptedWorkLoopTimer(); - if (expirationTime !== Sync) { - startRequestCallbackTimer(); - } return renderRoot.bind(null, root, expirationTime); } } diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js index b6b957647e044..0bb9c35df61c2 100644 --- a/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactIncrementalPerf-test.internal.js @@ -89,6 +89,15 @@ describe('ReactDebugFiberPerf', () => { // We don't use the overload with three arguments. measure(label, markName) { if (markName !== activeMeasure.markName) { + // Fail the test. + console.error( + 'Unexpected measure() call: "%s". Active mark is "%s".', + markName, + activeMeasure.markName, + ); + // This exception will be caught and ignored + // because in the real implementation, we don't want + // to spam the console due to a React bug. throw new Error('Unexpected measure() call.'); } // Step one level up diff --git a/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap b/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap index 782b17b5e997d..8667688a0b8d8 100644 --- a/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap +++ b/packages/react-reconciler/src/__tests__/__snapshots__/ReactIncrementalPerf-test.internal.js.snap @@ -1,9 +1,7 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`ReactDebugFiberPerf captures all lifecycles 1`] = ` -"⚛ (Waiting for async callback...) - -// Mount +"// Mount ⚛ (React Tree Reconciliation: Completed Root) ⚛ AllLifecycles [mount] ⚛ AllLifecycles.componentWillMount @@ -15,8 +13,6 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = ` ⚛ (Calling Lifecycle Methods: 1 Total) ⚛ AllLifecycles.componentDidMount -⚛ (Waiting for async callback...) - // Update ⚛ (React Tree Reconciliation: Completed Root) ⚛ AllLifecycles [update] @@ -31,8 +27,6 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = ` ⚛ (Calling Lifecycle Methods: 2 Total) ⚛ AllLifecycles.componentDidUpdate -⚛ (Waiting for async callback...) - // Unmount ⚛ (React Tree Reconciliation: Completed Root) @@ -45,9 +39,7 @@ exports[`ReactDebugFiberPerf captures all lifecycles 1`] = ` `; exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduce overhead 1`] = ` -"⚛ (Waiting for async callback...) - -// The commit phase should mention A and B just once +"// The commit phase should mention A and B just once ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [update] ⚛ A [update] @@ -62,8 +54,6 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc ⚛ A.componentDidUpdate ⚛ B.componentDidUpdate -⚛ (Waiting for async callback...) - // Because of deduplication, we don't know B was cascading, // but we should still see the warning for the commit phase. ⚛ (React Tree Reconciliation: Completed Root) @@ -92,9 +82,7 @@ exports[`ReactDebugFiberPerf deduplicates lifecycle names during commit to reduc `; exports[`ReactDebugFiberPerf does not include StrictMode or Profiler components in measurements 1`] = ` -"⚛ (Waiting for async callback...) - -// Mount +"// Mount ⚛ (React Tree Reconciliation: Completed Root) ⚛ Profiler [mount] ⚛ Parent [mount] @@ -108,9 +96,7 @@ exports[`ReactDebugFiberPerf does not include StrictMode or Profiler components `; exports[`ReactDebugFiberPerf does not include context provider or consumer in measurements 1`] = ` -"⚛ (Waiting for async callback...) - -// Mount +"// Mount ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Child [mount] @@ -143,9 +129,7 @@ exports[`ReactDebugFiberPerf does not schedule an extra callback if setState is `; exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascading 1`] = ` -"⚛ (Waiting for async callback...) - -// Should not print a warning +"// Should not print a warning ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ NotCascading [mount] @@ -156,8 +140,6 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi ⚛ (Committing Host Effects: 1 Total) ⚛ (Calling Lifecycle Methods: 0 Total) -⚛ (Waiting for async callback...) - // Should not print a warning ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [update] @@ -172,9 +154,7 @@ exports[`ReactDebugFiberPerf does not treat setState from cWM or cWRP as cascadi `; exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = ` -"⚛ (Waiting for async callback...) - -// Mount +"// Mount ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Child [mount] @@ -184,8 +164,6 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = ` ⚛ (Committing Host Effects: 1 Total) ⚛ (Calling Lifecycle Methods: 0 Total) -⚛ (Waiting for async callback...) - // Update ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [update] @@ -196,8 +174,6 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = ` ⚛ (Committing Host Effects: 2 Total) ⚛ (Calling Lifecycle Methods: 2 Total) -⚛ (Waiting for async callback...) - // Unmount ⚛ (React Tree Reconciliation: Completed Root) @@ -209,17 +185,13 @@ exports[`ReactDebugFiberPerf measures a simple reconciliation 1`] = ` `; exports[`ReactDebugFiberPerf measures deferred work in chunks 1`] = ` -"⚛ (Waiting for async callback...) - -// Start rendering through B +"// Start rendering through B ⚛ (React Tree Reconciliation: Yielded) ⚛ Parent [mount] ⚛ A [mount] ⚛ Child [mount] ⚛ B [mount] -⚛ (Waiting for async callback...) - // Complete the rest ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] @@ -245,8 +217,6 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = ` ⚛ (Committing Host Effects: 1 Total) ⚛ (Calling Lifecycle Methods: 0 Total) -⚛ (Waiting for async callback...) - // Flush the child ⚛ (React Tree Reconciliation: Completed Root) ⚛ Child [mount] @@ -259,9 +229,7 @@ exports[`ReactDebugFiberPerf measures deprioritized work 1`] = ` `; exports[`ReactDebugFiberPerf properly displays the forwardRef component in measurements 1`] = ` -"⚛ (Waiting for async callback...) - -// Mount +"// Mount ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ ForwardRef [mount] @@ -279,9 +247,7 @@ exports[`ReactDebugFiberPerf properly displays the forwardRef component in measu `; exports[`ReactDebugFiberPerf recovers from caught errors 1`] = ` -"⚛ (Waiting for async callback...) - -// Stop on Baddie and restart from Boundary +"// Stop on Baddie and restart from Boundary ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⛔ Boundary [mount] Warning: An error was thrown inside this error boundary @@ -313,9 +279,7 @@ exports[`ReactDebugFiberPerf recovers from caught errors 1`] = ` `; exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = ` -"⚛ (Waiting for async callback...) - -// Will fatal +"// Will fatal ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Baddie [mount] @@ -329,8 +293,6 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = ` ⚛ (Committing Host Effects: 1 Total) ⚛ (Calling Lifecycle Methods: 1 Total) -⚛ (Waiting for async callback...) - // Will reconcile from a clean state ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] @@ -344,9 +306,7 @@ exports[`ReactDebugFiberPerf recovers from fatal errors 1`] = ` `; exports[`ReactDebugFiberPerf skips parents during setState 1`] = ` -"⚛ (Waiting for async callback...) - -// Should include just A and B, no Parents +"// Should include just A and B, no Parents ⚛ (React Tree Reconciliation: Completed Root) ⚛ A [update] ⚛ B [update] @@ -359,9 +319,7 @@ exports[`ReactDebugFiberPerf skips parents during setState 1`] = ` `; exports[`ReactDebugFiberPerf supports Suspense and lazy 1`] = ` -"⚛ (Waiting for async callback...) - -⚛ (React Tree Reconciliation: Completed Root) +"⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Suspense [mount] @@ -373,9 +331,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 1`] = ` `; exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = ` -"⚛ (Waiting for async callback...) - -⚛ (React Tree Reconciliation: Completed Root) +"⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Suspense [mount] @@ -384,8 +340,6 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = ` ⚛ (Committing Host Effects: 1 Total) ⚛ (Calling Lifecycle Methods: 0 Total) -⚛ (Waiting for async callback...) - ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [update] ⛔ Suspense [update] Warning: Rendering was suspended @@ -395,9 +349,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 2`] = ` `; exports[`ReactDebugFiberPerf supports Suspense and lazy 3`] = ` -"⚛ (Waiting for async callback...) - -⚛ (React Tree Reconciliation: Completed Root) +"⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Suspense [mount] @@ -406,16 +358,12 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 3`] = ` ⚛ (Committing Host Effects: 1 Total) ⚛ (Calling Lifecycle Methods: 0 Total) -⚛ (Waiting for async callback...) - ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [update] ⛔ Suspense [update] Warning: Rendering was suspended ⚛ Suspense [update] ⚛ Spinner [mount] -⚛ (Waiting for async callback...) - ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [update] ⚛ Suspense [update] @@ -429,9 +377,7 @@ exports[`ReactDebugFiberPerf supports Suspense and lazy 3`] = ` `; exports[`ReactDebugFiberPerf supports memo 1`] = ` -"⚛ (Waiting for async callback...) - -⚛ (React Tree Reconciliation: Completed Root) +"⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Foo [mount] @@ -443,9 +389,7 @@ exports[`ReactDebugFiberPerf supports memo 1`] = ` `; exports[`ReactDebugFiberPerf supports portals 1`] = ` -"⚛ (Waiting for async callback...) - -⚛ (React Tree Reconciliation: Completed Root) +"⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Child [mount] @@ -457,18 +401,16 @@ exports[`ReactDebugFiberPerf supports portals 1`] = ` `; exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] = ` -"⚛ (Waiting for async callback...) +"⚛ (React Tree Reconciliation: Yielded) + ⚛ Foo [mount] -⚛ (React Tree Reconciliation: Yielded) +⛔ (React Tree Reconciliation: Completed Root) Warning: A top-level update interrupted the previous render ⚛ Foo [mount] -⚛ (Waiting for async callback...) - ⛔ (React Tree Reconciliation: Completed Root) Warning: A top-level update interrupted the previous render - ⚛ Foo [mount] - ⚛ (Committing Changes) - ⚛ (Committing Snapshot Effects: 0 Total) - ⚛ (Committing Host Effects: 1 Total) - ⚛ (Calling Lifecycle Methods: 0 Total) +⚛ (Committing Changes) + ⚛ (Committing Snapshot Effects: 0 Total) + ⚛ (Committing Host Effects: 1 Total) + ⚛ (Calling Lifecycle Methods: 0 Total) ⚛ (React Tree Reconciliation: Completed Root) @@ -480,9 +422,7 @@ exports[`ReactDebugFiberPerf warns if an in-progress update is interrupted 1`] = `; exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = ` -"⛔ (Waiting for async callback...) Warning: Update expired; will flush synchronously - -⚛ (Committing Changes) +"⚛ (Committing Changes) ⚛ (Committing Snapshot Effects: 0 Total) ⚛ (Committing Host Effects: 1 Total) ⚛ (Calling Lifecycle Methods: 0 Total) @@ -490,9 +430,7 @@ exports[`ReactDebugFiberPerf warns if async work expires (starvation) 1`] = ` `; exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = ` -"⚛ (Waiting for async callback...) - -// Should print a warning +"// Should print a warning ⚛ (React Tree Reconciliation: Completed Root) ⚛ Parent [mount] ⚛ Cascading [mount] @@ -514,9 +452,7 @@ exports[`ReactDebugFiberPerf warns on cascading renders from setState 1`] = ` `; exports[`ReactDebugFiberPerf warns on cascading renders from top-level render 1`] = ` -"⚛ (Waiting for async callback...) - -// Rendering the first root +"// Rendering the first root ⚛ (React Tree Reconciliation: Completed Root) ⚛ Cascading [mount] From e0a521b02ad54b840ee66637f956b65db4dbe51c Mon Sep 17 00:00:00 2001 From: Dan Abramov Date: Tue, 13 Aug 2019 23:25:03 +0100 Subject: [PATCH 04/11] Make component stack last argument for deprecation warnings (#16384) --- .../ReactDeprecationWarnings-test.internal.js | 10 +++---- .../src/__tests__/findDOMNode-test.js | 20 ++++++------- .../__tests__/ReactFabric-test.internal.js | 20 ++++++------- .../ReactNativeMount-test.internal.js | 20 ++++++------- .../react-reconciler/src/ReactChildFiber.js | 14 ++++------ .../src/ReactFiberReconciler.js | 14 ++++------ .../src/ReactStrictModeWarnings.js | 8 +++--- .../ReactIncremental-test.internal.js | 28 +++++++++---------- ...tIncrementalErrorHandling-test.internal.js | 4 +-- .../ReactNewContext-test.internal.js | 2 +- .../ReactStrictMode-test.internal.js | 28 +++++++++---------- 11 files changed, 75 insertions(+), 93 deletions(-) diff --git a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js index 9d29ef5a34c6d..ce89d56e23fbf 100644 --- a/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js +++ b/packages/react-dom/src/__tests__/ReactDeprecationWarnings-test.internal.js @@ -64,12 +64,10 @@ describe('ReactDeprecationWarnings', () => { expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( 'Warning: Component "Component" contains the string ref "refComponent". ' + 'Support for string refs will be removed in a future major release. ' + - 'We recommend using useRef() or createRef() instead.' + - '\n\n' + - ' in Component (at **)' + - '\n\n' + - 'Learn more about using refs safely here:\n' + - 'https://fb.me/react-strict-mode-string-ref', + 'We recommend using useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref' + + '\n in Component (at **)', ); }); }); diff --git a/packages/react-dom/src/__tests__/findDOMNode-test.js b/packages/react-dom/src/__tests__/findDOMNode-test.js index 2be58e0c67115..3dbad1001a861 100644 --- a/packages/react-dom/src/__tests__/findDOMNode-test.js +++ b/packages/react-dom/src/__tests__/findDOMNode-test.js @@ -120,14 +120,12 @@ describe('findDOMNode', () => { expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([ 'Warning: findDOMNode is deprecated in StrictMode. ' + 'findDOMNode was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in div (at **)' + '\n in StrictMode (at **)' + - '\n in ContainsStrictModeChild (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in ContainsStrictModeChild (at **)', ]); expect(match).toBe(child); }); @@ -152,14 +150,12 @@ describe('findDOMNode', () => { expect(() => (match = ReactDOM.findDOMNode(parent))).toWarnDev([ 'Warning: findDOMNode is deprecated in StrictMode. ' + 'findDOMNode was passed an instance of IsInStrictMode which is inside StrictMode. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in div (at **)' + '\n in IsInStrictMode (at **)' + - '\n in StrictMode (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in StrictMode (at **)', ]); expect(match).toBe(child); }); diff --git a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js index e13718ad7374a..cbfff45d4bf45 100644 --- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js @@ -885,14 +885,12 @@ describe('ReactFabric', () => { expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([ 'Warning: findNodeHandle is deprecated in StrictMode. ' + 'findNodeHandle was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in RCTView (at **)' + '\n in StrictMode (at **)' + - '\n in ContainsStrictModeChild (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in ContainsStrictModeChild (at **)', ]); expect(match).toBe(child._nativeTag); }); @@ -923,14 +921,12 @@ describe('ReactFabric', () => { expect(() => (match = ReactFabric.findNodeHandle(parent))).toWarnDev([ 'Warning: findNodeHandle is deprecated in StrictMode. ' + 'findNodeHandle was passed an instance of IsInStrictMode which is inside StrictMode. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in RCTView (at **)' + '\n in IsInStrictMode (at **)' + - '\n in StrictMode (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in StrictMode (at **)', ]); expect(match).toBe(child._nativeTag); }); diff --git a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js index ce51af605f4b5..a22d9ee7e86c1 100644 --- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js +++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js @@ -669,14 +669,12 @@ describe('ReactNative', () => { expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([ 'Warning: findNodeHandle is deprecated in StrictMode. ' + 'findNodeHandle was passed an instance of ContainsStrictModeChild which renders StrictMode children. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in RCTView (at **)' + '\n in StrictMode (at **)' + - '\n in ContainsStrictModeChild (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in ContainsStrictModeChild (at **)', ]); expect(match).toBe(child._nativeTag); }); @@ -707,14 +705,12 @@ describe('ReactNative', () => { expect(() => (match = ReactNative.findNodeHandle(parent))).toWarnDev([ 'Warning: findNodeHandle is deprecated in StrictMode. ' + 'findNodeHandle was passed an instance of IsInStrictMode which is inside StrictMode. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n' + + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node' + '\n in RCTView (at **)' + '\n in IsInStrictMode (at **)' + - '\n in StrictMode (at **)' + - '\n' + - '\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + '\n in StrictMode (at **)', ]); expect(match).toBe(child._nativeTag); }); diff --git a/packages/react-reconciler/src/ReactChildFiber.js b/packages/react-reconciler/src/ReactChildFiber.js index af113294a946a..fb94fe1df1466 100644 --- a/packages/react-reconciler/src/ReactChildFiber.js +++ b/packages/react-reconciler/src/ReactChildFiber.js @@ -125,10 +125,9 @@ function coerceRef( false, 'Component "%s" contains the string ref "%s". Support for string refs ' + 'will be removed in a future major release. We recommend using ' + - 'useRef() or createRef() instead.' + - '\n%s' + - '\n\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-string-ref', + 'useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref%s', componentName, mixedRef, getStackByFiberInDevAndProd(returnFiber), @@ -138,10 +137,9 @@ function coerceRef( false, 'A string ref, "%s", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + - 'We recommend using useRef() or createRef() instead.' + - '\n%s' + - '\n\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-string-ref', + 'We recommend using useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref%s', mixedRef, getStackByFiberInDevAndProd(returnFiber), ); diff --git a/packages/react-reconciler/src/ReactFiberReconciler.js b/packages/react-reconciler/src/ReactFiberReconciler.js index dc62033d9389d..81c8418263d65 100644 --- a/packages/react-reconciler/src/ReactFiberReconciler.js +++ b/packages/react-reconciler/src/ReactFiberReconciler.js @@ -261,10 +261,9 @@ function findHostInstanceWithWarning( false, '%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which is inside StrictMode. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n%s' + - '\n\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node%s', methodName, methodName, componentName, @@ -275,10 +274,9 @@ function findHostInstanceWithWarning( false, '%s is deprecated in StrictMode. ' + '%s was passed an instance of %s which renders StrictMode children. ' + - 'Instead, add a ref directly to the element you want to reference.' + - '\n%s' + - '\n\nLearn more about using refs safely here:' + - '\nhttps://fb.me/react-strict-mode-find-node', + 'Instead, add a ref directly to the element you want to reference. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-find-node%s', methodName, methodName, componentName, diff --git a/packages/react-reconciler/src/ReactStrictModeWarnings.js b/packages/react-reconciler/src/ReactStrictModeWarnings.js index 87d19201934aa..6f9c34311340e 100644 --- a/packages/react-reconciler/src/ReactStrictModeWarnings.js +++ b/packages/react-reconciler/src/ReactStrictModeWarnings.js @@ -346,14 +346,14 @@ if (__DEV__) { warningWithoutStack( false, - 'Legacy context API has been detected within a strict-mode tree: %s' + + 'Legacy context API has been detected within a strict-mode tree.' + '\n\nThe old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.' + '\n\nPlease update the following components: %s' + - '\n\nLearn more about this warning here:' + - '\nhttps://fb.me/react-legacy-context', - strictRootComponentStack, + '\n\nLearn more about this warning here: https://fb.me/react-legacy-context' + + '%s', sortedNames, + strictRootComponentStack, ); }, ); diff --git a/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js index 3854a56fabd52..d4448cf8c0ec6 100644 --- a/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactIncremental-test.internal.js @@ -1913,7 +1913,7 @@ describe('ReactIncremental', () => { 'ShowBoth {"locale":"fr"}', ]), ).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Intl, ShowBoth, ShowLocale', @@ -1970,7 +1970,7 @@ describe('ReactIncremental', () => { 'ShowBoth {"locale":"en"}', ]), ).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Router, ShowRoute', @@ -2001,7 +2001,7 @@ describe('ReactIncremental', () => { ReactNoop.render(); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Recurse', @@ -2046,7 +2046,7 @@ describe('ReactIncremental', () => { "If you can't use a class try assigning the prototype on the function as a workaround. " + '`Recurse.prototype = React.Component.prototype`. ' + "Don't use an arrow function since it cannot be called with `new` by React.", - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Recurse', @@ -2114,7 +2114,7 @@ describe('ReactIncremental', () => { 'ShowLocale {"locale":"ru"}', ]), ).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Intl, ShowLocale', @@ -2195,7 +2195,7 @@ describe('ReactIncremental', () => { , ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn', @@ -2289,7 +2289,7 @@ describe('ReactIncremental', () => { , ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Intl, ShowLocaleClass, ShowLocaleFn', @@ -2360,7 +2360,7 @@ describe('ReactIncremental', () => { // Init ReactNoop.render(); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child', @@ -2412,7 +2412,7 @@ describe('ReactIncremental', () => { // Init ReactNoop.render(); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: ContextProvider', @@ -2465,7 +2465,7 @@ describe('ReactIncremental', () => { expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( [ 'Using UNSAFE_componentWillReceiveProps in strict mode is not recommended', - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: MyComponent', @@ -2614,7 +2614,7 @@ describe('ReactIncremental', () => { ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child, TopContextProvider', @@ -2678,7 +2678,7 @@ describe('ReactIncremental', () => { ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child, MiddleContextProvider, TopContextProvider', @@ -2751,7 +2751,7 @@ describe('ReactIncremental', () => { ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child, MiddleContextProvider, TopContextProvider', @@ -2834,7 +2834,7 @@ describe('ReactIncremental', () => { ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: Child, MiddleContextProvider, TopContextProvider', diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js index 66f47b0b41289..9020e3d739cb9 100644 --- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js @@ -1118,7 +1118,7 @@ describe('ReactIncrementalErrorHandling', () => { , ); expect(() => expect(Scheduler).toFlushWithoutYielding()).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but ' + 'applications using it should migrate to the new version.\n\n' + 'Please update the following components: Connector, Provider', @@ -1621,7 +1621,7 @@ describe('ReactIncrementalErrorHandling', () => { "If you can't use a class try assigning the prototype on the function as a workaround. " + '`Provider.prototype = React.Component.prototype`. ' + "Don't use an arrow function since it cannot be called with `new` by React.", - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but ' + 'applications using it should migrate to the new version.\n\n' + 'Please update the following components: Provider', diff --git a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js index 5723ca9937527..b08aa0762df46 100644 --- a/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js +++ b/packages/react-reconciler/src/__tests__/ReactNewContext-test.internal.js @@ -1196,7 +1196,7 @@ describe('ReactNewContext', () => { expect(() => { expect(Scheduler).toFlushAndYield(['LegacyProvider', 'App', 'Child']); }).toWarnDev( - 'Legacy context API has been detected within a strict-mode tree: \n\n' + + 'Legacy context API has been detected within a strict-mode tree.\n\n' + 'The old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.\n\n' + 'Please update the following components: LegacyProvider', diff --git a/packages/react/src/__tests__/ReactStrictMode-test.internal.js b/packages/react/src/__tests__/ReactStrictMode-test.internal.js index 085bf94e1c792..8dea81c71d528 100644 --- a/packages/react/src/__tests__/ReactStrictMode-test.internal.js +++ b/packages/react/src/__tests__/ReactStrictMode-test.internal.js @@ -693,11 +693,11 @@ Please update the following components: Parent`, }).toWarnDev( 'Warning: A string ref, "somestring", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + - 'We recommend using useRef() or createRef() instead.\n\n' + + 'We recommend using useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref\n' + ' in StrictMode (at **)\n' + - ' in OuterComponent (at **)\n\n' + - 'Learn more about using refs safely here:\n' + - 'https://fb.me/react-strict-mode-string-ref', + ' in OuterComponent (at **)', ); // Dedup @@ -735,12 +735,12 @@ Please update the following components: Parent`, }).toWarnDev( 'Warning: A string ref, "somestring", has been found within a strict mode tree. ' + 'String refs are a source of potential bugs and should be avoided. ' + - 'We recommend using useRef() or createRef() instead.\n\n' + + 'We recommend using useRef() or createRef() instead. ' + + 'Learn more about using refs safely here: ' + + 'https://fb.me/react-strict-mode-string-ref\n' + ' in InnerComponent (at **)\n' + ' in StrictMode (at **)\n' + - ' in OuterComponent (at **)\n\n' + - 'Learn more about using refs safely here:\n' + - 'https://fb.me/react-strict-mode-string-ref', + ' in OuterComponent (at **)', ); // Dedup @@ -813,16 +813,16 @@ Please update the following components: Parent`, expect(() => { rendered = ReactTestRenderer.create(); }).toWarnDev( - 'Warning: Legacy context API has been detected within a strict-mode tree: ' + - '\n in StrictMode (at **)' + - '\n in div (at **)' + - '\n in Root (at **)' + + 'Warning: Legacy context API has been detected within a strict-mode tree.' + '\n\nThe old API will be supported in all 16.x releases, but applications ' + 'using it should migrate to the new version.' + '\n\nPlease update the following components: ' + 'FunctionalLegacyContextConsumer, LegacyContextConsumer, LegacyContextProvider' + - '\n\nLearn more about this warning here:' + - '\nhttps://fb.me/react-legacy-context', + '\n\nLearn more about this warning here: ' + + 'https://fb.me/react-legacy-context' + + '\n in StrictMode (at **)' + + '\n in div (at **)' + + '\n in Root (at **)', ); // Dedupe From 6fbe630549de1ea7d2c34752880459f854c4440d Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Sebastian=20Markb=C3=A5ge?= Date: Tue, 13 Aug 2019 18:26:21 -0700 Subject: [PATCH 05/11] [Partial Hydration] Attempt hydration at a higher pri first if props/context changes (#16352) * Test that we can suspend updates while waiting to hydrate * Attempt hydration at a higher pri first if props/context changes * Retrying a dehydrated boundary pings at the earliest forced time This might quickly become an already expired time. * Mark the render as delayed if we have to retry This allows the suspense config to kick in and we can wait for much longer before we're forced to give up on hydrating. --- fixtures/ssr/src/components/Chrome.js | 11 +- ...DOMServerPartialHydration-test.internal.js | 184 ++++++++++++++++-- .../src/ReactFiberBeginWork.js | 39 +++- .../src/ReactFiberHydrationContext.js | 2 + .../src/ReactFiberSuspenseComponent.js | 4 + .../src/ReactFiberWorkLoop.js | 36 +++- 6 files changed, 248 insertions(+), 28 deletions(-) diff --git a/fixtures/ssr/src/components/Chrome.js b/fixtures/ssr/src/components/Chrome.js index b52c8d0ee74d4..5bad11aae5a27 100644 --- a/fixtures/ssr/src/components/Chrome.js +++ b/fixtures/ssr/src/components/Chrome.js @@ -26,7 +26,16 @@ export default class Chrome extends Component { {this.props.children}
- this.setState({theme})} /> + { + React.unstable_withSuspenseConfig( + () => { + this.setState({theme}); + }, + {timeoutMs: 6000} + ); + }} + />