From 93a229bab59f94e214256582c55d3b6c1fc2b958 Mon Sep 17 00:00:00 2001
From: Will Douglas <willygdouglas@gmail.com>
Date: Mon, 17 Feb 2020 13:24:27 -0700
Subject: [PATCH 01/24] Update eslint rule exhaustive deps to use new
 suggestions feature (#17385)

This closes #16313
---
 .../ESLintRuleExhaustiveDeps-test.js          | 5304 ++++++++++-------
 .../src/ExhaustiveDeps.js                     |   83 +-
 2 files changed, 3335 insertions(+), 2052 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
index aa25e13ba5121..d45728aedb0fc 100644
--- a/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
+++ b/packages/eslint-plugin-react-hooks/__tests__/ESLintRuleExhaustiveDeps-test.js
@@ -19,6 +19,16 @@ ESLintTester.setDefaultConfig({
   },
 });
 
+/**
+ * A string template tag that removes padding from the left side of multi-line strings
+ * @param {Array} strings array of code strings (only one expected)
+ */
+function normalizeIndent(strings) {
+  const codeLines = strings[0].split('\n');
+  const leftPadding = codeLines[1].match(/\s+/)[0];
+  return codeLines.map(line => line.substr(leftPadding.length)).join('\n');
+}
+
 // ***************************************************
 // For easier local testing, you can add to any case:
 // {
@@ -32,7 +42,7 @@ ESLintTester.setDefaultConfig({
 const tests = {
   valid: [
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -42,7 +52,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           useEffect(() => {
             const local = {};
@@ -52,7 +62,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -67,7 +77,7 @@ const tests = {
       // to be an import that hasn't been added yet, or
       // a component-level variable. Ignore it until it
       //  gets defined (a different rule would flag it anyway).
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           useEffect(() => {
             console.log(props.foo);
@@ -76,7 +86,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           {
@@ -90,7 +100,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           {
@@ -104,7 +114,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           function MyNestedComponent() {
@@ -118,7 +128,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -129,7 +139,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           useEffect(() => {
             console.log(unresolved);
@@ -138,7 +148,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -149,7 +159,7 @@ const tests = {
     },
     {
       // Regression test
-      code: `
+      code: normalizeIndent`
         function MyComponent({ foo }) {
           useEffect(() => {
             console.log(foo.length);
@@ -159,7 +169,7 @@ const tests = {
     },
     {
       // Regression test
-      code: `
+      code: normalizeIndent`
         function MyComponent({ foo }) {
           useEffect(() => {
             console.log(foo.length);
@@ -170,7 +180,7 @@ const tests = {
     },
     {
       // Regression test
-      code: `
+      code: normalizeIndent`
         function MyComponent({ history }) {
           useEffect(() => {
             return history.listen();
@@ -180,7 +190,7 @@ const tests = {
     },
     {
       // Valid because they have meaning without deps.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {});
           useLayoutEffect(() => {});
@@ -189,7 +199,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.foo);
@@ -198,7 +208,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.foo);
@@ -208,7 +218,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.foo);
@@ -218,7 +228,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const local = {};
           useEffect(() => {
@@ -233,7 +243,7 @@ const tests = {
       // [props, props.foo] is technically unnecessary ('props' covers 'props.foo').
       // However, it's valid for effects to over-specify their deps.
       // So we don't warn about this. We *would* warn about useMemo/useCallback.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const local = {};
           useEffect(() => {
@@ -250,7 +260,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useCustomEffect(() => {
             console.log(props.foo);
@@ -260,7 +270,7 @@ const tests = {
       options: [{additionalHooks: 'useCustomEffect'}],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useCustomEffect(() => {
             console.log(props.foo);
@@ -270,7 +280,7 @@ const tests = {
       options: [{additionalHooks: 'useCustomEffect'}],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useCustomEffect(() => {
             console.log(props.foo);
@@ -281,7 +291,7 @@ const tests = {
     },
     {
       // Valid because we don't care about hooks outside of components.
-      code: `
+      code: normalizeIndent`
         const local = {};
         useEffect(() => {
           console.log(local);
@@ -290,7 +300,7 @@ const tests = {
     },
     {
       // Valid because we don't care about hooks outside of components.
-      code: `
+      code: normalizeIndent`
         const local1 = {};
         {
           const local2 = {};
@@ -302,7 +312,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const ref = useRef();
           useEffect(() => {
@@ -312,7 +322,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const ref = useRef();
           useEffect(() => {
@@ -322,7 +332,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ maybeRef2, foo }) {
           const definitelyRef1 = useRef();
           const definitelyRef2 = useRef();
@@ -376,7 +386,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ maybeRef2 }) {
           const definitelyRef1 = useRef();
           const definitelyRef2 = useRef();
@@ -434,7 +444,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         const MyComponent = forwardRef((props, ref) => {
           useImperativeHandle(ref, () => ({
             focus() {
@@ -445,7 +455,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         const MyComponent = forwardRef((props, ref) => {
           useImperativeHandle(ref, () => ({
             focus() {
@@ -459,7 +469,7 @@ const tests = {
       // This is not ideal but warning would likely create
       // too many false positives. We do, however, prevent
       // direct assignments.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let obj = {};
           useEffect(() => {
@@ -472,7 +482,7 @@ const tests = {
       // Valid because we assign ref.current
       // ourselves. Therefore it's likely not
       // a ref managed by React.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const myRef = useRef();
           useEffect(() => {
@@ -490,7 +500,7 @@ const tests = {
       // Valid because we assign ref.current
       // ourselves. Therefore it's likely not
       // a ref managed by React.
-      code: `
+      code: normalizeIndent`
         function useMyThing(myRef) {
           useEffect(() => {
             const handleMove = () => {};
@@ -504,7 +514,7 @@ const tests = {
     },
     {
       // Valid because the ref is captured.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const myRef = useRef();
           useEffect(() => {
@@ -519,7 +529,7 @@ const tests = {
     },
     {
       // Valid because the ref is captured.
-      code: `
+      code: normalizeIndent`
         function useMyThing(myRef) {
           useEffect(() => {
             const handleMove = () => {};
@@ -533,7 +543,7 @@ const tests = {
     },
     {
       // Valid because it's not an effect.
-      code: `
+      code: normalizeIndent`
         function useMyThing(myRef) {
           useCallback(() => {
             const handleMouse = () => {};
@@ -551,7 +561,7 @@ const tests = {
     },
     {
       // Valid because we read ref.current in a function that isn't cleanup.
-      code: `
+      code: normalizeIndent`
         function useMyThing() {
           const myRef = useRef();
           useEffect(() => {
@@ -567,7 +577,7 @@ const tests = {
     },
     {
       // Valid because we read ref.current in a function that isn't cleanup.
-      code: `
+      code: normalizeIndent`
         function useMyThing() {
           const myRef = useRef();
           useEffect(() => {
@@ -583,7 +593,7 @@ const tests = {
     },
     {
       // Valid because it's a primitive constant.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = 42;
           const local2 = '42';
@@ -598,7 +608,7 @@ const tests = {
     },
     {
       // It's not a mistake to specify constant values though.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = 42;
           const local2 = '42';
@@ -613,7 +623,7 @@ const tests = {
     },
     {
       // It is valid for effects to over-specify their deps.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const local = props.local;
           useEffect(() => {}, [local]);
@@ -623,7 +633,7 @@ const tests = {
     {
       // Valid even though activeTab is "unused".
       // We allow over-specifying deps for effects, but not callbacks or memo.
-      code: `
+      code: normalizeIndent`
         function Foo({ activeTab }) {
           useEffect(() => {
             window.scrollTo(0, 0);
@@ -634,7 +644,7 @@ const tests = {
     {
       // It is valid to specify broader effect deps than strictly necessary.
       // Don't warn for this.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.foo.bar.baz);
@@ -654,7 +664,7 @@ const tests = {
     {
       // It is *also* valid to specify broader memo/callback deps than strictly necessary.
       // Don't warn for this either.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const fn = useCallback(() => {
             console.log(props.foo.bar.baz);
@@ -674,7 +684,7 @@ const tests = {
     {
       // Declaring handleNext is optional because
       // it doesn't use anything in the function scope.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           function handleNext1() {
             console.log('hello');
@@ -700,7 +710,7 @@ const tests = {
     {
       // Declaring handleNext is optional because
       // it doesn't use anything in the function scope.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           function handleNext() {
             console.log('hello');
@@ -720,7 +730,7 @@ const tests = {
     {
       // Declaring handleNext is optional because
       // everything they use is fully static.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let [, setState] = useState();
           let [, dispatch] = React.useReducer();
@@ -751,7 +761,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function useInterval(callback, delay) {
           const savedCallback = useRef();
           useEffect(() => {
@@ -770,7 +780,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           const [count, setCount] = useState(0);
 
@@ -786,7 +796,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           const [count, setCount] = useState(0);
 
@@ -806,7 +816,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           const [count, dispatch] = useReducer((state, action) => {
             if (action === 'inc') {
@@ -826,7 +836,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           const [count, dispatch] = useReducer((state, action) => {
             if (action === 'inc') {
@@ -849,7 +859,7 @@ const tests = {
     },
     {
       // Regression test for a crash
-      code: `
+      code: normalizeIndent`
         function Podcasts() {
           useEffect(() => {
             setPodcasts([]);
@@ -859,7 +869,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function withFetch(fetchPodcasts) {
           return function Podcasts({ id }) {
             let [podcasts, setPodcasts] = useState(null);
@@ -871,7 +881,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Podcasts({ id }) {
           let [podcasts, setPodcasts] = useState(null);
           useEffect(() => {
@@ -884,7 +894,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           let [count, setCount] = useState(0);
 
@@ -904,7 +914,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           let [count, setCount] = useState(0);
 
@@ -924,7 +934,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         import increment from './increment';
         function Counter() {
           let [count, setCount] = useState(0);
@@ -941,7 +951,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function withStuff(increment) {
           return function Counter() {
             let [count, setCount] = useState(0);
@@ -959,7 +969,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function App() {
           const [query, setQuery] = useState('react');
           const [state, setState] = useState(null);
@@ -982,7 +992,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Example() {
           const foo = useCallback(() => {
             foo();
@@ -991,7 +1001,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Example({ prop }) {
           const foo = useCallback(() => {
             if (prop) {
@@ -1002,7 +1012,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Hello() {
           const [state, setState] = useState(0);
           useEffect(() => {
@@ -1015,7 +1025,7 @@ const tests = {
     },
     // Ignore Generic Type Variables for arrow functions
     {
-      code: `
+      code: normalizeIndent`
         function Example({ prop }) {
           const bar = useEffect(<T>(a: T): Hello => {
             prop();
@@ -1025,7 +1035,7 @@ const tests = {
     },
     // Ignore arguments keyword for arrow functions.
     {
-      code: `
+      code: normalizeIndent`
         function Example() {
           useEffect(() => {
             arguments
@@ -1034,7 +1044,7 @@ const tests = {
       `,
     },
     {
-      code: `
+      code: normalizeIndent`
         function Example() {
           useEffect(() => {
             const bar = () => {
@@ -1048,7 +1058,7 @@ const tests = {
   ],
   invalid: [
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -1056,24 +1066,32 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Note: we *could* detect it's a primitive and never assigned
       // even though it's not a constant -- but we currently don't.
       // So this is an error.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           let local = 42;
           useEffect(() => {
@@ -1081,22 +1099,30 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent() {
-          let local = 42;
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  let local = 42;
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Regexes are literals but potentially stateful.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = /foo/;
           useEffect(() => {
@@ -1104,44 +1130,54 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = /foo/;
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = /foo/;
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Invalid because they don't have a meaning without deps.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const value = useMemo(() => { return 2*2; });
           const fn = useCallback(() => { alert('foo'); });
         }
       `,
       // We don't know what you meant.
-      output: `
-        function MyComponent(props) {
-          const value = useMemo(() => { return 2*2; });
-          const fn = useCallback(() => { alert('foo'); });
-        }
-      `,
       errors: [
-        'React Hook useMemo does nothing when called with only one argument. ' +
-          'Did you forget to pass an array of dependencies?',
-        'React Hook useCallback does nothing when called with only one argument. ' +
-          'Did you forget to pass an array of dependencies?',
+        {
+          message:
+            'React Hook useMemo does nothing when called with only one argument. ' +
+            'Did you forget to pass an array of dependencies?',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'React Hook useCallback does nothing when called with only one argument. ' +
+            'Did you forget to pass an array of dependencies?',
+          suggestions: undefined,
+        },
       ],
     },
     {
       // Regression test
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -1151,24 +1187,32 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            if (true) {
-              console.log(local);
-            }
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    if (true) {
+                      console.log(local);
+                    }
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Regression test
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -1178,24 +1222,32 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            try {
-              console.log(local);
-            } finally {}
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    try {
+                      console.log(local);
+                    } finally {}
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Regression test
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -1206,24 +1258,32 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            function inner() {
-              console.log(local);
-            }
-            inner();
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    function inner() {
+                      console.log(local);
+                    }
+                    inner();
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           {
@@ -1235,25 +1295,33 @@ const tests = {
           }
         }
       `,
-      output: `
-        function MyComponent() {
-          const local1 = {};
-          {
-            const local2 = {};
-            useEffect(() => {
-              console.log(local1);
-              console.log(local2);
-            }, [local1, local2]);
-          }
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'local1' and 'local2'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'local1' and 'local2'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local1, local2]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  {
+                    const local2 = {};
+                    useEffect(() => {
+                      console.log(local1);
+                      console.log(local2);
+                    }, [local1, local2]);
+                  }
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           const local2 = {};
@@ -1263,23 +1331,31 @@ const tests = {
           }, [local1]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local1 = {};
-          const local2 = {};
-          useEffect(() => {
-            console.log(local1);
-            console.log(local2);
-          }, [local1, local2]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local2'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local2'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local1, local2]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  const local2 = {};
+                  useEffect(() => {
+                    console.log(local1);
+                    console.log(local2);
+                  }, [local1, local2]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           const local2 = {};
@@ -1288,22 +1364,30 @@ const tests = {
           }, [local1, local2]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local1 = {};
-          const local2 = {};
-          useMemo(() => {
-            console.log(local1);
-          }, [local1]);
-        }
-      `,
       errors: [
-        "React Hook useMemo has an unnecessary dependency: 'local2'. " +
-          'Either exclude it or remove the dependency array.',
+        {
+          message:
+            "React Hook useMemo has an unnecessary dependency: 'local2'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local1]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  const local2 = {};
+                  useMemo(() => {
+                    console.log(local1);
+                  }, [local1]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           function MyNestedComponent() {
@@ -1315,27 +1399,35 @@ const tests = {
           }
         }
       `,
-      output: `
-        function MyComponent() {
-          const local1 = {};
-          function MyNestedComponent() {
-            const local2 = {};
-            useCallback(() => {
-              console.log(local1);
-              console.log(local2);
-            }, [local2]);
-          }
-        }
-      `,
       errors: [
-        "React Hook useCallback has a missing dependency: 'local2'. " +
-          'Either include it or remove the dependency array. ' +
-          "Outer scope values like 'local1' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'local2'. " +
+            'Either include it or remove the dependency array. ' +
+            "Outer scope values like 'local1' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local2]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  function MyNestedComponent() {
+                    const local2 = {};
+                    useCallback(() => {
+                      console.log(local1);
+                      console.log(local2);
+                    }, [local2]);
+                  }
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -1344,22 +1436,30 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            console.log(local);
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -1368,80 +1468,112 @@ const tests = {
           }, [local, local]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            console.log(local);
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a duplicate dependency: 'local'. " +
-          'Either omit it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a duplicate dependency: 'local'. " +
+            'Either omit it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           useCallback(() => {}, [window]);
         }
       `,
-      output: `
-        function MyComponent() {
-          useCallback(() => {}, []);
-        }
-      `,
       errors: [
-        "React Hook useCallback has an unnecessary dependency: 'window'. " +
-          'Either exclude it or remove the dependency array. ' +
-          "Outer scope values like 'window' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'window'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Outer scope values like 'window' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  useCallback(() => {}, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // It is not valid for useCallback to specify extraneous deps
       // because it doesn't serve as a side effect trigger unlike useEffect.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let local = props.foo;
           useCallback(() => {}, [local]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          let local = props.foo;
-          useCallback(() => {}, []);
-        }
-      `,
       errors: [
-        "React Hook useCallback has an unnecessary dependency: 'local'. " +
-          'Either exclude it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'local'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let local = props.foo;
+                  useCallback(() => {}, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ history }) {
           useEffect(() => {
             return history.listen();
           }, []);
         }
       `,
-      output: `
-        function MyComponent({ history }) {
-          useEffect(() => {
-            return history.listen();
-          }, [history]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'history'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'history'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [history]',
+              output: normalizeIndent`
+                function MyComponent({ history }) {
+                  useEffect(() => {
+                    return history.listen();
+                  }, [history]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ history }) {
           useEffect(() => {
             return [
@@ -1451,107 +1583,148 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent({ history }) {
-          useEffect(() => {
-            return [
-              history.foo.bar[2].dobedo.listen(),
-              history.foo.bar().dobedo.listen[2]
-            ];
-          }, [history.foo]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'history.foo'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'history.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [history.foo]',
+              output: normalizeIndent`
+                function MyComponent({ history }) {
+                  useEffect(() => {
+                    return [
+                      history.foo.bar[2].dobedo.listen(),
+                      history.foo.bar().dobedo.listen[2]
+                    ];
+                  }, [history.foo]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
-        function MyComponent() {
-          useEffect(() => {}, ['foo']);
-        }
-      `,
-      // TODO: we could autofix this.
-      output: `
+      code: normalizeIndent`
         function MyComponent() {
           useEffect(() => {}, ['foo']);
         }
       `,
       errors: [
-        // Don't assume user meant `foo` because it's not used in the effect.
-        "The 'foo' literal is not a valid dependency because it never changes. " +
-          'You can safely remove it.',
+        {
+          message:
+            // Don't assume user meant `foo` because it's not used in the effect.
+            "The 'foo' literal is not a valid dependency because it never changes. " +
+            'You can safely remove it.',
+          // TODO: provide suggestion.
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ foo, bar, baz }) {
           useEffect(() => {
             console.log(foo, bar, baz);
           }, ['foo', 'bar']);
         }
       `,
-      output: `
-        function MyComponent({ foo, bar, baz }) {
-          useEffect(() => {
-            console.log(foo, bar, baz);
-          }, [bar, baz, foo]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'bar', 'baz', and 'foo'. " +
-          'Either include them or remove the dependency array.',
-        "The 'foo' literal is not a valid dependency because it never changes. " +
-          'Did you mean to include foo in the array instead?',
-        "The 'bar' literal is not a valid dependency because it never changes. " +
-          'Did you mean to include bar in the array instead?',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'bar', 'baz', and 'foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [bar, baz, foo]',
+              output: normalizeIndent`
+                function MyComponent({ foo, bar, baz }) {
+                  useEffect(() => {
+                    console.log(foo, bar, baz);
+                  }, [bar, baz, foo]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "The 'foo' literal is not a valid dependency because it never changes. " +
+            'Did you mean to include foo in the array instead?',
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'bar' literal is not a valid dependency because it never changes. " +
+            'Did you mean to include bar in the array instead?',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ foo, bar, baz }) {
           useEffect(() => {
             console.log(foo, bar, baz);
           }, [42, false, null]);
         }
       `,
-      output: `
-        function MyComponent({ foo, bar, baz }) {
-          useEffect(() => {
-            console.log(foo, bar, baz);
-          }, [bar, baz, foo]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'bar', 'baz', and 'foo'. " +
-          'Either include them or remove the dependency array.',
-        'The 42 literal is not a valid dependency because it never changes. You can safely remove it.',
-        'The false literal is not a valid dependency because it never changes. You can safely remove it.',
-        'The null literal is not a valid dependency because it never changes. You can safely remove it.',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'bar', 'baz', and 'foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [bar, baz, foo]',
+              output: normalizeIndent`
+                function MyComponent({ foo, bar, baz }) {
+                  useEffect(() => {
+                    console.log(foo, bar, baz);
+                  }, [bar, baz, foo]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'The 42 literal is not a valid dependency because it never changes. You can safely remove it.',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'The false literal is not a valid dependency because it never changes. You can safely remove it.',
+          suggestions: undefined,
+        },
+        {
+          message:
+            'The null literal is not a valid dependency because it never changes. You can safely remove it.',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function MyComponent() {
-          const dependencies = [];
-          useEffect(() => {}, dependencies);
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function MyComponent() {
           const dependencies = [];
           useEffect(() => {}, dependencies);
         }
       `,
       errors: [
-        'React Hook useEffect was passed a dependency list that is not an ' +
-          "array literal. This means we can't statically verify whether you've " +
-          'passed the correct dependencies.',
+        {
+          message:
+            'React Hook useEffect was passed a dependency list that is not an ' +
+            "array literal. This means we can't statically verify whether you've " +
+            'passed the correct dependencies.',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           const dependencies = [local];
@@ -1560,26 +1733,38 @@ const tests = {
           }, dependencies);
         }
       `,
-      // TODO: should this autofix or bail out?
-      output: `
-        function MyComponent() {
-          const local = {};
-          const dependencies = [local];
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        'React Hook useEffect was passed a dependency list that is not an ' +
-          "array literal. This means we can't statically verify whether you've " +
-          'passed the correct dependencies.',
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            'React Hook useEffect was passed a dependency list that is not an ' +
+            "array literal. This means we can't statically verify whether you've " +
+            'passed the correct dependencies.',
+          // TODO: should this autofix or bail out?
+          suggestions: undefined,
+        },
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const dependencies = [local];
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           const dependencies = [local];
@@ -1588,34 +1773,38 @@ const tests = {
           }, [...dependencies]);
         }
       `,
-      // TODO: should this autofix or bail out?
-      output: `
-        function MyComponent() {
-          const local = {};
-          const dependencies = [local];
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
-        'React Hook useEffect has a spread element in its dependency array. ' +
-          "This means we can't statically verify whether you've passed the " +
-          'correct dependencies.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  const dependencies = [local];
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a spread element in its dependency array. ' +
+            "This means we can't statically verify whether you've passed the " +
+            'correct dependencies.',
+          // TODO: should this autofix or bail out?
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            console.log(local);
-          }, [local, ...dependencies]);
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -1624,13 +1813,17 @@ const tests = {
         }
       `,
       errors: [
-        'React Hook useEffect has a spread element in its dependency array. ' +
-          "This means we can't statically verify whether you've passed the " +
-          'correct dependencies.',
+        {
+          message:
+            'React Hook useEffect has a spread element in its dependency array. ' +
+            "This means we can't statically verify whether you've passed the " +
+            'correct dependencies.',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -1638,55 +1831,71 @@ const tests = {
           }, [computeCacheKey(local)]);
         }
       `,
-      // TODO: I'm not sure this is a good idea.
-      // Maybe bail out?
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
-        'React Hook useEffect has a complex expression in the dependency array. ' +
-          'Extract it to a separate variable so it can be statically checked.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          // TODO: I'm not sure this is a good idea.
+          // Maybe bail out?
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.items[0]);
           }, [props.items[0]]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            console.log(props.items[0]);
-          }, [props.items]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'props.items'. " +
-          'Either include it or remove the dependency array.',
-        'React Hook useEffect has a complex expression in the dependency array. ' +
-          'Extract it to a separate variable so it can be statically checked.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.items'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.items]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.items[0]);
+                  }, [props.items]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function MyComponent(props) {
-          useEffect(() => {
-            console.log(props.items[0]);
-          }, [props.items, props.items[0]]);
-        }
-      `,
-      // TODO: ideally autofix would remove the bad expression?
-      output: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.items[0]);
@@ -1694,42 +1903,51 @@ const tests = {
         }
       `,
       errors: [
-        'React Hook useEffect has a complex expression in the dependency array. ' +
-          'Extract it to a separate variable so it can be statically checked.',
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          // TODO: ideally suggestion would remove the bad expression?
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ items }) {
           useEffect(() => {
             console.log(items[0]);
           }, [items[0]]);
         }
       `,
-      output: `
-        function MyComponent({ items }) {
-          useEffect(() => {
-            console.log(items[0]);
-          }, [items]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'items'. " +
-          'Either include it or remove the dependency array.',
-        'React Hook useEffect has a complex expression in the dependency array. ' +
-          'Extract it to a separate variable so it can be statically checked.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'items'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [items]',
+              output: normalizeIndent`
+                function MyComponent({ items }) {
+                  useEffect(() => {
+                    console.log(items[0]);
+                  }, [items]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function MyComponent({ items }) {
-          useEffect(() => {
-            console.log(items[0]);
-          }, [items, items[0]]);
-        }
-      `,
-      // TODO: ideally autofix would remove the bad expression?
-      output: `
+      code: normalizeIndent`
         function MyComponent({ items }) {
           useEffect(() => {
             console.log(items[0]);
@@ -1737,8 +1955,13 @@ const tests = {
         }
       `,
       errors: [
-        'React Hook useEffect has a complex expression in the dependency array. ' +
-          'Extract it to a separate variable so it can be statically checked.',
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          // TODO: ideally suggeston would remove the bad expression?
+          suggestions: undefined,
+        },
       ],
     },
     {
@@ -1747,7 +1970,7 @@ const tests = {
       // However, we generally allow specifying *broader* deps as escape hatch.
       // So while [props, props.foo] is unnecessary, 'props' wins here as the
       // broader one, and this is why 'props.foo' is reported as unnecessary.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const local = {};
           useCallback(() => {
@@ -1756,23 +1979,31 @@ const tests = {
           }, [props, props.foo]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const local = {};
-          useCallback(() => {
-            console.log(props.foo);
-            console.log(props.bar);
-          }, [props]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has an unnecessary dependency: 'props.foo'. " +
-          'Either exclude it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'props.foo'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local = {};
+                  useCallback(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Since we don't have 'props' in the list, we'll suggest narrow dependencies.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const local = {};
           useCallback(() => {
@@ -1781,24 +2012,33 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const local = {};
-          useCallback(() => {
-            console.log(props.foo);
-            console.log(props.bar);
-          }, [props.bar, props.foo]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has missing dependencies: 'props.bar' and 'props.foo'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has missing dependencies: 'props.bar' and 'props.foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [props.bar, props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local = {};
+                  useCallback(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                  }, [props.bar, props.foo]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Effects are allowed to over-specify deps. We'll complain about missing
       // 'local', but we won't remove the already-specified 'local.id' from your list.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {id: 42};
           useEffect(() => {
@@ -1806,23 +2046,31 @@ const tests = {
           }, [local.id]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {id: 42};
-          useEffect(() => {
-            console.log(local);
-          }, [local, local.id]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local, local.id]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {id: 42};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local, local.id]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Callbacks are not allowed to over-specify deps. So we'll complain about missing
       // 'local' and we will also *remove* 'local.id' from your list.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {id: 42};
           const fn = useCallback(() => {
@@ -1830,23 +2078,31 @@ const tests = {
           }, [local.id]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {id: 42};
-          const fn = useCallback(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {id: 42};
+                  const fn = useCallback(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Callbacks are not allowed to over-specify deps. So we'll complain about
       // the unnecessary 'local.id'.
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {id: 42};
           const fn = useCallback(() => {
@@ -1854,41 +2110,57 @@ const tests = {
           }, [local.id, local]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {id: 42};
-          const fn = useCallback(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has an unnecessary dependency: 'local.id'. " +
-          'Either exclude it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'local.id'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {id: 42};
+                  const fn = useCallback(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const fn = useCallback(() => {
             console.log(props.foo.bar.baz);
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const fn = useCallback(() => {
-            console.log(props.foo.bar.baz);
-          }, [props.foo.bar.baz]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has a missing dependency: 'props.foo.bar.baz'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo.bar.baz'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo.bar.baz]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar.baz);
+                  }, [props.foo.bar.baz]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let color = {}
           const fn = useCallback(() => {
@@ -1897,18 +2169,27 @@ const tests = {
           }, [props.foo, props.foo.bar.baz]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          let color = {}
-          const fn = useCallback(() => {
-            console.log(props.foo.bar.baz);
-            console.log(color);
-          }, [color, props.foo.bar.baz]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has a missing dependency: 'color'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'color'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [color, props.foo.bar.baz]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let color = {}
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar.baz);
+                    console.log(color);
+                  }, [color, props.foo.bar.baz]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
@@ -1917,27 +2198,35 @@ const tests = {
       // So in this case we ask you to remove 'props.foo.bar.baz' because 'props.foo'
       // already covers it, and having both is unnecessary.
       // TODO: maybe consider suggesting a narrower one by default in these cases.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const fn = useCallback(() => {
             console.log(props.foo.bar.baz);
           }, [props.foo.bar.baz, props.foo]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const fn = useCallback(() => {
-            console.log(props.foo.bar.baz);
-          }, [props.foo]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has an unnecessary dependency: 'props.foo.bar.baz'. " +
-          'Either exclude it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'props.foo.bar.baz'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar.baz);
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const fn = useCallback(() => {
             console.log(props.foo.bar.baz);
@@ -1945,17 +2234,26 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const fn = useCallback(() => {
-            console.log(props.foo.bar.baz);
-            console.log(props.foo.fizz.bizz);
-          }, [props.foo.bar.baz, props.foo.fizz.bizz]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has missing dependencies: 'props.foo.bar.baz' and 'props.foo.fizz.bizz'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has missing dependencies: 'props.foo.bar.baz' and 'props.foo.fizz.bizz'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [props.foo.bar.baz, props.foo.fizz.bizz]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar.baz);
+                    console.log(props.foo.fizz.bizz);
+                  }, [props.foo.bar.baz, props.foo.fizz.bizz]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
@@ -1965,27 +2263,35 @@ const tests = {
       // When we're sure there is a mistake, for callbacks we will rebuild the list
       // from scratch. This will set the user on a better path by default.
       // This is why we end up with just 'props.foo.bar', and not them both.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const fn = useCallback(() => {
             console.log(props.foo.bar);
           }, [props.foo.bar.baz]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const fn = useCallback(() => {
-            console.log(props.foo.bar);
-          }, [props.foo.bar]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has a missing dependency: 'props.foo.bar'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo.bar'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo.bar]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props.foo.bar);
+                  }, [props.foo.bar]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const fn = useCallback(() => {
             console.log(props);
@@ -1993,21 +2299,29 @@ const tests = {
           }, [props.foo.bar.baz]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const fn = useCallback(() => {
-            console.log(props);
-            console.log(props.hello);
-          }, [props]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has a missing dependency: 'props'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const fn = useCallback(() => {
+                    console.log(props);
+                    console.log(props.hello);
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -2015,21 +2329,29 @@ const tests = {
           }, [local, local]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a duplicate dependency: 'local'. " +
-          'Either omit it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a duplicate dependency: 'local'. " +
+            'Either omit it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           useCallback(() => {
@@ -2038,60 +2360,84 @@ const tests = {
           }, [local1]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local1 = {};
-          useCallback(() => {
-            const local1 = {};
-            console.log(local1);
-          }, []);
-        }
-      `,
       errors: [
-        "React Hook useCallback has an unnecessary dependency: 'local1'. " +
-          'Either exclude it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'local1'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  useCallback(() => {
+                    const local1 = {};
+                    console.log(local1);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local1 = {};
           useCallback(() => {}, [local1]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const local1 = {};
-          useCallback(() => {}, []);
-        }
-      `,
       errors: [
-        "React Hook useCallback has an unnecessary dependency: 'local1'. " +
-          'Either exclude it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'local1'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = {};
+                  useCallback(() => {}, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.foo);
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-        }
-      `,
-      errors: [
-        "React Hook useEffect has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
-      ],
-    },
-    {
-      code: `
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.foo);
@@ -2099,21 +2445,30 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            console.log(props.foo);
-            console.log(props.bar);
-          }, [props.bar, props.foo]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'props.bar' and 'props.foo'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'props.bar' and 'props.foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [props.bar, props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                  }, [props.bar, props.foo]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let a, b, c, d, e, f, g;
           useEffect(() => {
@@ -2121,22 +2476,31 @@ const tests = {
           }, [c, a, g]);
         }
       `,
-      // Don't alphabetize if it wasn't alphabetized in the first place.
-      output: `
-        function MyComponent(props) {
-          let a, b, c, d, e, f, g;
-          useEffect(() => {
-            console.log(b, e, d, c, a, g, f);
-          }, [c, a, g, b, e, d, f]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'b', 'd', 'e', and 'f'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'b', 'd', 'e', and 'f'. " +
+            'Either include them or remove the dependency array.',
+          // Don't alphabetize if it wasn't alphabetized in the first place.
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [c, a, g, b, e, d, f]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let a, b, c, d, e, f, g;
+                  useEffect(() => {
+                    console.log(b, e, d, c, a, g, f);
+                  }, [c, a, g, b, e, d, f]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let a, b, c, d, e, f, g;
           useEffect(() => {
@@ -2144,22 +2508,31 @@ const tests = {
           }, [a, c, g]);
         }
       `,
-      // Alphabetize if it was alphabetized.
-      output: `
-        function MyComponent(props) {
-          let a, b, c, d, e, f, g;
-          useEffect(() => {
-            console.log(b, e, d, c, a, g, f);
-          }, [a, b, c, d, e, f, g]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'b', 'd', 'e', and 'f'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'b', 'd', 'e', and 'f'. " +
+            'Either include them or remove the dependency array.',
+          // Alphabetize if it was alphabetized.
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [a, b, c, d, e, f, g]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let a, b, c, d, e, f, g;
+                  useEffect(() => {
+                    console.log(b, e, d, c, a, g, f);
+                  }, [a, b, c, d, e, f, g]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let a, b, c, d, e, f, g;
           useEffect(() => {
@@ -2167,22 +2540,31 @@ const tests = {
           }, []);
         }
       `,
-      // Alphabetize if it was empty.
-      output: `
-        function MyComponent(props) {
-          let a, b, c, d, e, f, g;
-          useEffect(() => {
-            console.log(b, e, d, c, a, g, f);
-          }, [a, b, c, d, e, f, g]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'a', 'b', 'c', 'd', 'e', 'f', and 'g'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'a', 'b', 'c', 'd', 'e', 'f', and 'g'. " +
+            'Either include them or remove the dependency array.',
+          // Alphabetize if it was empty.
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [a, b, c, d, e, f, g]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let a, b, c, d, e, f, g;
+                  useEffect(() => {
+                    console.log(b, e, d, c, a, g, f);
+                  }, [a, b, c, d, e, f, g]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const local = {};
           useEffect(() => {
@@ -2192,23 +2574,32 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const local = {};
-          useEffect(() => {
-            console.log(props.foo);
-            console.log(props.bar);
-            console.log(local);
-          }, [local, props.bar, props.foo]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'local', 'props.bar', and 'props.foo'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'local', 'props.bar', and 'props.foo'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [local, props.bar, props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                    console.log(local);
+                  }, [local, props.bar, props.foo]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const local = {};
           useEffect(() => {
@@ -2218,23 +2609,31 @@ const tests = {
           }, [props]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const local = {};
-          useEffect(() => {
-            console.log(props.foo);
-            console.log(props.bar);
-            console.log(local);
-          }, [local, props]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local, props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(props.foo);
+                    console.log(props.bar);
+                    console.log(local);
+                  }, [local, props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             console.log(props.foo);
@@ -2259,48 +2658,221 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          useCallback(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          useMemo(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          React.useEffect(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          React.useCallback(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          React.useMemo(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          React.notReactiveHook(() => {
-            console.log(props.foo);
-          }, []);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useCallback has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useMemo has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook React.useEffect has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook React.useCallback has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook React.useMemo has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useMemo has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook React.useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook React.useCallback has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook React.useMemo has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useMemo(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCallback(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useMemo(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.notReactiveHook(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useCustomEffect(() => {
             console.log(props.foo);
@@ -2316,34 +2888,90 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useCustomEffect(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          useEffect(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          React.useEffect(() => {
-            console.log(props.foo);
-          }, [props.foo]);
-          React.useCustomEffect(() => {
-            console.log(props.foo);
-          }, []);
-        }
-      `,
       options: [{additionalHooks: 'useCustomEffect'}],
       errors: [
-        "React Hook useCustomEffect has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useEffect has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook React.useEffect has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCustomEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook React.useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  useEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                  React.useEffect(() => {
+                    console.log(props.foo);
+                  }, [props.foo]);
+                  React.useCustomEffect(() => {
+                    console.log(props.foo);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -2351,24 +2979,36 @@ const tests = {
           }, [a ? local : b]);
         }
       `,
-      // TODO: should we bail out instead?
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
-        'React Hook useEffect has a complex expression in the dependency array. ' +
-          'Extract it to a separate variable so it can be statically checked.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          // TODO: should we bail out instead?
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const local = {};
           useEffect(() => {
@@ -2376,24 +3016,36 @@ const tests = {
           }, [a && local]);
         }
       `,
-      // TODO: should we bail out instead?
-      output: `
-        function MyComponent() {
-          const local = {};
-          useEffect(() => {
-            console.log(local);
-          }, [local]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local'. " +
-          'Either include it or remove the dependency array.',
-        'React Hook useEffect has a complex expression in the dependency array. ' +
-          'Extract it to a separate variable so it can be statically checked.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local'. " +
+            'Either include it or remove the dependency array.',
+          // TODO: should we bail out instead?
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [local]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local = {};
+                  useEffect(() => {
+                    console.log(local);
+                  }, [local]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            'React Hook useEffect has a complex expression in the dependency array. ' +
+            'Extract it to a separate variable so it can be statically checked.',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const ref = useRef();
           const [state, setState] = useState();
@@ -2403,25 +3055,33 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent() {
-          const ref = useRef();
-          const [state, setState] = useState();
-          useEffect(() => {
-            ref.current = {};
-            setState(state + 1);
-          }, [state]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'state'. " +
-          'Either include it or remove the dependency array. ' +
-          `You can also do a functional update 'setState(s => ...)' ` +
-          `if you only need 'state' in the 'setState' call.`,
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'state'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setState(s => ...)' ` +
+            `if you only need 'state' in the 'setState' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [state]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const ref = useRef();
+                  const [state, setState] = useState();
+                  useEffect(() => {
+                    ref.current = {};
+                    setState(state + 1);
+                  }, [state]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const ref = useRef();
           const [state, setState] = useState();
@@ -2431,28 +3091,36 @@ const tests = {
           }, [ref]);
         }
       `,
-      // We don't ask to remove static deps but don't add them either.
-      // Don't suggest removing "ref" (it's fine either way)
-      // but *do* add "state". *Don't* add "setState" ourselves.
-      output: `
-        function MyComponent() {
-          const ref = useRef();
-          const [state, setState] = useState();
-          useEffect(() => {
-            ref.current = {};
-            setState(state + 1);
-          }, [ref, state]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'state'. " +
-          'Either include it or remove the dependency array. ' +
-          `You can also do a functional update 'setState(s => ...)' ` +
-          `if you only need 'state' in the 'setState' call.`,
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'state'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setState(s => ...)' ` +
+            `if you only need 'state' in the 'setState' call.`,
+          // We don't ask to remove static deps but don't add them either.
+          // Don't suggest removing "ref" (it's fine either way)
+          // but *do* add "state". *Don't* add "setState" ourselves.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [ref, state]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const ref = useRef();
+                  const [state, setState] = useState();
+                  useEffect(() => {
+                    ref.current = {};
+                    setState(state + 1);
+                  }, [ref, state]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const ref1 = useRef();
           const ref2 = useRef();
@@ -2464,25 +3132,34 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const ref1 = useRef();
-          const ref2 = useRef();
-          useEffect(() => {
-            ref1.current.focus();
-            console.log(ref2.current.textContent);
-            alert(props.someOtherRefs.current.innerHTML);
-            fetch(props.color);
-          }, [props.color, props.someOtherRefs]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'props.color' and 'props.someOtherRefs'. " +
-          'Either include them or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'props.color' and 'props.someOtherRefs'. " +
+            'Either include them or remove the dependency array.',
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [props.color, props.someOtherRefs]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  useEffect(() => {
+                    ref1.current.focus();
+                    console.log(ref2.current.textContent);
+                    alert(props.someOtherRefs.current.innerHTML);
+                    fetch(props.color);
+                  }, [props.color, props.someOtherRefs]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const ref1 = useRef();
           const ref2 = useRef();
@@ -2494,27 +3171,36 @@ const tests = {
           }, [ref1.current, ref2.current, props.someOtherRefs, props.color]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const ref1 = useRef();
-          const ref2 = useRef();
-          useEffect(() => {
-            ref1.current.focus();
-            console.log(ref2.current.textContent);
-            alert(props.someOtherRefs.current.innerHTML);
-            fetch(props.color);
-          }, [props.someOtherRefs, props.color]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +
-          'Either exclude them or remove the dependency array. ' +
-          "Mutable values like 'ref1.current' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Mutable values like 'ref1.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [props.someOtherRefs, props.color]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  useEffect(() => {
+                    ref1.current.focus();
+                    console.log(ref2.current.textContent);
+                    alert(props.someOtherRefs.current.innerHTML);
+                    fetch(props.color);
+                  }, [props.someOtherRefs, props.color]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const ref = useRef();
           useEffect(() => {
@@ -2522,23 +3208,31 @@ const tests = {
           }, [ref.current]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const ref = useRef();
-          useEffect(() => {
-            console.log(ref.current);
-          }, []);
-        }
-      `,
       errors: [
-        "React Hook useEffect has an unnecessary dependency: 'ref.current'. " +
-          'Either exclude it or remove the dependency array. ' +
-          "Mutable values like 'ref.current' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useEffect has an unnecessary dependency: 'ref.current'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Mutable values like 'ref.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const ref = useRef();
+                  useEffect(() => {
+                    console.log(ref.current);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ activeTab }) {
           const ref1 = useRef();
           const ref2 = useRef();
@@ -2548,25 +3242,33 @@ const tests = {
           }, [ref1.current, ref2.current, activeTab]);
         }
       `,
-      output: `
-        function MyComponent({ activeTab }) {
-          const ref1 = useRef();
-          const ref2 = useRef();
-          useEffect(() => {
-            ref1.current.scrollTop = 0;
-            ref2.current.scrollTop = 0;
-          }, [activeTab]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +
-          'Either exclude them or remove the dependency array. ' +
-          "Mutable values like 'ref1.current' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useEffect has unnecessary dependencies: 'ref1.current' and 'ref2.current'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Mutable values like 'ref1.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [activeTab]',
+              output: normalizeIndent`
+                function MyComponent({ activeTab }) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  useEffect(() => {
+                    ref1.current.scrollTop = 0;
+                    ref2.current.scrollTop = 0;
+                  }, [activeTab]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent({ activeTab, initY }) {
           const ref1 = useRef();
           const ref2 = useRef();
@@ -2576,25 +3278,33 @@ const tests = {
           }, [ref1.current, ref2.current, activeTab, initY]);
         }
       `,
-      output: `
-        function MyComponent({ activeTab, initY }) {
-          const ref1 = useRef();
-          const ref2 = useRef();
-          const fn = useCallback(() => {
-            ref1.current.scrollTop = initY;
-            ref2.current.scrollTop = initY;
-          }, [initY]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has unnecessary dependencies: 'activeTab', 'ref1.current', and 'ref2.current'. " +
-          'Either exclude them or remove the dependency array. ' +
-          "Mutable values like 'ref1.current' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useCallback has unnecessary dependencies: 'activeTab', 'ref1.current', and 'ref2.current'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Mutable values like 'ref1.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [initY]',
+              output: normalizeIndent`
+                function MyComponent({ activeTab, initY }) {
+                  const ref1 = useRef();
+                  const ref2 = useRef();
+                  const fn = useCallback(() => {
+                    ref1.current.scrollTop = initY;
+                    ref2.current.scrollTop = initY;
+                  }, [initY]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           const ref = useRef();
           useEffect(() => {
@@ -2602,23 +3312,31 @@ const tests = {
           }, [ref.current, ref]);
         }
       `,
-      output: `
-        function MyComponent() {
-          const ref = useRef();
-          useEffect(() => {
-            console.log(ref.current);
-          }, [ref]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has an unnecessary dependency: 'ref.current'. " +
-          'Either exclude it or remove the dependency array. ' +
-          "Mutable values like 'ref.current' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useEffect has an unnecessary dependency: 'ref.current'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Mutable values like 'ref.current' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [ref]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const ref = useRef();
+                  useEffect(() => {
+                    console.log(ref.current);
+                  }, [ref]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         const MyComponent = forwardRef((props, ref) => {
           useImperativeHandle(ref, () => ({
             focus() {
@@ -2627,22 +3345,30 @@ const tests = {
           }), [])
         });
       `,
-      output: `
-        const MyComponent = forwardRef((props, ref) => {
-          useImperativeHandle(ref, () => ({
-            focus() {
-              alert(props.hello);
-            }
-          }), [props.hello])
-        });
-      `,
       errors: [
-        "React Hook useImperativeHandle has a missing dependency: 'props.hello'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useImperativeHandle has a missing dependency: 'props.hello'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.hello]',
+              output: normalizeIndent`
+                const MyComponent = forwardRef((props, ref) => {
+                  useImperativeHandle(ref, () => ({
+                    focus() {
+                      alert(props.hello);
+                    }
+                  }), [props.hello])
+                });
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             if (props.onChange) {
@@ -2651,29 +3377,37 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            if (props.onChange) {
-              props.onChange();
-            }
-          }, [props]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'props'. " +
-          'Either include it or remove the dependency array. ' +
-          `However, 'props' will change when *any* prop changes, so the ` +
-          `preferred fix is to destructure the 'props' object outside ` +
-          `of the useEffect call and refer to those specific ` +
-          `props inside useEffect.`,
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    if (props.onChange) {
+                      props.onChange();
+                    }
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
-           function play() {
+            function play() {
               props.onPlay();
             }
             function pause() {
@@ -2682,29 +3416,37 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-           function play() {
-              props.onPlay();
-            }
-            function pause() {
-              props.onPause();
-            }
-          }, [props]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'props'. " +
-          'Either include it or remove the dependency array. ' +
-          `However, 'props' will change when *any* prop changes, so the ` +
-          `preferred fix is to destructure the 'props' object outside ` +
-          `of the useEffect call and refer to those specific ` +
-          `props inside useEffect.`,
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    function play() {
+                      props.onPlay();
+                    }
+                    function pause() {
+                      props.onPause();
+                    }
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             if (props.foo.onChange) {
@@ -2713,22 +3455,30 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            if (props.foo.onChange) {
-              props.foo.onChange();
-            }
-          }, [props.foo]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'props.foo'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props.foo'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    if (props.foo.onChange) {
+                      props.foo.onChange();
+                    }
+                  }, [props.foo]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             props.onChange();
@@ -2738,27 +3488,35 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            props.onChange();
-            if (props.foo.onChange) {
-              props.foo.onChange();
-            }
-          }, [props]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'props'. " +
-          'Either include it or remove the dependency array. ' +
-          `However, 'props' will change when *any* prop changes, so the ` +
-          `preferred fix is to destructure the 'props' object outside ` +
-          `of the useEffect call and refer to those specific ` +
-          `props inside useEffect.`,
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    props.onChange();
+                    if (props.foo.onChange) {
+                      props.foo.onChange();
+                    }
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const [skillsCount] = useState();
           useEffect(() => {
@@ -2768,27 +3526,36 @@ const tests = {
           }, [skillsCount, props.isEditMode, props.toggleEditMode]);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const [skillsCount] = useState();
-          useEffect(() => {
-            if (skillsCount === 0 && !props.isEditMode) {
-              props.toggleEditMode();
-            }
-          }, [skillsCount, props.isEditMode, props.toggleEditMode, props]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'props'. " +
-          'Either include it or remove the dependency array. ' +
-          `However, 'props' will change when *any* prop changes, so the ` +
-          `preferred fix is to destructure the 'props' object outside ` +
-          `of the useEffect call and refer to those specific ` +
-          `props inside useEffect.`,
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [skillsCount, props.isEditMode, props.toggleEditMode, props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const [skillsCount] = useState();
+                  useEffect(() => {
+                    if (skillsCount === 0 && !props.isEditMode) {
+                      props.toggleEditMode();
+                    }
+                  }, [skillsCount, props.isEditMode, props.toggleEditMode, props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const [skillsCount] = useState();
           useEffect(() => {
@@ -2798,27 +3565,35 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          const [skillsCount] = useState();
-          useEffect(() => {
-            if (skillsCount === 0 && !props.isEditMode) {
-              props.toggleEditMode();
-            }
-          }, [props, skillsCount]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'props' and 'skillsCount'. " +
-          'Either include them or remove the dependency array. ' +
-          `However, 'props' will change when *any* prop changes, so the ` +
-          `preferred fix is to destructure the 'props' object outside ` +
-          `of the useEffect call and refer to those specific ` +
-          `props inside useEffect.`,
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'props' and 'skillsCount'. " +
+            'Either include them or remove the dependency array. ' +
+            `However, 'props' will change when *any* prop changes, so the ` +
+            `preferred fix is to destructure the 'props' object outside ` +
+            `of the useEffect call and refer to those specific ` +
+            `props inside useEffect.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props, skillsCount]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const [skillsCount] = useState();
+                  useEffect(() => {
+                    if (skillsCount === 0 && !props.isEditMode) {
+                      props.toggleEditMode();
+                    }
+                  }, [props, skillsCount]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             externalCall(props);
@@ -2826,22 +3601,30 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            externalCall(props);
-            props.onChange();
-          }, [props]);
-        }
-      `,
       // Don't suggest to destructure props here since you can't.
       errors: [
-        "React Hook useEffect has a missing dependency: 'props'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    externalCall(props);
+                    props.onChange();
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           useEffect(() => {
             props.onChange();
@@ -2849,22 +3632,30 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          useEffect(() => {
-            props.onChange();
-            externalCall(props);
-          }, [props]);
-        }
-      `,
       // Don't suggest to destructure props here since you can't.
       errors: [
-        "React Hook useEffect has a missing dependency: 'props'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'props'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  useEffect(() => {
+                    props.onChange();
+                    externalCall(props);
+                  }, [props]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let value;
           let value2;
@@ -2888,54 +3679,48 @@ const tests = {
       `,
       // This is a separate warning unrelated to others.
       // We could've made a separate rule for it but it's rare enough to name it.
-      // No autofix suggestion because the intent isn't clear.
-      output: `
-        function MyComponent(props) {
-          let value;
-          let value2;
-          let value3;
-          let value4;
-          let asyncValue;
-          useEffect(() => {
-            if (value4) {
-              value = {};
-            }
-            value2 = 100;
-            value = 43;
-            value4 = true;
-            console.log(value2);
-            console.log(value3);
-            setTimeout(() => {
-              asyncValue = 100;
-            });
-          }, []);
-        }
-      `,
+      // No suggestions because the intent isn't clear.
       errors: [
-        // value2
-        `Assignments to the 'value2' variable from inside React Hook useEffect ` +
-          `will be lost after each render. To preserve the value over time, ` +
-          `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
-          `Otherwise, you can move this variable directly inside useEffect.`,
-        // value
-        `Assignments to the 'value' variable from inside React Hook useEffect ` +
-          `will be lost after each render. To preserve the value over time, ` +
-          `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
-          `Otherwise, you can move this variable directly inside useEffect.`,
-        // value4
-        `Assignments to the 'value4' variable from inside React Hook useEffect ` +
-          `will be lost after each render. To preserve the value over time, ` +
-          `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
-          `Otherwise, you can move this variable directly inside useEffect.`,
-        // asyncValue
-        `Assignments to the 'asyncValue' variable from inside React Hook useEffect ` +
-          `will be lost after each render. To preserve the value over time, ` +
-          `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
-          `Otherwise, you can move this variable directly inside useEffect.`,
+        {
+          message:
+            // value2
+            `Assignments to the 'value2' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // value
+            `Assignments to the 'value' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // value4
+            `Assignments to the 'value4' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // asyncValue
+            `Assignments to the 'asyncValue' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let value;
           let value2;
@@ -2955,56 +3740,39 @@ const tests = {
       `,
       // This is a separate warning unrelated to others.
       // We could've made a separate rule for it but it's rare enough to name it.
-      // No autofix suggestion because the intent isn't clear.
-      output: `
-        function MyComponent(props) {
-          let value;
-          let value2;
-          let value3;
-          let asyncValue;
-          useEffect(() => {
-            value = {};
-            value2 = 100;
-            value = 43;
-            console.log(value2);
-            console.log(value3);
-            setTimeout(() => {
-              asyncValue = 100;
-            });
-          }, [value, value2, value3]);
-        }
-      `,
+      // No suggestions because the intent isn't clear.
       errors: [
-        // value
-        `Assignments to the 'value' variable from inside React Hook useEffect ` +
-          `will be lost after each render. To preserve the value over time, ` +
-          `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
-          `Otherwise, you can move this variable directly inside useEffect.`,
-        // value2
-        `Assignments to the 'value2' variable from inside React Hook useEffect ` +
-          `will be lost after each render. To preserve the value over time, ` +
-          `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
-          `Otherwise, you can move this variable directly inside useEffect.`,
-        // asyncValue
-        `Assignments to the 'asyncValue' variable from inside React Hook useEffect ` +
-          `will be lost after each render. To preserve the value over time, ` +
-          `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
-          `Otherwise, you can move this variable directly inside useEffect.`,
+        {
+          message:
+            // value
+            `Assignments to the 'value' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // value2
+            `Assignments to the 'value2' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
+        {
+          message:
+            // asyncValue
+            `Assignments to the 'asyncValue' variable from inside React Hook useEffect ` +
+            `will be lost after each render. To preserve the value over time, ` +
+            `store it in a useRef Hook and keep the mutable value in the '.current' property. ` +
+            `Otherwise, you can move this variable directly inside useEffect.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function MyComponent() {
-          const myRef = useRef();
-          useEffect(() => {
-            const handleMove = () => {};
-            myRef.current.addEventListener('mousemove', handleMove);
-            return () => myRef.current.removeEventListener('mousemove', handleMove);
-          }, []);
-          return <div ref={myRef} />;
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function MyComponent() {
           const myRef = useRef();
           useEffect(() => {
@@ -3016,25 +3784,18 @@ const tests = {
         }
       `,
       errors: [
-        `The ref value 'myRef.current' will likely have changed by the time ` +
-          `this effect cleanup function runs. If this ref points to a node ` +
-          `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
-          `and use that variable in the cleanup function.`,
+        {
+          message:
+            `The ref value 'myRef.current' will likely have changed by the time ` +
+            `this effect cleanup function runs. If this ref points to a node ` +
+            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
+            `and use that variable in the cleanup function.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function MyComponent() {
-          const myRef = useRef();
-          useEffect(() => {
-            const handleMove = () => {};
-            myRef.current.addEventListener('mousemove', handleMove);
-            return () => myRef.current.removeEventListener('mousemove', handleMove);
-          });
-          return <div ref={myRef} />;
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function MyComponent() {
           const myRef = useRef();
           useEffect(() => {
@@ -3046,23 +3807,18 @@ const tests = {
         }
       `,
       errors: [
-        `The ref value 'myRef.current' will likely have changed by the time ` +
-          `this effect cleanup function runs. If this ref points to a node ` +
-          `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
-          `and use that variable in the cleanup function.`,
+        {
+          message:
+            `The ref value 'myRef.current' will likely have changed by the time ` +
+            `this effect cleanup function runs. If this ref points to a node ` +
+            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
+            `and use that variable in the cleanup function.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function useMyThing(myRef) {
-          useEffect(() => {
-            const handleMove = () => {};
-            myRef.current.addEventListener('mousemove', handleMove);
-            return () => myRef.current.removeEventListener('mousemove', handleMove);
-          }, [myRef]);
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function useMyThing(myRef) {
           useEffect(() => {
             const handleMove = () => {};
@@ -3072,29 +3828,18 @@ const tests = {
         }
       `,
       errors: [
-        `The ref value 'myRef.current' will likely have changed by the time ` +
-          `this effect cleanup function runs. If this ref points to a node ` +
-          `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
-          `and use that variable in the cleanup function.`,
+        {
+          message:
+            `The ref value 'myRef.current' will likely have changed by the time ` +
+            `this effect cleanup function runs. If this ref points to a node ` +
+            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
+            `and use that variable in the cleanup function.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function useMyThing(myRef) {
-          useEffect(() => {
-            const handleMouse = () => {};
-            myRef.current.addEventListener('mousemove', handleMouse);
-            myRef.current.addEventListener('mousein', handleMouse);
-            return function() {
-              setTimeout(() => {
-                myRef.current.removeEventListener('mousemove', handleMouse);
-                myRef.current.removeEventListener('mousein', handleMouse);
-              });
-            }
-          }, [myRef]);
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function useMyThing(myRef) {
           useEffect(() => {
             const handleMouse = () => {};
@@ -3110,29 +3855,18 @@ const tests = {
         }
       `,
       errors: [
-        `The ref value 'myRef.current' will likely have changed by the time ` +
-          `this effect cleanup function runs. If this ref points to a node ` +
-          `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
-          `and use that variable in the cleanup function.`,
+        {
+          message:
+            `The ref value 'myRef.current' will likely have changed by the time ` +
+            `this effect cleanup function runs. If this ref points to a node ` +
+            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
+            `and use that variable in the cleanup function.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function useMyThing(myRef, active) {
-          useEffect(() => {
-            const handleMove = () => {};
-            if (active) {
-              myRef.current.addEventListener('mousemove', handleMove);
-              return function() {
-                setTimeout(() => {
-                  myRef.current.removeEventListener('mousemove', handleMove);
-                });
-              }
-            }
-          }, [myRef, active]);
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function useMyThing(myRef, active) {
           useEffect(() => {
             const handleMove = () => {};
@@ -3148,10 +3882,14 @@ const tests = {
         }
       `,
       errors: [
-        `The ref value 'myRef.current' will likely have changed by the time ` +
-          `this effect cleanup function runs. If this ref points to a node ` +
-          `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
-          `and use that variable in the cleanup function.`,
+        {
+          message:
+            `The ref value 'myRef.current' will likely have changed by the time ` +
+            `this effect cleanup function runs. If this ref points to a node ` +
+            `rendered by React, copy 'myRef.current' to a variable inside the effect, ` +
+            `and use that variable in the cleanup function.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
@@ -3187,41 +3925,50 @@ const tests = {
     },
     {
       // Autofix ignores constant primitives (leaving the ones that are there).
-      code: `
-      function MyComponent() {
-        const local1 = 42;
-        const local2 = '42';
-        const local3 = null;
-        const local4 = {};
-        useEffect(() => {
-          console.log(local1);
-          console.log(local2);
-          console.log(local3);
-          console.log(local4);
-        }, [local1, local3]);
-      }
-    `,
-      output: `
-      function MyComponent() {
-        const local1 = 42;
-        const local2 = '42';
-        const local3 = null;
-        const local4 = {};
-        useEffect(() => {
-          console.log(local1);
-          console.log(local2);
-          console.log(local3);
-          console.log(local4);
-        }, [local1, local3, local4]);
-      }
-    `,
+      code: normalizeIndent`
+        function MyComponent() {
+          const local1 = 42;
+          const local2 = '42';
+          const local3 = null;
+          const local4 = {};
+          useEffect(() => {
+            console.log(local1);
+            console.log(local2);
+            console.log(local3);
+            console.log(local4);
+          }, [local1, local3]);
+        }
+      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'local4'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'local4'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [local1, local3, local4]',
+              output: normalizeIndent`
+                function MyComponent() {
+                  const local1 = 42;
+                  const local2 = '42';
+                  const local3 = null;
+                  const local4 = {};
+                  useEffect(() => {
+                    console.log(local1);
+                    console.log(local2);
+                    console.log(local3);
+                    console.log(local4);
+                  }, [local1, local3, local4]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent() {
           useEffect(() => {
             window.scrollTo(0, 0);
@@ -3229,14 +3976,29 @@ const tests = {
         }
       `,
       errors: [
-        "React Hook useEffect has an unnecessary dependency: 'window'. " +
-          'Either exclude it or remove the dependency array. ' +
-          "Outer scope values like 'window' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useEffect has an unnecessary dependency: 'window'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Outer scope values like 'window' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function MyComponent() {
+                  useEffect(() => {
+                    window.scrollTo(0, 0);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         import MutableStore from 'store';
 
         function MyComponent() {
@@ -3245,24 +4007,32 @@ const tests = {
           }, [MutableStore.hello]);
         }
       `,
-      output: `
-        import MutableStore from 'store';
-
-        function MyComponent() {
-          useEffect(() => {
-            console.log(MutableStore.hello);
-          }, []);
-        }
-      `,
       errors: [
-        "React Hook useEffect has an unnecessary dependency: 'MutableStore.hello'. " +
-          'Either exclude it or remove the dependency array. ' +
-          "Outer scope values like 'MutableStore.hello' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            "React Hook useEffect has an unnecessary dependency: 'MutableStore.hello'. " +
+            'Either exclude it or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+
+                function MyComponent() {
+                  useEffect(() => {
+                    console.log(MutableStore.hello);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         import MutableStore from 'store';
         let z = {};
 
@@ -3276,30 +4046,38 @@ const tests = {
           }
         }
       `,
-      output: `
-        import MutableStore from 'store';
-        let z = {};
-
-        function MyComponent(props) {
-          let x = props.foo;
-          {
-            let y = props.bar;
-            useEffect(() => {
-              console.log(MutableStore.hello.world, props.foo, x, y, z, global.stuff);
-            }, [props.foo, x, y]);
-          }
-        }
-      `,
-      errors: [
-        'React Hook useEffect has unnecessary dependencies: ' +
-          "'MutableStore.hello.world', 'global.stuff', and 'z'. " +
-          'Either exclude them or remove the dependency array. ' +
-          "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
-      ],
-    },
-    {
-      code: `
+      errors: [
+        {
+          message:
+            'React Hook useEffect has unnecessary dependencies: ' +
+            "'MutableStore.hello.world', 'global.stuff', and 'z'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo, x, y]',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+                let z = {};
+
+                function MyComponent(props) {
+                  let x = props.foo;
+                  {
+                    let y = props.bar;
+                    useEffect(() => {
+                      console.log(MutableStore.hello.world, props.foo, x, y, z, global.stuff);
+                    }, [props.foo, x, y]);
+                  }
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
         import MutableStore from 'store';
         let z = {};
 
@@ -3313,32 +4091,40 @@ const tests = {
           }
         }
       `,
-      // The output should contain the ones that are inside a component
-      // since there are legit reasons to over-specify them for effects.
-      output: `
-        import MutableStore from 'store';
-        let z = {};
-
-        function MyComponent(props) {
-          let x = props.foo;
-          {
-            let y = props.bar;
-            useEffect(() => {
-              // nothing
-            }, [props.foo, x, y]);
-          }
-        }
-      `,
       errors: [
-        'React Hook useEffect has unnecessary dependencies: ' +
-          "'MutableStore.hello.world', 'global.stuff', and 'z'. " +
-          'Either exclude them or remove the dependency array. ' +
-          "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            'React Hook useEffect has unnecessary dependencies: ' +
+            "'MutableStore.hello.world', 'global.stuff', and 'z'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          // The output should contain the ones that are inside a component
+          // since there are legit reasons to over-specify them for effects.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [props.foo, x, y]',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+                let z = {};
+
+                function MyComponent(props) {
+                  let x = props.foo;
+                  {
+                    let y = props.bar;
+                    useEffect(() => {
+                      // nothing
+                    }, [props.foo, x, y]);
+                  }
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         import MutableStore from 'store';
         let z = {};
 
@@ -3352,31 +4138,39 @@ const tests = {
           }
         }
       `,
-      output: `
-        import MutableStore from 'store';
-        let z = {};
-
-        function MyComponent(props) {
-          let x = props.foo;
-          {
-            let y = props.bar;
-            const fn = useCallback(() => {
-              // nothing
-            }, []);
-          }
-        }
-      `,
       errors: [
-        'React Hook useCallback has unnecessary dependencies: ' +
-          "'MutableStore.hello.world', 'global.stuff', 'props.foo', 'x', 'y', and 'z'. " +
-          'Either exclude them or remove the dependency array. ' +
-          "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
-          "because mutating them doesn't re-render the component.",
+        {
+          message:
+            'React Hook useCallback has unnecessary dependencies: ' +
+            "'MutableStore.hello.world', 'global.stuff', 'props.foo', 'x', 'y', and 'z'. " +
+            'Either exclude them or remove the dependency array. ' +
+            "Outer scope values like 'MutableStore.hello.world' aren't valid dependencies " +
+            "because mutating them doesn't re-render the component.",
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                import MutableStore from 'store';
+                let z = {};
+
+                function MyComponent(props) {
+                  let x = props.foo;
+                  {
+                    let y = props.bar;
+                    const fn = useCallback(() => {
+                      // nothing
+                    }, []);
+                  }
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Every almost-static function is tainted by a dynamic value.
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let [, setState] = useState();
           let [, dispatch] = React.useReducer();
@@ -3406,48 +4200,132 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          let [, setState] = useState();
-          let [, dispatch] = React.useReducer();
-          let taint = props.foo;
-
-          function handleNext1(value) {
-            let value2 = value * taint;
-            setState(value2);
-            console.log('hello');
-          }
-          const handleNext2 = (value) => {
-            setState(taint(value));
-            console.log('hello');
-          };
-          let handleNext3 = function(value) {
-            setTimeout(() => console.log(taint));
-            dispatch({ type: 'x', value });
-          };
-          useEffect(() => {
-            return Store.subscribe(handleNext1);
-          }, [handleNext1]);
-          useLayoutEffect(() => {
-            return Store.subscribe(handleNext2);
-          }, [handleNext2]);
-          useMemo(() => {
-            return Store.subscribe(handleNext3);
-          }, [handleNext3]);
-        }
-      `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'handleNext1'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useMemo has a missing dependency: 'handleNext3'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'handleNext1'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext1]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    setTimeout(() => console.log(taint));
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext2]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    setTimeout(() => console.log(taint));
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useMemo has a missing dependency: 'handleNext3'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext3]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    setTimeout(() => console.log(taint));
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, [handleNext3]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Regression test
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let [, setState] = useState();
           let [, dispatch] = React.useReducer();
@@ -3480,51 +4358,141 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          let [, setState] = useState();
-          let [, dispatch] = React.useReducer();
-          let taint = props.foo;
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'handleNext1'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext1]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
 
-          // Shouldn't affect anything
-          function handleChange() {}
+                  // Shouldn't affect anything
+                  function handleChange() {}
 
-          function handleNext1(value) {
-            let value2 = value * taint;
-            setState(value2);
-            console.log('hello');
-          }
-          const handleNext2 = (value) => {
-            setState(taint(value));
-            console.log('hello');
-          };
-          let handleNext3 = function(value) {
-            console.log(taint);
-            dispatch({ type: 'x', value });
-          };
-          useEffect(() => {
-            return Store.subscribe(handleNext1);
-          }, [handleNext1]);
-          useLayoutEffect(() => {
-            return Store.subscribe(handleNext2);
-          }, [handleNext2]);
-          useMemo(() => {
-            return Store.subscribe(handleNext3);
-          }, [handleNext3]);
-        }
-      `,
-      errors: [
-        "React Hook useEffect has a missing dependency: 'handleNext1'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useMemo has a missing dependency: 'handleNext3'. " +
-          'Either include it or remove the dependency array.',
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext2]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  function handleChange() {}
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useMemo has a missing dependency: 'handleNext3'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext3]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  function handleChange() {}
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, [handleNext3]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Regression test
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let [, setState] = useState();
           let [, dispatch] = React.useReducer();
@@ -3557,67 +4525,140 @@ const tests = {
           }, []);
         }
       `,
-      output: `
-        function MyComponent(props) {
-          let [, setState] = useState();
-          let [, dispatch] = React.useReducer();
-          let taint = props.foo;
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'handleNext1'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext1]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
 
-          // Shouldn't affect anything
-          const handleChange = () => {};
+                  // Shouldn't affect anything
+                  const handleChange = () => {};
 
-          function handleNext1(value) {
-            let value2 = value * taint;
-            setState(value2);
-            console.log('hello');
-          }
-          const handleNext2 = (value) => {
-            setState(taint(value));
-            console.log('hello');
-          };
-          let handleNext3 = function(value) {
-            console.log(taint);
-            dispatch({ type: 'x', value });
-          };
-          useEffect(() => {
-            return Store.subscribe(handleNext1);
-          }, [handleNext1]);
-          useLayoutEffect(() => {
-            return Store.subscribe(handleNext2);
-          }, [handleNext2]);
-          useMemo(() => {
-            return Store.subscribe(handleNext3);
-          }, [handleNext3]);
-        }
-      `,
-      errors: [
-        "React Hook useEffect has a missing dependency: 'handleNext1'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
-          'Either include it or remove the dependency array.',
-        "React Hook useMemo has a missing dependency: 'handleNext3'. " +
-          'Either include it or remove the dependency array.',
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useLayoutEffect has a missing dependency: 'handleNext2'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext2]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  const handleChange = () => {};
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "React Hook useMemo has a missing dependency: 'handleNext3'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [handleNext3]',
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
+                  let [, dispatch] = React.useReducer();
+                  let taint = props.foo;
+
+                  // Shouldn't affect anything
+                  const handleChange = () => {};
+
+                  function handleNext1(value) {
+                    let value2 = value * taint;
+                    setState(value2);
+                    console.log('hello');
+                  }
+                  const handleNext2 = (value) => {
+                    setState(taint(value));
+                    console.log('hello');
+                  };
+                  let handleNext3 = function(value) {
+                    console.log(taint);
+                    dispatch({ type: 'x', value });
+                  };
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                  }, []);
+                  useLayoutEffect(() => {
+                    return Store.subscribe(handleNext2);
+                  }, []);
+                  useMemo(() => {
+                    return Store.subscribe(handleNext3);
+                  }, [handleNext3]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      // Even if the function only references static values,
-      // once you specify it in deps, it will invalidate them.
-      code: `
-        function MyComponent(props) {
-          let [, setState] = useState();
-
-          function handleNext(value) {
-            setState(value);
-          }
-
-          useEffect(() => {
-            return Store.subscribe(handleNext);
-          }, [handleNext]);
-        }
-      `,
-      // Not gonna autofix a function definition
-      // because it's not always safe due to hoisting.
-      output: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let [, setState] = useState();
 
@@ -3631,31 +4672,22 @@ const tests = {
         }
       `,
       errors: [
-        `The 'handleNext' function makes the dependencies of ` +
-          `useEffect Hook (at line 11) change on every render. ` +
-          `Move it inside the useEffect callback. Alternatively, ` +
-          `wrap the 'handleNext' definition into its own useCallback() Hook.`,
+        {
+          message:
+            `The 'handleNext' function makes the dependencies of ` +
+            `useEffect Hook (at line 11) change on every render. ` +
+            `Move it inside the useEffect callback. Alternatively, ` +
+            `wrap the 'handleNext' definition into its own useCallback() Hook.`,
+          // Not gonna fix a function definition
+          // because it's not always safe due to hoisting.
+          suggestions: undefined,
+        },
       ],
     },
     {
       // Even if the function only references static values,
       // once you specify it in deps, it will invalidate them.
-      code: `
-        function MyComponent(props) {
-          let [, setState] = useState();
-
-          const handleNext = (value) => {
-            setState(value);
-          };
-
-          useEffect(() => {
-            return Store.subscribe(handleNext);
-          }, [handleNext]);
-        }
-      `,
-      // We don't autofix moving (too invasive). But that's the suggested fix
-      // when only effect uses this function. Otherwise, we'd useCallback.
-      output: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let [, setState] = useState();
 
@@ -3669,10 +4701,16 @@ const tests = {
         }
       `,
       errors: [
-        `The 'handleNext' function makes the dependencies of ` +
-          `useEffect Hook (at line 11) change on every render. ` +
-          `Move it inside the useEffect callback. Alternatively, ` +
-          `wrap the 'handleNext' definition into its own useCallback() Hook.`,
+        {
+          message:
+            `The 'handleNext' function makes the dependencies of ` +
+            `useEffect Hook (at line 11) change on every render. ` +
+            `Move it inside the useEffect callback. Alternatively, ` +
+            `wrap the 'handleNext' definition into its own useCallback() Hook.`,
+          // We don't fix moving (too invasive). But that's the suggested fix
+          // when only effect uses this function. Otherwise, we'd useCallback.
+          suggestions: undefined,
+        },
       ],
     },
     {
@@ -3681,7 +4719,7 @@ const tests = {
       // However, we can't suggest moving handleNext into the
       // effect because it is *also* used outside of it.
       // So our suggestion is useCallback().
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let [, setState] = useState();
 
@@ -3696,55 +4734,40 @@ const tests = {
           return <div onClick={handleNext} />;
         }
       `,
-      // We autofix this one with useCallback since it's
-      // the easy fix and you can't just move it into effect.
-      output: `
-        function MyComponent(props) {
-          let [, setState] = useState();
+      errors: [
+        {
+          message:
+            `The 'handleNext' function makes the dependencies of ` +
+            `useEffect Hook (at line 11) change on every render. ` +
+            `To fix this, wrap the 'handleNext' definition into its own useCallback() Hook.`,
+          // We fix this one with useCallback since it's
+          // the easy fix and you can't just move it into effect.
+          suggestions: [
+            {
+              desc:
+                "Wrap the 'handleNext' definition into its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let [, setState] = useState();
 
-          const handleNext = useCallback((value) => {
-            setState(value);
-          });
+                  const handleNext = useCallback((value) => {
+                    setState(value);
+                  });
 
-          useEffect(() => {
-            return Store.subscribe(handleNext);
-          }, [handleNext]);
+                  useEffect(() => {
+                    return Store.subscribe(handleNext);
+                  }, [handleNext]);
 
-          return <div onClick={handleNext} />;
-        }
-      `,
-      errors: [
-        `The 'handleNext' function makes the dependencies of ` +
-          `useEffect Hook (at line 11) change on every render. ` +
-          `To fix this, wrap the 'handleNext' definition into its own useCallback() Hook.`,
+                  return <div onClick={handleNext} />;
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
-        function MyComponent(props) {
-          function handleNext1() {
-            console.log('hello');
-          }
-          const handleNext2 = () => {
-            console.log('hello');
-          };
-          let handleNext3 = function() {
-            console.log('hello');
-          };
-          useEffect(() => {
-            return Store.subscribe(handleNext1);
-          }, [handleNext1]);
-          useLayoutEffect(() => {
-            return Store.subscribe(handleNext2);
-          }, [handleNext2]);
-          useMemo(() => {
-            return Store.subscribe(handleNext3);
-          }, [handleNext3]);
-        }
-      `,
-      // Autofix doesn't wrap into useCallback here
-      // because they are only referenced by effect itself.
-      output: `
+      code: normalizeIndent`
         function MyComponent(props) {
           function handleNext1() {
             console.log('hello');
@@ -3767,19 +4790,31 @@ const tests = {
         }
       `,
       errors: [
-        "The 'handleNext1' function makes the dependencies of useEffect Hook " +
-          '(at line 14) change on every render. Move it inside the useEffect callback. ' +
-          "Alternatively, wrap the 'handleNext1' definition into its own useCallback() Hook.",
-        "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
-          '(at line 17) change on every render. Move it inside the useLayoutEffect callback. ' +
-          "Alternatively, wrap the 'handleNext2' definition into its own useCallback() Hook.",
-        "The 'handleNext3' function makes the dependencies of useMemo Hook " +
-          '(at line 20) change on every render. Move it inside the useMemo callback. ' +
-          "Alternatively, wrap the 'handleNext3' definition into its own useCallback() Hook.",
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 14) change on every render. Move it inside the useEffect callback. ' +
+            "Alternatively, wrap the 'handleNext1' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
+            '(at line 17) change on every render. Move it inside the useLayoutEffect callback. ' +
+            "Alternatively, wrap the 'handleNext2' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext3' function makes the dependencies of useMemo Hook " +
+            '(at line 20) change on every render. Move it inside the useMemo callback. ' +
+            "Alternatively, wrap the 'handleNext3' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           function handleNext1() {
             console.log('hello');
@@ -3804,47 +4839,34 @@ const tests = {
           }, [handleNext3]);
         }
       `,
-      // Autofix doesn't wrap into useCallback here
+      // Suggestions don't wrap into useCallback here
       // because they are only referenced by effect itself.
-      output: `
-        function MyComponent(props) {
-          function handleNext1() {
-            console.log('hello');
-          }
-          const handleNext2 = () => {
-            console.log('hello');
-          };
-          let handleNext3 = function() {
-            console.log('hello');
-          };
-          useEffect(() => {
-            handleNext1();
-            return Store.subscribe(() => handleNext1());
-          }, [handleNext1]);
-          useLayoutEffect(() => {
-            handleNext2();
-            return Store.subscribe(() => handleNext2());
-          }, [handleNext2]);
-          useMemo(() => {
-            handleNext3();
-            return Store.subscribe(() => handleNext3());
-          }, [handleNext3]);
-        }
-      `,
       errors: [
-        "The 'handleNext1' function makes the dependencies of useEffect Hook " +
-          '(at line 15) change on every render. Move it inside the useEffect callback. ' +
-          "Alternatively, wrap the 'handleNext1' definition into its own useCallback() Hook.",
-        "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
-          '(at line 19) change on every render. Move it inside the useLayoutEffect callback. ' +
-          "Alternatively, wrap the 'handleNext2' definition into its own useCallback() Hook.",
-        "The 'handleNext3' function makes the dependencies of useMemo Hook " +
-          '(at line 23) change on every render. Move it inside the useMemo callback. ' +
-          "Alternatively, wrap the 'handleNext3' definition into its own useCallback() Hook.",
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 15) change on every render. Move it inside the useEffect callback. ' +
+            "Alternatively, wrap the 'handleNext1' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
+            '(at line 19) change on every render. Move it inside the useLayoutEffect callback. ' +
+            "Alternatively, wrap the 'handleNext2' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext3' function makes the dependencies of useMemo Hook " +
+            '(at line 23) change on every render. Move it inside the useMemo callback. ' +
+            "Alternatively, wrap the 'handleNext3' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           function handleNext1() {
             console.log('hello');
@@ -3880,58 +4902,118 @@ const tests = {
           );
         }
       `,
-      // Autofix wraps into useCallback where possible (variables only)
-      // because they are only referenced outside the effect.
-      output: `
-        function MyComponent(props) {
-          function handleNext1() {
-            console.log('hello');
-          }
-          const handleNext2 = useCallback(() => {
-            console.log('hello');
-          });
-          let handleNext3 = useCallback(function() {
-            console.log('hello');
-          });
-          useEffect(() => {
-            handleNext1();
-            return Store.subscribe(() => handleNext1());
-          }, [handleNext1]);
-          useLayoutEffect(() => {
-            handleNext2();
-            return Store.subscribe(() => handleNext2());
-          }, [handleNext2]);
-          useMemo(() => {
-            handleNext3();
-            return Store.subscribe(() => handleNext3());
-          }, [handleNext3]);
-          return (
-            <div
-              onClick={() => {
-                handleNext1();
-                setTimeout(handleNext2);
-                setTimeout(() => {
-                  handleNext3();
-                });
-              }}
-            />
-          );
-        }
-      `,
       errors: [
-        "The 'handleNext1' function makes the dependencies of useEffect Hook " +
-          '(at line 15) change on every render. To fix this, wrap the ' +
-          "'handleNext1' definition into its own useCallback() Hook.",
-        "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
-          '(at line 19) change on every render. To fix this, wrap the ' +
-          "'handleNext2' definition into its own useCallback() Hook.",
-        "The 'handleNext3' function makes the dependencies of useMemo Hook " +
-          '(at line 23) change on every render. To fix this, wrap the ' +
-          "'handleNext3' definition into its own useCallback() Hook.",
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 15) change on every render. To fix this, wrap the ' +
+            "'handleNext1' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useLayoutEffect Hook " +
+            '(at line 19) change on every render. To fix this, wrap the ' +
+            "'handleNext2' definition into its own useCallback() Hook.",
+          // Suggestion wraps into useCallback where possible (variables only)
+          // because they are only referenced outside the effect.
+          suggestions: [
+            {
+              desc:
+                "Wrap the 'handleNext2' definition into its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  function handleNext1() {
+                    console.log('hello');
+                  }
+                  const handleNext2 = useCallback(() => {
+                    console.log('hello');
+                  });
+                  let handleNext3 = function() {
+                    console.log('hello');
+                  };
+                  useEffect(() => {
+                    handleNext1();
+                    return Store.subscribe(() => handleNext1());
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    handleNext2();
+                    return Store.subscribe(() => handleNext2());
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    handleNext3();
+                    return Store.subscribe(() => handleNext3());
+                  }, [handleNext3]);
+                  return (
+                    <div
+                      onClick={() => {
+                        handleNext1();
+                        setTimeout(handleNext2);
+                        setTimeout(() => {
+                          handleNext3();
+                        });
+                      }}
+                    />
+                  );
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "The 'handleNext3' function makes the dependencies of useMemo Hook " +
+            '(at line 23) change on every render. To fix this, wrap the ' +
+            "'handleNext3' definition into its own useCallback() Hook.",
+          // Autofix wraps into useCallback where possible (variables only)
+          // because they are only referenced outside the effect.
+          suggestions: [
+            {
+              desc:
+                "Wrap the 'handleNext3' definition into its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  function handleNext1() {
+                    console.log('hello');
+                  }
+                  const handleNext2 = () => {
+                    console.log('hello');
+                  };
+                  let handleNext3 = useCallback(function() {
+                    console.log('hello');
+                  });
+                  useEffect(() => {
+                    handleNext1();
+                    return Store.subscribe(() => handleNext1());
+                  }, [handleNext1]);
+                  useLayoutEffect(() => {
+                    handleNext2();
+                    return Store.subscribe(() => handleNext2());
+                  }, [handleNext2]);
+                  useMemo(() => {
+                    handleNext3();
+                    return Store.subscribe(() => handleNext3());
+                  }, [handleNext3]);
+                  return (
+                    <div
+                      onClick={() => {
+                        handleNext1();
+                        setTimeout(handleNext2);
+                        setTimeout(() => {
+                          handleNext3();
+                        });
+                      }}
+                    />
+                  );
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           const handleNext1 = () => {
             console.log('hello');
@@ -3953,42 +5035,86 @@ const tests = {
       // effect. But it's used by more than one. So we
       // suggest useCallback() and use it for the autofix
       // where possible (variable but not declaration).
-      output: `
-        function MyComponent(props) {
-          const handleNext1 = useCallback(() => {
-            console.log('hello');
-          });
-          function handleNext2() {
-            console.log('hello');
-          }
-          useEffect(() => {
-            return Store.subscribe(handleNext1);
-            return Store.subscribe(handleNext2);
-          }, [handleNext1, handleNext2]);
-          useEffect(() => {
-            return Store.subscribe(handleNext1);
-            return Store.subscribe(handleNext2);
-          }, [handleNext1, handleNext2]);
-        }
-      `,
       // TODO: we could coalesce messages for the same function if it affects multiple Hooks.
       errors: [
-        "The 'handleNext1' function makes the dependencies of useEffect Hook " +
-          '(at line 12) change on every render. To fix this, wrap the ' +
-          "'handleNext1' definition into its own useCallback() Hook.",
-        "The 'handleNext1' function makes the dependencies of useEffect Hook " +
-          '(at line 16) change on every render. To fix this, wrap the ' +
-          "'handleNext1' definition into its own useCallback() Hook.",
-        "The 'handleNext2' function makes the dependencies of useEffect Hook " +
-          '(at line 12) change on every render. To fix this, wrap the ' +
-          "'handleNext2' definition into its own useCallback() Hook.",
-        "The 'handleNext2' function makes the dependencies of useEffect Hook " +
-          '(at line 16) change on every render. To fix this, wrap the ' +
-          "'handleNext2' definition into its own useCallback() Hook.",
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 12) change on every render. To fix this, wrap the ' +
+            "'handleNext1' definition into its own useCallback() Hook.",
+          suggestions: [
+            {
+              desc:
+                "Wrap the 'handleNext1' definition into its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const handleNext1 = useCallback(() => {
+                    console.log('hello');
+                  });
+                  function handleNext2() {
+                    console.log('hello');
+                  }
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext1, handleNext2]);
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext1, handleNext2]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "The 'handleNext1' function makes the dependencies of useEffect Hook " +
+            '(at line 16) change on every render. To fix this, wrap the ' +
+            "'handleNext1' definition into its own useCallback() Hook.",
+          suggestions: [
+            {
+              desc:
+                "Wrap the 'handleNext1' definition into its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  const handleNext1 = useCallback(() => {
+                    console.log('hello');
+                  });
+                  function handleNext2() {
+                    console.log('hello');
+                  }
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext1, handleNext2]);
+                  useEffect(() => {
+                    return Store.subscribe(handleNext1);
+                    return Store.subscribe(handleNext2);
+                  }, [handleNext1, handleNext2]);
+                }
+              `,
+            },
+          ],
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useEffect Hook " +
+            '(at line 12) change on every render. To fix this, wrap the ' +
+            "'handleNext2' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
+        {
+          message:
+            "The 'handleNext2' function makes the dependencies of useEffect Hook " +
+            '(at line 16) change on every render. To fix this, wrap the ' +
+            "'handleNext2' definition into its own useCallback() Hook.",
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let handleNext = () => {
             console.log('hello');
@@ -4003,49 +5129,42 @@ const tests = {
           }, [handleNext]);
         }
       `,
-      // Normally we'd suggest moving handleNext inside an
-      // effect. But it's used more than once.
-      // TODO: our autofix here isn't quite sufficient because
-      // it only wraps the first definition. But seems ok.
-      output: `
-        function MyComponent(props) {
-          let handleNext = useCallback(() => {
-            console.log('hello');
-          });
-          if (props.foo) {
-            handleNext = () => {
-              console.log('hello');
-            };
-          }
-          useEffect(() => {
-            return Store.subscribe(handleNext);
-          }, [handleNext]);
-        }
-      `,
       errors: [
-        "The 'handleNext' function makes the dependencies of useEffect Hook " +
-          '(at line 13) change on every render. To fix this, wrap the ' +
-          "'handleNext' definition into its own useCallback() Hook.",
+        {
+          message:
+            "The 'handleNext' function makes the dependencies of useEffect Hook " +
+            '(at line 13) change on every render. To fix this, wrap the ' +
+            "'handleNext' definition into its own useCallback() Hook.",
+          // Normally we'd suggest moving handleNext inside an
+          // effect. But it's used more than once.
+          // TODO: our autofix here isn't quite sufficient because
+          // it only wraps the first definition. But seems ok.
+          suggestions: [
+            {
+              desc:
+                "Wrap the 'handleNext' definition into its own useCallback() Hook.",
+              output: normalizeIndent`
+                function MyComponent(props) {
+                  let handleNext = useCallback(() => {
+                    console.log('hello');
+                  });
+                  if (props.foo) {
+                    handleNext = () => {
+                      console.log('hello');
+                    };
+                  }
+                  useEffect(() => {
+                    return Store.subscribe(handleNext);
+                  }, [handleNext]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
-        function MyComponent(props) {
-          let [, setState] = useState();
-          let taint = props.foo;
-
-          function handleNext(value) {
-            let value2 = value * taint;
-            setState(value2);
-            console.log('hello');
-          }
-
-          useEffect(() => {
-            return Store.subscribe(handleNext);
-          }, [handleNext]);
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function MyComponent(props) {
           let [, setState] = useState();
           let taint = props.foo;
@@ -4056,101 +5175,30 @@ const tests = {
             console.log('hello');
           }
 
-          useEffect(() => {
-            return Store.subscribe(handleNext);
-          }, [handleNext]);
-        }
-      `,
-      errors: [
-        `The 'handleNext' function makes the dependencies of ` +
-          `useEffect Hook (at line 14) change on every render. ` +
-          `Move it inside the useEffect callback. Alternatively, wrap the ` +
-          `'handleNext' definition into its own useCallback() Hook.`,
-      ],
-    },
-    {
-      code: `
-        function Counter() {
-          let [count, setCount] = useState(0);
-
-          useEffect(() => {
-            let id = setInterval(() => {
-              setCount(count + 1);
-            }, 1000);
-            return () => clearInterval(id);
-          }, []);
-
-          return <h1>{count}</h1>;
-        }
-      `,
-      output: `
-        function Counter() {
-          let [count, setCount] = useState(0);
-
-          useEffect(() => {
-            let id = setInterval(() => {
-              setCount(count + 1);
-            }, 1000);
-            return () => clearInterval(id);
-          }, [count]);
-
-          return <h1>{count}</h1>;
-        }
-      `,
-      errors: [
-        "React Hook useEffect has a missing dependency: 'count'. " +
-          'Either include it or remove the dependency array. ' +
-          `You can also do a functional update 'setCount(c => ...)' if you ` +
-          `only need 'count' in the 'setCount' call.`,
-      ],
-    },
-    {
-      code: `
-        function Counter() {
-          let [count, setCount] = useState(0);
-          let [increment, setIncrement] = useState(0);
-
-          useEffect(() => {
-            let id = setInterval(() => {
-              setCount(count + increment);
-            }, 1000);
-            return () => clearInterval(id);
-          }, []);
-
-          return <h1>{count}</h1>;
-        }
-      `,
-      output: `
-        function Counter() {
-          let [count, setCount] = useState(0);
-          let [increment, setIncrement] = useState(0);
-
-          useEffect(() => {
-            let id = setInterval(() => {
-              setCount(count + increment);
-            }, 1000);
-            return () => clearInterval(id);
-          }, [count, increment]);
-
-          return <h1>{count}</h1>;
+          useEffect(() => {
+            return Store.subscribe(handleNext);
+          }, [handleNext]);
         }
       `,
       errors: [
-        "React Hook useEffect has missing dependencies: 'count' and 'increment'. " +
-          'Either include them or remove the dependency array. ' +
-          `You can also do a functional update 'setCount(c => ...)' if you ` +
-          `only need 'count' in the 'setCount' call.`,
+        {
+          message:
+            `The 'handleNext' function makes the dependencies of ` +
+            `useEffect Hook (at line 14) change on every render. ` +
+            `Move it inside the useEffect callback. Alternatively, wrap the ` +
+            `'handleNext' definition into its own useCallback() Hook.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           let [count, setCount] = useState(0);
-          let [increment, setIncrement] = useState(0);
 
           useEffect(() => {
             let id = setInterval(() => {
-              setCount(count => count + increment);
+              setCount(count + 1);
             }, 1000);
             return () => clearInterval(id);
           }, []);
@@ -4158,33 +5206,86 @@ const tests = {
           return <h1>{count}</h1>;
         }
       `,
-      output: `
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'count'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also do a functional update 'setCount(c => ...)' if you ` +
+            `only need 'count' in the 'setCount' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [count]',
+              output: normalizeIndent`
+                function Counter() {
+                  let [count, setCount] = useState(0);
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count + 1);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [count]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
         function Counter() {
           let [count, setCount] = useState(0);
           let [increment, setIncrement] = useState(0);
 
           useEffect(() => {
             let id = setInterval(() => {
-              setCount(count => count + increment);
+              setCount(count + increment);
             }, 1000);
             return () => clearInterval(id);
-          }, [increment]);
+          }, []);
 
           return <h1>{count}</h1>;
         }
       `,
       errors: [
-        "React Hook useEffect has a missing dependency: 'increment'. " +
-          'Either include it or remove the dependency array. ' +
-          `You can also replace multiple useState variables with useReducer ` +
-          `if 'setCount' needs the current value of 'increment'.`,
+        {
+          message:
+            "React Hook useEffect has missing dependencies: 'count' and 'increment'. " +
+            'Either include them or remove the dependency array. ' +
+            `You can also do a functional update 'setCount(c => ...)' if you ` +
+            `only need 'count' in the 'setCount' call.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [count, increment]',
+              output: normalizeIndent`
+                function Counter() {
+                  let [count, setCount] = useState(0);
+                  let [increment, setIncrement] = useState(0);
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count + increment);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [count, increment]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           let [count, setCount] = useState(0);
-          let increment = useCustomHook();
+          let [increment, setIncrement] = useState(0);
 
           useEffect(() => {
             let id = setInterval(() => {
@@ -4196,7 +5297,38 @@ const tests = {
           return <h1>{count}</h1>;
         }
       `,
-      output: `
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'increment'. " +
+            'Either include it or remove the dependency array. ' +
+            `You can also replace multiple useState variables with useReducer ` +
+            `if 'setCount' needs the current value of 'increment'.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [increment]',
+              output: normalizeIndent`
+                function Counter() {
+                  let [count, setCount] = useState(0);
+                  let [increment, setIncrement] = useState(0);
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count => count + increment);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [increment]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
         function Counter() {
           let [count, setCount] = useState(0);
           let increment = useCustomHook();
@@ -4206,7 +5338,7 @@ const tests = {
               setCount(count => count + increment);
             }, 1000);
             return () => clearInterval(id);
-          }, [increment]);
+          }, []);
 
           return <h1>{count}</h1>;
         }
@@ -4215,12 +5347,35 @@ const tests = {
       // because we don't know if it's safe for it to close over a value.
       // We only show it for state variables (and possibly props).
       errors: [
-        "React Hook useEffect has a missing dependency: 'increment'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'increment'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [increment]',
+              output: normalizeIndent`
+                function Counter() {
+                  let [count, setCount] = useState(0);
+                  let increment = useCustomHook();
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count => count + increment);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [increment]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter({ step }) {
           let [count, setCount] = useState(0);
 
@@ -4238,52 +5393,42 @@ const tests = {
           return <h1>{count}</h1>;
         }
       `,
-      output: `
-        function Counter({ step }) {
-          let [count, setCount] = useState(0);
-
-          function increment(x) {
-            return x + step;
-          }
-
-          useEffect(() => {
-            let id = setInterval(() => {
-              setCount(count => increment(count));
-            }, 1000);
-            return () => clearInterval(id);
-          }, [increment]);
-
-          return <h1>{count}</h1>;
-        }
-      `,
       // This intentionally doesn't show the reducer message
       // because we don't know if it's safe for it to close over a value.
       // We only show it for state variables (and possibly props).
       errors: [
-        "React Hook useEffect has a missing dependency: 'increment'. " +
-          'Either include it or remove the dependency array.',
-      ],
-    },
-    {
-      code: `
-        function Counter({ step }) {
-          let [count, setCount] = useState(0);
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'increment'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [increment]',
+              output: normalizeIndent`
+                function Counter({ step }) {
+                  let [count, setCount] = useState(0);
 
-          function increment(x) {
-            return x + step;
-          }
+                  function increment(x) {
+                    return x + step;
+                  }
 
-          useEffect(() => {
-            let id = setInterval(() => {
-              setCount(count => increment(count));
-            }, 1000);
-            return () => clearInterval(id);
-          }, [increment]);
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count => increment(count));
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [increment]);
 
-          return <h1>{count}</h1>;
-        }
-      `,
-      output: `
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
+      ],
+    },
+    {
+      code: normalizeIndent`
         function Counter({ step }) {
           let [count, setCount] = useState(0);
 
@@ -4302,14 +5447,18 @@ const tests = {
         }
       `,
       errors: [
-        `The 'increment' function makes the dependencies of useEffect Hook ` +
-          `(at line 14) change on every render. Move it inside the useEffect callback. ` +
-          `Alternatively, wrap the \'increment\' definition into its own ` +
-          `useCallback() Hook.`,
+        {
+          message:
+            `The 'increment' function makes the dependencies of useEffect Hook ` +
+            `(at line 14) change on every render. Move it inside the useEffect callback. ` +
+            `Alternatively, wrap the \'increment\' definition into its own ` +
+            `useCallback() Hook.`,
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter({ increment }) {
           let [count, setCount] = useState(0);
 
@@ -4323,29 +5472,37 @@ const tests = {
           return <h1>{count}</h1>;
         }
       `,
-      output: `
-        function Counter({ increment }) {
-          let [count, setCount] = useState(0);
+      errors: [
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'increment'. " +
+            'Either include it or remove the dependency array. ' +
+            `If 'setCount' needs the current value of 'increment', ` +
+            `you can also switch to useReducer instead of useState and read 'increment' in the reducer.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [increment]',
+              output: normalizeIndent`
+                function Counter({ increment }) {
+                  let [count, setCount] = useState(0);
 
-          useEffect(() => {
-            let id = setInterval(() => {
-              setCount(count => count + increment);
-            }, 1000);
-            return () => clearInterval(id);
-          }, [increment]);
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      setCount(count => count + increment);
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [increment]);
 
-          return <h1>{count}</h1>;
-        }
-      `,
-      errors: [
-        "React Hook useEffect has a missing dependency: 'increment'. " +
-          'Either include it or remove the dependency array. ' +
-          `If 'setCount' needs the current value of 'increment', ` +
-          `you can also switch to useReducer instead of useState and read 'increment' in the reducer.`,
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Counter() {
           const [count, setCount] = useState(0);
 
@@ -4363,36 +5520,44 @@ const tests = {
           return <h1>{count}</h1>;
         }
       `,
-      output: `
-        function Counter() {
-          const [count, setCount] = useState(0);
-
-          function tick() {
-            setCount(count + 1);
-          }
-
-          useEffect(() => {
-            let id = setInterval(() => {
-              tick();
-            }, 1000);
-            return () => clearInterval(id);
-          }, [tick]);
-
-          return <h1>{count}</h1>;
-        }
-      `,
       // TODO: ideally this should suggest useState updater form
       // since this code doesn't actually work. The autofix could
       // at least avoid suggesting 'tick' since it's obviously
       // always different, and thus useless.
       errors: [
-        "React Hook useEffect has a missing dependency: 'tick'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useEffect has a missing dependency: 'tick'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [tick]',
+              output: normalizeIndent`
+                function Counter() {
+                  const [count, setCount] = useState(0);
+
+                  function tick() {
+                    setCount(count + 1);
+                  }
+
+                  useEffect(() => {
+                    let id = setInterval(() => {
+                      tick();
+                    }, 1000);
+                    return () => clearInterval(id);
+                  }, [tick]);
+
+                  return <h1>{count}</h1>;
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // Regression test for a crash
-      code: `
+      code: normalizeIndent`
         function Podcasts() {
           useEffect(() => {
             alert(podcasts);
@@ -4400,24 +5565,32 @@ const tests = {
           let [podcasts, setPodcasts] = useState(null);
         }
       `,
-      // Note: this autofix is shady because
-      // the variable is used before declaration.
-      // TODO: Maybe we can catch those fixes and not autofix.
-      output: `
-        function Podcasts() {
-          useEffect(() => {
-            alert(podcasts);
-          }, [podcasts]);
-          let [podcasts, setPodcasts] = useState(null);
-        }
-      `,
       errors: [
-        `React Hook useEffect has a missing dependency: 'podcasts'. ` +
-          `Either include it or remove the dependency array.`,
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'podcasts'. ` +
+            `Either include it or remove the dependency array.`,
+          // Note: this autofix is shady because
+          // the variable is used before declaration.
+          // TODO: Maybe we can catch those fixes and not autofix.
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [podcasts]',
+              output: normalizeIndent`
+                function Podcasts() {
+                  useEffect(() => {
+                    alert(podcasts);
+                  }, [podcasts]);
+                  let [podcasts, setPodcasts] = useState(null);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Podcasts({ fetchPodcasts, id }) {
           let [podcasts, setPodcasts] = useState(null);
           useEffect(() => {
@@ -4425,23 +5598,31 @@ const tests = {
           }, [id]);
         }
       `,
-      output: `
-        function Podcasts({ fetchPodcasts, id }) {
-          let [podcasts, setPodcasts] = useState(null);
-          useEffect(() => {
-            fetchPodcasts(id).then(setPodcasts);
-          }, [fetchPodcasts, id]);
-        }
-      `,
       errors: [
-        `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
-          `Either include it or remove the dependency array. ` +
-          `If 'fetchPodcasts' changes too often, ` +
-          `find the parent component that defines it and wrap that definition in useCallback.`,
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
+            `Either include it or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',
+              output: normalizeIndent`
+                function Podcasts({ fetchPodcasts, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    fetchPodcasts(id).then(setPodcasts);
+                  }, [fetchPodcasts, id]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Podcasts({ api: { fetchPodcasts }, id }) {
           let [podcasts, setPodcasts] = useState(null);
           useEffect(() => {
@@ -4449,23 +5630,31 @@ const tests = {
           }, [id]);
         }
       `,
-      output: `
-        function Podcasts({ api: { fetchPodcasts }, id }) {
-          let [podcasts, setPodcasts] = useState(null);
-          useEffect(() => {
-            fetchPodcasts(id).then(setPodcasts);
-          }, [fetchPodcasts, id]);
-        }
-      `,
       errors: [
-        `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
-          `Either include it or remove the dependency array. ` +
-          `If 'fetchPodcasts' changes too often, ` +
-          `find the parent component that defines it and wrap that definition in useCallback.`,
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
+            `Either include it or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',
+              output: normalizeIndent`
+                function Podcasts({ api: { fetchPodcasts }, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    fetchPodcasts(id).then(setPodcasts);
+                  }, [fetchPodcasts, id]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Podcasts({ fetchPodcasts, fetchPodcasts2, id }) {
           let [podcasts, setPodcasts] = useState(null);
           useEffect(() => {
@@ -4477,27 +5666,36 @@ const tests = {
           }, [id]);
         }
       `,
-      output: `
-        function Podcasts({ fetchPodcasts, fetchPodcasts2, id }) {
-          let [podcasts, setPodcasts] = useState(null);
-          useEffect(() => {
-            setTimeout(() => {
-              console.log(id);
-              fetchPodcasts(id).then(setPodcasts);
-              fetchPodcasts2(id).then(setPodcasts);
-            });
-          }, [fetchPodcasts, fetchPodcasts2, id]);
-        }
-      `,
       errors: [
-        `React Hook useEffect has missing dependencies: 'fetchPodcasts' and 'fetchPodcasts2'. ` +
-          `Either include them or remove the dependency array. ` +
-          `If 'fetchPodcasts' changes too often, ` +
-          `find the parent component that defines it and wrap that definition in useCallback.`,
+        {
+          message:
+            `React Hook useEffect has missing dependencies: 'fetchPodcasts' and 'fetchPodcasts2'. ` +
+            `Either include them or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc:
+                'Update the dependencies array to be: [fetchPodcasts, fetchPodcasts2, id]',
+              output: normalizeIndent`
+                function Podcasts({ fetchPodcasts, fetchPodcasts2, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    setTimeout(() => {
+                      console.log(id);
+                      fetchPodcasts(id).then(setPodcasts);
+                      fetchPodcasts2(id).then(setPodcasts);
+                    });
+                  }, [fetchPodcasts, fetchPodcasts2, id]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Podcasts({ fetchPodcasts, id }) {
           let [podcasts, setPodcasts] = useState(null);
           useEffect(() => {
@@ -4506,26 +5704,34 @@ const tests = {
           }, [id]);
         }
       `,
-      output: `
-        function Podcasts({ fetchPodcasts, id }) {
-          let [podcasts, setPodcasts] = useState(null);
-          useEffect(() => {
-            console.log(fetchPodcasts);
-            fetchPodcasts(id).then(setPodcasts);
-          }, [fetchPodcasts, id]);
-        }
-      `,
       errors: [
-        `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
-          `Either include it or remove the dependency array. ` +
-          `If 'fetchPodcasts' changes too often, ` +
-          `find the parent component that defines it and wrap that definition in useCallback.`,
+        {
+          message:
+            `React Hook useEffect has a missing dependency: 'fetchPodcasts'. ` +
+            `Either include it or remove the dependency array. ` +
+            `If 'fetchPodcasts' changes too often, ` +
+            `find the parent component that defines it and wrap that definition in useCallback.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [fetchPodcasts, id]',
+              output: normalizeIndent`
+                function Podcasts({ fetchPodcasts, id }) {
+                  let [podcasts, setPodcasts] = useState(null);
+                  useEffect(() => {
+                    console.log(fetchPodcasts);
+                    fetchPodcasts(id).then(setPodcasts);
+                  }, [fetchPodcasts, id]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
       // The mistake here is that it was moved inside the effect
       // so it can't be referenced in the deps array.
-      code: `
+      code: normalizeIndent`
         function Thing() {
           useEffect(() => {
             const fetchData = async () => {};
@@ -4533,21 +5739,29 @@ const tests = {
           }, [fetchData]);
         }
       `,
-      output: `
-        function Thing() {
-          useEffect(() => {
-            const fetchData = async () => {};
-            fetchData();
-          }, []);
-        }
-      `,
       errors: [
-        `React Hook useEffect has an unnecessary dependency: 'fetchData'. ` +
-          `Either exclude it or remove the dependency array.`,
+        {
+          message:
+            `React Hook useEffect has an unnecessary dependency: 'fetchData'. ` +
+            `Either exclude it or remove the dependency array.`,
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function Thing() {
+                  useEffect(() => {
+                    const fetchData = async () => {};
+                    fetchData();
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Hello() {
           const [state, setState] = useState(0);
           useEffect(() => {
@@ -4555,22 +5769,30 @@ const tests = {
           });
         }
       `,
-      output: `
-        function Hello() {
-          const [state, setState] = useState(0);
-          useEffect(() => {
-            setState({});
-          }, []);
-        }
-      `,
       errors: [
-        `React Hook useEffect contains a call to 'setState'. ` +
-          `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
-          `To fix this, pass [] as a second argument to the useEffect Hook.`,
+        {
+          message:
+            `React Hook useEffect contains a call to 'setState'. ` +
+            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+            `To fix this, pass [] as a second argument to the useEffect Hook.`,
+          suggestions: [
+            {
+              desc: 'Add dependencies array: []',
+              output: normalizeIndent`
+                function Hello() {
+                  const [state, setState] = useState(0);
+                  useEffect(() => {
+                    setState({});
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Hello() {
           const [data, setData] = useState(0);
           useEffect(() => {
@@ -4578,22 +5800,30 @@ const tests = {
           });
         }
       `,
-      output: `
-        function Hello() {
-          const [data, setData] = useState(0);
-          useEffect(() => {
-            fetchData.then(setData);
-          }, []);
-        }
-      `,
       errors: [
-        `React Hook useEffect contains a call to 'setData'. ` +
-          `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
-          `To fix this, pass [] as a second argument to the useEffect Hook.`,
+        {
+          message:
+            `React Hook useEffect contains a call to 'setData'. ` +
+            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+            `To fix this, pass [] as a second argument to the useEffect Hook.`,
+          suggestions: [
+            {
+              desc: 'Add dependencies array: []',
+              output: normalizeIndent`
+                function Hello() {
+                  const [data, setData] = useState(0);
+                  useEffect(() => {
+                    fetchData.then(setData);
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Hello({ country }) {
           const [data, setData] = useState(0);
           useEffect(() => {
@@ -4601,22 +5831,30 @@ const tests = {
           });
         }
       `,
-      output: `
-        function Hello({ country }) {
-          const [data, setData] = useState(0);
-          useEffect(() => {
-            fetchData(country).then(setData);
-          }, [country]);
-        }
-      `,
       errors: [
-        `React Hook useEffect contains a call to 'setData'. ` +
-          `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
-          `To fix this, pass [country] as a second argument to the useEffect Hook.`,
+        {
+          message:
+            `React Hook useEffect contains a call to 'setData'. ` +
+            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+            `To fix this, pass [country] as a second argument to the useEffect Hook.`,
+          suggestions: [
+            {
+              desc: 'Add dependencies array: [country]',
+              output: normalizeIndent`
+                function Hello({ country }) {
+                  const [data, setData] = useState(0);
+                  useEffect(() => {
+                    fetchData(country).then(setData);
+                  }, [country]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Hello({ prop1, prop2 }) {
           const [state, setState] = useState(0);
           useEffect(() => {
@@ -4626,94 +5864,108 @@ const tests = {
           });
         }
       `,
-      output: `
-        function Hello({ prop1, prop2 }) {
-          const [state, setState] = useState(0);
-          useEffect(() => {
-            if (prop1) {
-              setState(prop2);
-            }
-          }, [prop1, prop2]);
-        }
-      `,
       errors: [
-        `React Hook useEffect contains a call to 'setState'. ` +
-          `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
-          `To fix this, pass [prop1, prop2] as a second argument to the useEffect Hook.`,
+        {
+          message:
+            `React Hook useEffect contains a call to 'setState'. ` +
+            `Without a list of dependencies, this can lead to an infinite chain of updates. ` +
+            `To fix this, pass [prop1, prop2] as a second argument to the useEffect Hook.`,
+          suggestions: [
+            {
+              desc: 'Add dependencies array: [prop1, prop2]',
+              output: normalizeIndent`
+                function Hello({ prop1, prop2 }) {
+                  const [state, setState] = useState(0);
+                  useEffect(() => {
+                    if (prop1) {
+                      setState(prop2);
+                    }
+                  }, [prop1, prop2]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
-        function Thing() {
-          useEffect(async () => {}, []);
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function Thing() {
           useEffect(async () => {}, []);
         }
       `,
       errors: [
-        `Effect callbacks are synchronous to prevent race conditions. ` +
-          `Put the async function inside:\n\n` +
-          'useEffect(() => {\n' +
-          '  async function fetchData() {\n' +
-          '    // You can await here\n' +
-          '    const response = await MyAPI.getData(someId);\n' +
-          '    // ...\n' +
-          '  }\n' +
-          '  fetchData();\n' +
-          `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
-          'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching',
+        {
+          message:
+            `Effect callbacks are synchronous to prevent race conditions. ` +
+            `Put the async function inside:\n\n` +
+            'useEffect(() => {\n' +
+            '  async function fetchData() {\n' +
+            '    // You can await here\n' +
+            '    const response = await MyAPI.getData(someId);\n' +
+            '    // ...\n' +
+            '  }\n' +
+            '  fetchData();\n' +
+            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+            'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
-        function Thing() {
-          useEffect(async () => {});
-        }
-      `,
-      output: `
+      code: normalizeIndent`
         function Thing() {
           useEffect(async () => {});
         }
       `,
       errors: [
-        `Effect callbacks are synchronous to prevent race conditions. ` +
-          `Put the async function inside:\n\n` +
-          'useEffect(() => {\n' +
-          '  async function fetchData() {\n' +
-          '    // You can await here\n' +
-          '    const response = await MyAPI.getData(someId);\n' +
-          '    // ...\n' +
-          '  }\n' +
-          '  fetchData();\n' +
-          `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
-          'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching',
+        {
+          message:
+            `Effect callbacks are synchronous to prevent race conditions. ` +
+            `Put the async function inside:\n\n` +
+            'useEffect(() => {\n' +
+            '  async function fetchData() {\n' +
+            '    // You can await here\n' +
+            '    const response = await MyAPI.getData(someId);\n' +
+            '    // ...\n' +
+            '  }\n' +
+            '  fetchData();\n' +
+            `}, [someId]); // Or [] if effect doesn't need props or state\n\n` +
+            'Learn more about data fetching with Hooks: https://fb.me/react-hooks-data-fetching',
+          suggestions: undefined,
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Example() {
           const foo = useCallback(() => {
             foo();
           }, [foo]);
         }
       `,
-      output: `
-        function Example() {
-          const foo = useCallback(() => {
-            foo();
-          }, []);
-        }
-      `,
       errors: [
-        "React Hook useCallback has an unnecessary dependency: 'foo'. " +
-          'Either exclude it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has an unnecessary dependency: 'foo'. " +
+            'Either exclude it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: []',
+              output: normalizeIndent`
+                function Example() {
+                  const foo = useCallback(() => {
+                    foo();
+                  }, []);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
     {
-      code: `
+      code: normalizeIndent`
         function Example({ prop }) {
           const foo = useCallback(() => {
             prop.hello(foo);
@@ -4723,19 +5975,27 @@ const tests = {
           }, [foo]);
         }
       `,
-      output: `
-        function Example({ prop }) {
-          const foo = useCallback(() => {
-            prop.hello(foo);
-          }, [prop]);
-          const bar = useCallback(() => {
-            foo();
-          }, [foo]);
-        }
-      `,
       errors: [
-        "React Hook useCallback has a missing dependency: 'prop'. " +
-          'Either include it or remove the dependency array.',
+        {
+          message:
+            "React Hook useCallback has a missing dependency: 'prop'. " +
+            'Either include it or remove the dependency array.',
+          suggestions: [
+            {
+              desc: 'Update the dependencies array to be: [prop]',
+              output: normalizeIndent`
+                function Example({ prop }) {
+                  const foo = useCallback(() => {
+                    prop.hello(foo);
+                  }, [prop]);
+                  const bar = useCallback(() => {
+                    foo();
+                  }, [foo]);
+                }
+              `,
+            },
+          ],
+        },
       ],
     },
   ],
diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 9ec5e562641eb..42881f0f5b78e 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -11,7 +11,6 @@
 
 export default {
   meta: {
-    fixable: 'code',
     schema: [
       {
         type: 'object',
@@ -94,7 +93,7 @@ export default {
           reactiveHookName === 'useMemo' ||
           reactiveHookName === 'useCallback'
         ) {
-          // TODO: Can this have an autofix?
+          // TODO: Can this have a suggestion?
           context.report({
             node: node.parent.callee,
             message:
@@ -558,12 +557,19 @@ export default {
               `To fix this, pass [` +
               suggestedDependencies.join(', ') +
               `] as a second argument to the ${reactiveHookName} Hook.`,
-            fix(fixer) {
-              return fixer.insertTextAfter(
-                node,
-                `, [${suggestedDependencies.join(', ')}]`,
-              );
-            },
+            suggest: [
+              {
+                desc: `Add dependencies array: [${suggestedDependencies.join(
+                  ', ',
+                )}]`,
+                fix(fixer) {
+                  return fixer.insertTextAfter(
+                    node,
+                    `, [${suggestedDependencies.join(', ')}]`,
+                  );
+                },
+              },
+            ],
           });
         }
         return;
@@ -702,27 +708,37 @@ export default {
               ` Move it inside the ${reactiveHookName} callback. ` +
               `Alternatively, wrap the '${fn.name.name}' definition into its own useCallback() Hook.`;
           }
+
+          let suggest;
+          // Only handle the simple case: arrow functions.
+          // Wrapping function declarations can mess up hoisting.
+          if (suggestUseCallback && fn.type === 'Variable') {
+            suggest = [
+              {
+                desc: `Wrap the '${
+                  fn.name.name
+                }' definition into its own useCallback() Hook.`,
+                fix(fixer) {
+                  return [
+                    // TODO: also add an import?
+                    fixer.insertTextBefore(fn.node.init, 'useCallback('),
+                    // TODO: ideally we'd gather deps here but it would require
+                    // restructuring the rule code. This will cause a new lint
+                    // error to appear immediately for useCallback. Note we're
+                    // not adding [] because would that changes semantics.
+                    fixer.insertTextAfter(fn.node.init, ')'),
+                  ];
+                },
+              },
+            ];
+          }
           // TODO: What if the function needs to change on every render anyway?
           // Should we suggest removing effect deps as an appropriate fix too?
           context.report({
             // TODO: Why not report this at the dependency site?
             node: fn.node,
             message,
-            fix(fixer) {
-              // Only handle the simple case: arrow functions.
-              // Wrapping function declarations can mess up hoisting.
-              if (suggestUseCallback && fn.type === 'Variable') {
-                return [
-                  // TODO: also add an import?
-                  fixer.insertTextBefore(fn.node.init, 'useCallback('),
-                  // TODO: ideally we'd gather deps here but it would require
-                  // restructuring the rule code. This will cause a new lint
-                  // error to appear immediately for useCallback. Note we're
-                  // not adding [] because would that changes semantics.
-                  fixer.insertTextAfter(fn.node.init, ')'),
-                ];
-              }
-            },
+            suggest,
           });
         });
         return;
@@ -1008,13 +1024,20 @@ export default {
               'omit',
             )) +
           extraWarning,
-        fix(fixer) {
-          // TODO: consider preserving the comments or formatting?
-          return fixer.replaceText(
-            declaredDependenciesNode,
-            `[${suggestedDependencies.join(', ')}]`,
-          );
-        },
+        suggest: [
+          {
+            desc: `Update the dependencies array to be: [${suggestedDependencies.join(
+              ', ',
+            )}]`,
+            fix(fixer) {
+              // TODO: consider preserving the comments or formatting?
+              return fixer.replaceText(
+                declaredDependenciesNode,
+                `[${suggestedDependencies.join(', ')}]`,
+              );
+            },
+          },
+        ],
       });
     }
   },

From 56a8c353219ac93ab358eb28009de881ae48251e Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 17 Feb 2020 20:26:56 +0000
Subject: [PATCH 02/24] eslint-plugin-react-hooks@2.4.0

---
 packages/eslint-plugin-react-hooks/package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/eslint-plugin-react-hooks/package.json b/packages/eslint-plugin-react-hooks/package.json
index 6f523bcd5b6fc..8b87f13c487d1 100644
--- a/packages/eslint-plugin-react-hooks/package.json
+++ b/packages/eslint-plugin-react-hooks/package.json
@@ -1,7 +1,7 @@
 {
   "name": "eslint-plugin-react-hooks",
   "description": "ESLint rules for React Hooks",
-  "version": "2.3.0",
+  "version": "2.4.0",
   "repository": {
     "type": "git",
     "url": "https://github.com/facebook/react.git",

From d533229fba8f7e7e576436bf52bbcae56c862906 Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Mon, 17 Feb 2020 20:36:16 +0000
Subject: [PATCH 03/24] Fix Prettier

---
 packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js | 4 +---
 1 file changed, 1 insertion(+), 3 deletions(-)

diff --git a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
index 42881f0f5b78e..b30694014e25e 100644
--- a/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
+++ b/packages/eslint-plugin-react-hooks/src/ExhaustiveDeps.js
@@ -715,9 +715,7 @@ export default {
           if (suggestUseCallback && fn.type === 'Variable') {
             suggest = [
               {
-                desc: `Wrap the '${
-                  fn.name.name
-                }' definition into its own useCallback() Hook.`,
+                desc: `Wrap the '${fn.name.name}' definition into its own useCallback() Hook.`,
                 fix(fixer) {
                   return [
                     // TODO: also add an import?

From f48a5e64e8fd903293f5b854beb795dcc6bae86d Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 18 Feb 2020 13:31:59 +0000
Subject: [PATCH 04/24] Further cleanup of plugin event system (#18056)

---
 .../ReactBrowserEventEmitter-test.internal.js |  24 ++-
 .../react-dom/src/client/ReactDOMComponent.js |  10 +-
 packages/react-dom/src/client/ReactDOMFB.js   |   2 +-
 .../src/client/ReactDOMHostConfig.js          |   2 +-
 .../src/events/DOMEventListenerMap.js         |  31 +++
 .../src/events/DOMEventPluginSystem.js        | 166 ++++++++++++++
 .../src/events/ReactBrowserEventEmitter.js    | 203 ------------------
 .../src/events/ReactDOMEventReplaying.js      |   8 +-
 .../react-dom/src/events/SelectEventPlugin.js |   2 +-
 9 files changed, 221 insertions(+), 227 deletions(-)
 create mode 100644 packages/react-dom/src/events/DOMEventListenerMap.js
 delete mode 100644 packages/react-dom/src/events/ReactBrowserEventEmitter.js

diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
index 114565d342f9a..0b377d16eceaf 100644
--- a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
@@ -14,7 +14,8 @@ let EventPluginRegistry;
 let React;
 let ReactDOM;
 let ReactDOMComponentTree;
-let ReactBrowserEventEmitter;
+let DOMEventPluginSystem;
+let ReactDOMEventListener;
 let ReactTestUtils;
 
 let idCallOrder;
@@ -52,18 +53,21 @@ function registerSimpleTestHandler() {
   return getListener(CHILD, ON_CLICK_KEY);
 }
 
+// We should probably remove this file at some point, it's just full of
+// internal API usage. ReactBrowserEventEmitter was refactored out in
+// #18056 too. The majority of this code lives in DOMEventPluginSystem.
 describe('ReactBrowserEventEmitter', () => {
   beforeEach(() => {
     jest.resetModules();
     LISTENER.mockClear();
 
-    // TODO: can we express this test with only public API?
     EventPluginGetListener = require('legacy-events/getListener').default;
     EventPluginRegistry = require('legacy-events/EventPluginRegistry');
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMComponentTree = require('../client/ReactDOMComponentTree');
-    ReactBrowserEventEmitter = require('../events/ReactBrowserEventEmitter');
+    DOMEventPluginSystem = require('../events/DOMEventPluginSystem');
+    ReactDOMEventListener = require('../events/ReactDOMEventListener');
     ReactTestUtils = require('react-dom/test-utils');
 
     container = document.createElement('div');
@@ -177,12 +181,12 @@ describe('ReactBrowserEventEmitter', () => {
     expect(LISTENER).toHaveBeenCalledTimes(1);
   });
 
-  it('should not invoke handlers if ReactBrowserEventEmitter is disabled', () => {
+  it('should not invoke handlers if ReactDOMEventListener is disabled', () => {
     registerSimpleTestHandler();
-    ReactBrowserEventEmitter.setEnabled(false);
+    ReactDOMEventListener.setEnabled(false);
     CHILD.click();
     expect(LISTENER).toHaveBeenCalledTimes(0);
-    ReactBrowserEventEmitter.setEnabled(true);
+    ReactDOMEventListener.setEnabled(true);
     CHILD.click();
     expect(LISTENER).toHaveBeenCalledTimes(1);
   });
@@ -346,15 +350,15 @@ describe('ReactBrowserEventEmitter', () => {
 
   it('should listen to events only once', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
+    DOMEventPluginSystem.listenToEvent(ON_CLICK_KEY, document);
+    DOMEventPluginSystem.listenToEvent(ON_CLICK_KEY, document);
     expect(EventTarget.prototype.addEventListener).toHaveBeenCalledTimes(1);
   });
 
   it('should work with event plugins without dependencies', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
 
-    ReactBrowserEventEmitter.listenTo(ON_CLICK_KEY, document);
+    DOMEventPluginSystem.listenToEvent(ON_CLICK_KEY, document);
 
     expect(EventTarget.prototype.addEventListener.calls.argsFor(0)[0]).toBe(
       'click',
@@ -364,7 +368,7 @@ describe('ReactBrowserEventEmitter', () => {
   it('should work with event plugins with dependencies', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
 
-    ReactBrowserEventEmitter.listenTo(ON_CHANGE_KEY, document);
+    DOMEventPluginSystem.listenToEvent(ON_CHANGE_KEY, document);
 
     const setEventListeners = [];
     const listenCalls = EventTarget.prototype.addEventListener.calls.allArgs();
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index e5111ae603562..aa01964f9bf42 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -57,14 +57,11 @@ import {
   TOP_SUBMIT,
   TOP_TOGGLE,
 } from '../events/DOMTopLevelEventTypes';
-import {
-  listenTo,
-  trapBubbledEvent,
-  getListenerMapForElement,
-} from '../events/ReactBrowserEventEmitter';
+import {getListenerMapForElement} from '../events/DOMEventListenerMap';
 import {
   addResponderEventSystemEvent,
   removeActiveResponderEventSystemEvent,
+  trapBubbledEvent,
 } from '../events/ReactDOMEventListener.js';
 import {mediaEventTypes} from '../events/DOMTopLevelEventTypes';
 import {
@@ -90,6 +87,7 @@ import {
   enableDeprecatedFlareAPI,
   enableTrustedTypesIntegration,
 } from 'shared/ReactFeatureFlags';
+import {listenToEvent} from '../events/DOMEventPluginSystem';
 
 let didWarnInvalidHydration = false;
 let didWarnShadyDOM = false;
@@ -274,7 +272,7 @@ function ensureListeningTo(
   const doc = isDocumentOrFragment
     ? rootContainerElement
     : rootContainerElement.ownerDocument;
-  listenTo(registrationName, doc);
+  listenToEvent(registrationName, doc);
 }
 
 function getOwnerDocumentFromRootContainer(
diff --git a/packages/react-dom/src/client/ReactDOMFB.js b/packages/react-dom/src/client/ReactDOMFB.js
index 5acb45d81e9bb..02403919e77dd 100644
--- a/packages/react-dom/src/client/ReactDOMFB.js
+++ b/packages/react-dom/src/client/ReactDOMFB.js
@@ -10,7 +10,7 @@
 import {addUserTimingListener} from 'shared/ReactFeatureFlags';
 
 import ReactDOM from './ReactDOM';
-import {isEnabled} from '../events/ReactBrowserEventEmitter';
+import {isEnabled} from '../events/ReactDOMEventListener';
 import {getClosestInstanceFromNode} from './ReactDOMComponentTree';
 
 if (__EXPERIMENTAL__) {
diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 2e90978b31c03..0cf8db9da956a 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -34,7 +34,7 @@ import {validateDOMNesting, updatedAncestorInfo} from './validateDOMNesting';
 import {
   isEnabled as ReactBrowserEventEmitterIsEnabled,
   setEnabled as ReactBrowserEventEmitterSetEnabled,
-} from '../events/ReactBrowserEventEmitter';
+} from '../events/ReactDOMEventListener';
 import {getChildNamespace} from '../shared/DOMNamespaces';
 import {
   ELEMENT_NODE,
diff --git a/packages/react-dom/src/events/DOMEventListenerMap.js b/packages/react-dom/src/events/DOMEventListenerMap.js
new file mode 100644
index 0000000000000..b951eed1b61a1
--- /dev/null
+++ b/packages/react-dom/src/events/DOMEventListenerMap.js
@@ -0,0 +1,31 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
+
+const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
+// prettier-ignore
+const elementListenerMap:
+  // $FlowFixMe Work around Flow bug
+  | WeakMap
+  | Map<
+      Document | Element | Node,
+      Map<DOMTopLevelEventType | string, null | (any => void)>,
+    > = new PossiblyWeakMap();
+
+export function getListenerMapForElement(
+  element: Document | Element | Node,
+): Map<DOMTopLevelEventType | string, null | (any => void)> {
+  let listenerMap = elementListenerMap.get(element);
+  if (listenerMap === undefined) {
+    listenerMap = new Map();
+    elementListenerMap.set(element, listenerMap);
+  }
+  return listenerMap;
+}
diff --git a/packages/react-dom/src/events/DOMEventPluginSystem.js b/packages/react-dom/src/events/DOMEventPluginSystem.js
index 40190f30e3cfe..ad8b38f794ff6 100644
--- a/packages/react-dom/src/events/DOMEventPluginSystem.js
+++ b/packages/react-dom/src/events/DOMEventPluginSystem.js
@@ -21,9 +21,81 @@ import {batchedEventUpdates} from 'legacy-events/ReactGenericBatching';
 import {runEventsInBatch} from 'legacy-events/EventBatching';
 import {plugins} from 'legacy-events/EventPluginRegistry';
 import accumulateInto from 'legacy-events/accumulateInto';
+import {registrationNameDependencies} from 'legacy-events/EventPluginRegistry';
 
 import getEventTarget from './getEventTarget';
 import {getClosestInstanceFromNode} from '../client/ReactDOMComponentTree';
+import {trapCapturedEvent, trapBubbledEvent} from './ReactDOMEventListener';
+import {getListenerMapForElement} from './DOMEventListenerMap';
+import isEventSupported from './isEventSupported';
+import {
+  TOP_BLUR,
+  TOP_CANCEL,
+  TOP_CLOSE,
+  TOP_FOCUS,
+  TOP_INVALID,
+  TOP_RESET,
+  TOP_SCROLL,
+  TOP_SUBMIT,
+  getRawEventName,
+  mediaEventTypes,
+} from './DOMTopLevelEventTypes';
+
+/**
+ * Summary of `DOMEventPluginSystem` event handling:
+ *
+ *  - Top-level delegation is used to trap most native browser events. This
+ *    may only occur in the main thread and is the responsibility of
+ *    ReactDOMEventListener, which is injected and can therefore support
+ *    pluggable event sources. This is the only work that occurs in the main
+ *    thread.
+ *
+ *  - We normalize and de-duplicate events to account for browser quirks. This
+ *    may be done in the worker thread.
+ *
+ *  - Forward these native events (with the associated top-level type used to
+ *    trap it) to `EventPluginRegistry`, which in turn will ask plugins if they want
+ *    to extract any synthetic events.
+ *
+ *  - The `EventPluginRegistry` will then process each event by annotating them with
+ *    "dispatches", a sequence of listeners and IDs that care about that event.
+ *
+ *  - The `EventPluginRegistry` then dispatches the events.
+ *
+ * Overview of React and the event system:
+ *
+ * +------------+    .
+ * |    DOM     |    .
+ * +------------+    .
+ *       |           .
+ *       v           .
+ * +------------+    .
+ * | ReactEvent |    .
+ * |  Listener  |    .
+ * +------------+    .                         +-----------+
+ *       |           .               +--------+|SimpleEvent|
+ *       |           .               |         |Plugin     |
+ * +-----|------+    .               v         +-----------+
+ * |     |      |    .    +--------------+                    +------------+
+ * |     +-----------.--->|PluginRegistry|                    |    Event   |
+ * |            |    .    |              |     +-----------+  | Propagators|
+ * | ReactEvent |    .    |              |     |TapEvent   |  |------------|
+ * |  Emitter   |    .    |              |<---+|Plugin     |  |other plugin|
+ * |            |    .    |              |     +-----------+  |  utilities |
+ * |     +-----------.--->|              |                    +------------+
+ * |     |      |    .    +--------------+
+ * +-----|------+    .                ^        +-----------+
+ *       |           .                |        |Enter/Leave|
+ *       +           .                +-------+|Plugin     |
+ * +-------------+   .                         +-----------+
+ * | application |   .
+ * |-------------|   .
+ * |             |   .
+ * |             |   .
+ * +-------------+   .
+ *                   .
+ *    React Core     .  General Purpose Event Plugin System
+ */
 
 const CALLBACK_BOOKKEEPING_POOL_SIZE = 10;
 const callbackBookkeepingPool = [];
@@ -213,3 +285,97 @@ export function dispatchEventForPluginEventSystem(
     releaseTopLevelCallbackBookKeeping(bookKeeping);
   }
 }
+
+/**
+ * We listen for bubbled touch events on the document object.
+ *
+ * Firefox v8.01 (and possibly others) exhibited strange behavior when
+ * mounting `onmousemove` events at some node that was not the document
+ * element. The symptoms were that if your mouse is not moving over something
+ * contained within that mount point (for example on the background) the
+ * top-level listeners for `onmousemove` won't be called. However, if you
+ * register the `mousemove` on the document object, then it will of course
+ * catch all `mousemove`s. This along with iOS quirks, justifies restricting
+ * top-level listeners to the document object only, at least for these
+ * movement types of events and possibly all events.
+ *
+ * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
+ *
+ * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but
+ * they bubble to document.
+ *
+ * @param {string} registrationName Name of listener (e.g. `onClick`).
+ * @param {object} mountAt Container where to mount the listener
+ */
+export function listenToEvent(
+  registrationName: string,
+  mountAt: Document | Element | Node,
+): void {
+  const listeningSet = getListenerMapForElement(mountAt);
+  const dependencies = registrationNameDependencies[registrationName];
+
+  for (let i = 0; i < dependencies.length; i++) {
+    const dependency = dependencies[i];
+    listenToTopLevelEvent(dependency, mountAt, listeningSet);
+  }
+}
+
+export function listenToTopLevelEvent(
+  topLevelType: DOMTopLevelEventType,
+  mountAt: Document | Element | Node,
+  listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
+): void {
+  if (!listenerMap.has(topLevelType)) {
+    switch (topLevelType) {
+      case TOP_SCROLL:
+        trapCapturedEvent(TOP_SCROLL, mountAt);
+        break;
+      case TOP_FOCUS:
+      case TOP_BLUR:
+        trapCapturedEvent(TOP_FOCUS, mountAt);
+        trapCapturedEvent(TOP_BLUR, mountAt);
+        // We set the flag for a single dependency later in this function,
+        // but this ensures we mark both as attached rather than just one.
+        listenerMap.set(TOP_BLUR, null);
+        listenerMap.set(TOP_FOCUS, null);
+        break;
+      case TOP_CANCEL:
+      case TOP_CLOSE:
+        if (isEventSupported(getRawEventName(topLevelType))) {
+          trapCapturedEvent(topLevelType, mountAt);
+        }
+        break;
+      case TOP_INVALID:
+      case TOP_SUBMIT:
+      case TOP_RESET:
+        // We listen to them on the target DOM elements.
+        // Some of them bubble so we don't want them to fire twice.
+        break;
+      default:
+        // By default, listen on the top level to all non-media events.
+        // Media events don't bubble so adding the listener wouldn't do anything.
+        const isMediaEvent = mediaEventTypes.indexOf(topLevelType) !== -1;
+        if (!isMediaEvent) {
+          trapBubbledEvent(topLevelType, mountAt);
+        }
+        break;
+    }
+    listenerMap.set(topLevelType, null);
+  }
+}
+
+export function isListeningToAllDependencies(
+  registrationName: string,
+  mountAt: Document | Element,
+): boolean {
+  const listenerMap = getListenerMapForElement(mountAt);
+  const dependencies = registrationNameDependencies[registrationName];
+
+  for (let i = 0; i < dependencies.length; i++) {
+    const dependency = dependencies[i];
+    if (!listenerMap.has(dependency)) {
+      return false;
+    }
+  }
+  return true;
+}
diff --git a/packages/react-dom/src/events/ReactBrowserEventEmitter.js b/packages/react-dom/src/events/ReactBrowserEventEmitter.js
deleted file mode 100644
index 3cc7aae2f2ccf..0000000000000
--- a/packages/react-dom/src/events/ReactBrowserEventEmitter.js
+++ /dev/null
@@ -1,203 +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.
- *
- * @flow
- */
-
-import {registrationNameDependencies} from 'legacy-events/EventPluginRegistry';
-import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
-import {
-  TOP_BLUR,
-  TOP_CANCEL,
-  TOP_CLOSE,
-  TOP_FOCUS,
-  TOP_INVALID,
-  TOP_RESET,
-  TOP_SCROLL,
-  TOP_SUBMIT,
-  getRawEventName,
-  mediaEventTypes,
-} from './DOMTopLevelEventTypes';
-import {
-  setEnabled,
-  isEnabled,
-  trapBubbledEvent,
-  trapCapturedEvent,
-} from './ReactDOMEventListener';
-import isEventSupported from './isEventSupported';
-
-/**
- * Summary of `ReactBrowserEventEmitter` event handling:
- *
- *  - Top-level delegation is used to trap most native browser events. This
- *    may only occur in the main thread and is the responsibility of
- *    ReactDOMEventListener, which is injected and can therefore support
- *    pluggable event sources. This is the only work that occurs in the main
- *    thread.
- *
- *  - We normalize and de-duplicate events to account for browser quirks. This
- *    may be done in the worker thread.
- *
- *  - Forward these native events (with the associated top-level type used to
- *    trap it) to `EventPluginRegistry`, which in turn will ask plugins if they want
- *    to extract any synthetic events.
- *
- *  - The `EventPluginRegistry` will then process each event by annotating them with
- *    "dispatches", a sequence of listeners and IDs that care about that event.
- *
- *  - The `EventPluginRegistry` then dispatches the events.
- *
- * Overview of React and the event system:
- *
- * +------------+    .
- * |    DOM     |    .
- * +------------+    .
- *       |           .
- *       v           .
- * +------------+    .
- * | ReactEvent |    .
- * |  Listener  |    .
- * +------------+    .                         +-----------+
- *       |           .               +--------+|SimpleEvent|
- *       |           .               |         |Plugin     |
- * +-----|------+    .               v         +-----------+
- * |     |      |    .    +--------------+                    +------------+
- * |     +-----------.--->|PluginRegistry|                    |    Event   |
- * |            |    .    |              |     +-----------+  | Propagators|
- * | ReactEvent |    .    |              |     |TapEvent   |  |------------|
- * |  Emitter   |    .    |              |<---+|Plugin     |  |other plugin|
- * |            |    .    |              |     +-----------+  |  utilities |
- * |     +-----------.--->|              |                    +------------+
- * |     |      |    .    +--------------+
- * +-----|------+    .                ^        +-----------+
- *       |           .                |        |Enter/Leave|
- *       +           .                +-------+|Plugin     |
- * +-------------+   .                         +-----------+
- * | application |   .
- * |-------------|   .
- * |             |   .
- * |             |   .
- * +-------------+   .
- *                   .
- *    React Core     .  General Purpose Event Plugin System
- */
-
-const PossiblyWeakMap = typeof WeakMap === 'function' ? WeakMap : Map;
-// prettier-ignore
-const elementListenerMap:
-  // $FlowFixMe Work around Flow bug
-  | WeakMap
-  | Map<
-      Document | Element | Node,
-      Map<DOMTopLevelEventType | string, null | (any => void)>,
-    > = new PossiblyWeakMap();
-
-export function getListenerMapForElement(
-  element: Document | Element | Node,
-): Map<DOMTopLevelEventType | string, null | (any => void)> {
-  let listenerMap = elementListenerMap.get(element);
-  if (listenerMap === undefined) {
-    listenerMap = new Map();
-    elementListenerMap.set(element, listenerMap);
-  }
-  return listenerMap;
-}
-
-/**
- * We listen for bubbled touch events on the document object.
- *
- * Firefox v8.01 (and possibly others) exhibited strange behavior when
- * mounting `onmousemove` events at some node that was not the document
- * element. The symptoms were that if your mouse is not moving over something
- * contained within that mount point (for example on the background) the
- * top-level listeners for `onmousemove` won't be called. However, if you
- * register the `mousemove` on the document object, then it will of course
- * catch all `mousemove`s. This along with iOS quirks, justifies restricting
- * top-level listeners to the document object only, at least for these
- * movement types of events and possibly all events.
- *
- * @see http://www.quirksmode.org/blog/archives/2010/09/click_event_del.html
- *
- * Also, `keyup`/`keypress`/`keydown` do not bubble to the window on IE, but
- * they bubble to document.
- *
- * @param {string} registrationName Name of listener (e.g. `onClick`).
- * @param {object} mountAt Container where to mount the listener
- */
-export function listenTo(
-  registrationName: string,
-  mountAt: Document | Element | Node,
-): void {
-  const listeningSet = getListenerMapForElement(mountAt);
-  const dependencies = registrationNameDependencies[registrationName];
-
-  for (let i = 0; i < dependencies.length; i++) {
-    const dependency = dependencies[i];
-    listenToTopLevel(dependency, mountAt, listeningSet);
-  }
-}
-
-export function listenToTopLevel(
-  topLevelType: DOMTopLevelEventType,
-  mountAt: Document | Element | Node,
-  listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
-): void {
-  if (!listenerMap.has(topLevelType)) {
-    switch (topLevelType) {
-      case TOP_SCROLL:
-        trapCapturedEvent(TOP_SCROLL, mountAt);
-        break;
-      case TOP_FOCUS:
-      case TOP_BLUR:
-        trapCapturedEvent(TOP_FOCUS, mountAt);
-        trapCapturedEvent(TOP_BLUR, mountAt);
-        // We set the flag for a single dependency later in this function,
-        // but this ensures we mark both as attached rather than just one.
-        listenerMap.set(TOP_BLUR, null);
-        listenerMap.set(TOP_FOCUS, null);
-        break;
-      case TOP_CANCEL:
-      case TOP_CLOSE:
-        if (isEventSupported(getRawEventName(topLevelType))) {
-          trapCapturedEvent(topLevelType, mountAt);
-        }
-        break;
-      case TOP_INVALID:
-      case TOP_SUBMIT:
-      case TOP_RESET:
-        // We listen to them on the target DOM elements.
-        // Some of them bubble so we don't want them to fire twice.
-        break;
-      default:
-        // By default, listen on the top level to all non-media events.
-        // Media events don't bubble so adding the listener wouldn't do anything.
-        const isMediaEvent = mediaEventTypes.indexOf(topLevelType) !== -1;
-        if (!isMediaEvent) {
-          trapBubbledEvent(topLevelType, mountAt);
-        }
-        break;
-    }
-    listenerMap.set(topLevelType, null);
-  }
-}
-
-export function isListeningToAllDependencies(
-  registrationName: string,
-  mountAt: Document | Element,
-): boolean {
-  const listenerMap = getListenerMapForElement(mountAt);
-  const dependencies = registrationNameDependencies[registrationName];
-
-  for (let i = 0; i < dependencies.length; i++) {
-    const dependency = dependencies[i];
-    if (!listenerMap.has(dependency)) {
-      return false;
-    }
-  }
-  return true;
-}
-
-export {setEnabled, isEnabled, trapBubbledEvent, trapCapturedEvent};
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index b0c999caf4781..36a78b5d0fcf7 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -32,10 +32,7 @@ import {
   attemptToDispatchEvent,
   addResponderEventSystemEvent,
 } from './ReactDOMEventListener';
-import {
-  getListenerMapForElement,
-  listenToTopLevel,
-} from './ReactBrowserEventEmitter';
+import {getListenerMapForElement} from './DOMEventListenerMap';
 import {
   getInstanceFromNode,
   getClosestInstanceFromNode,
@@ -120,6 +117,7 @@ import {
   TOP_BLUR,
 } from './DOMTopLevelEventTypes';
 import {IS_REPLAYED} from 'legacy-events/EventSystemFlags';
+import {listenToTopLevelEvent} from './DOMEventPluginSystem';
 
 type QueuedReplayableEvent = {|
   blockedOn: null | Container | SuspenseInstance,
@@ -217,7 +215,7 @@ function trapReplayableEvent(
   document: Document,
   listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
 ) {
-  listenToTopLevel(topLevelType, document, listenerMap);
+  listenToTopLevelEvent(topLevelType, document, listenerMap);
   if (enableDeprecatedFlareAPI) {
     // Trap events for the responder system.
     const topLevelTypeString = unsafeCastDOMTopLevelTypeToString(topLevelType);
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index b358e896eaf37..2c3da14bbe18a 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -22,11 +22,11 @@ import {
   TOP_MOUSE_UP,
   TOP_SELECTION_CHANGE,
 } from './DOMTopLevelEventTypes';
-import {isListeningToAllDependencies} from './ReactBrowserEventEmitter';
 import getActiveElement from '../client/getActiveElement';
 import {getNodeFromInstance} from '../client/ReactDOMComponentTree';
 import {hasSelectionCapabilities} from '../client/ReactInputSelection';
 import {DOCUMENT_NODE} from '../shared/HTMLNodeType';
+import {isListeningToAllDependencies} from './DOMEventPluginSystem';
 
 const skipSelectionChangeEvent =
   canUseDOM && 'documentMode' in document && document.documentMode <= 11;

From d5ddc16a3398c33d70489cee87f5176c85f3c9f5 Mon Sep 17 00:00:00 2001
From: Haseeb Furkhan Mohammed <61028636+hmohamme@users.noreply.github.com>
Date: Tue, 18 Feb 2020 09:40:30 -0800
Subject: [PATCH 05/24] React developer tools extension for Microsoft Edge 
 (#18041)

* Port Chrome extension to Microsoft Edge
---
 .../deploy.edge.html                          |  8 +++
 .../react-devtools-extensions/edge/README.md  | 12 +++++
 .../react-devtools-extensions/edge/build.js   | 46 ++++++++++++++++
 .../react-devtools-extensions/edge/deploy.js  |  9 ++++
 .../edge/manifest.json                        | 52 +++++++++++++++++++
 .../react-devtools-extensions/edge/now.json   |  5 ++
 .../react-devtools-extensions/edge/test.js    | 18 +++++++
 .../react-devtools-extensions/package.json    | 13 +++--
 8 files changed, 159 insertions(+), 4 deletions(-)
 create mode 100644 packages/react-devtools-extensions/deploy.edge.html
 create mode 100644 packages/react-devtools-extensions/edge/README.md
 create mode 100644 packages/react-devtools-extensions/edge/build.js
 create mode 100644 packages/react-devtools-extensions/edge/deploy.js
 create mode 100644 packages/react-devtools-extensions/edge/manifest.json
 create mode 100644 packages/react-devtools-extensions/edge/now.json
 create mode 100644 packages/react-devtools-extensions/edge/test.js

diff --git a/packages/react-devtools-extensions/deploy.edge.html b/packages/react-devtools-extensions/deploy.edge.html
new file mode 100644
index 0000000000000..10f51c570e633
--- /dev/null
+++ b/packages/react-devtools-extensions/deploy.edge.html
@@ -0,0 +1,8 @@
+<ol>
+  <li><a href="ReactDevTools.zip">download extension</a></li>
+  <li>Double-click to extract</li>
+  <li>Navigate to <code>edge://extensions/</code></li>
+  <li>Enable "Developer mode"</li>
+  <li>Click "LOAD UNPACKED"</li>
+  <li>Select extracted extension folder (<code>ReactDevTools</code>)</li>
+</ol>
\ No newline at end of file
diff --git a/packages/react-devtools-extensions/edge/README.md b/packages/react-devtools-extensions/edge/README.md
new file mode 100644
index 0000000000000..af7ff30a20405
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/README.md
@@ -0,0 +1,12 @@
+# The Microsoft Edge extension
+
+The source code for this extension has moved to `shells/webextension`.
+
+Modify the source code there and then rebuild this extension by running `node build` from this directory or `yarn run build:extension:edge` from the root directory.
+
+## Testing in Microsoft Edge
+
+You can test a local build of the web extension like so:
+
+ 1. Build the extension: `node build`
+ 1. Follow the on-screen instructions.
diff --git a/packages/react-devtools-extensions/edge/build.js b/packages/react-devtools-extensions/edge/build.js
new file mode 100644
index 0000000000000..21fa6e5383c22
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/build.js
@@ -0,0 +1,46 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const chalk = require('chalk');
+const {execSync} = require('child_process');
+const {join} = require('path');
+const {argv} = require('yargs');
+const build = require('../build');
+
+const main = async () => {
+  const {crx} = argv;
+
+  await build('edge');
+
+  const cwd = join(__dirname, 'build');
+  if (crx) {
+    const crxPath = join(
+      __dirname,
+      '..',
+      '..',
+      '..',
+      'node_modules',
+      '.bin',
+      'crx'
+    );
+
+    execSync(`${crxPath} pack ./unpacked -o ReactDevTools.crx`, {
+      cwd,
+    });
+  }
+
+  console.log(chalk.green('\nThe Microsoft Edge extension has been built!'));
+
+  console.log(chalk.green('\nTo load this extension:'));
+  console.log(chalk.yellow('Navigate to edge://extensions/'));
+  console.log(chalk.yellow('Enable "Developer mode"'));
+  console.log(chalk.yellow('Click "LOAD UNPACKED"'));
+  console.log(chalk.yellow('Select extension folder - ' + cwd + '\\unpacked'));
+
+  console.log(chalk.green('\nYou can test this build by running:'));
+  console.log(chalk.gray('\n# From the react-devtools root directory:'));
+  console.log('yarn run test:edge\n');
+};
+
+main();
diff --git a/packages/react-devtools-extensions/edge/deploy.js b/packages/react-devtools-extensions/edge/deploy.js
new file mode 100644
index 0000000000000..33d102c688468
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/deploy.js
@@ -0,0 +1,9 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const deploy = require('../deploy');
+
+const main = async () => await deploy('edge');
+
+main();
diff --git a/packages/react-devtools-extensions/edge/manifest.json b/packages/react-devtools-extensions/edge/manifest.json
new file mode 100644
index 0000000000000..46d683f81e3eb
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/manifest.json
@@ -0,0 +1,52 @@
+{
+  "manifest_version": 2,
+  "name": "React Developer Tools",
+  "description": "Adds React debugging tools to the Microsoft Edge Developer Tools.",
+  "version": "4.4.0",
+  "version_name": "4.4.0",
+
+  "minimum_chrome_version": "49",
+
+  "icons": {
+    "16": "icons/16-production.png",
+    "32": "icons/32-production.png",
+    "48": "icons/48-production.png",
+    "128": "icons/128-production.png"
+  },
+
+  "browser_action": {
+    "default_icon": {
+      "16": "icons/16-disabled.png",
+      "32": "icons/32-disabled.png",
+      "48": "icons/48-disabled.png",
+      "128": "icons/128-disabled.png"
+    },
+
+    "default_popup": "popups/disabled.html"
+  },
+
+  "devtools_page": "main.html",
+
+  "content_security_policy": "script-src 'self' 'unsafe-eval'; object-src 'self'",
+  "web_accessible_resources": [
+    "main.html",
+    "panel.html",
+    "build/react_devtools_backend.js",
+    "build/renderer.js"
+  ],
+
+  "background": {
+    "scripts": ["build/background.js"],
+    "persistent": false
+  },
+
+  "permissions": ["file:///*", "http://*/*", "https://*/*"],
+
+  "content_scripts": [
+    {
+      "matches": ["<all_urls>"],
+      "js": ["build/injectGlobalHook.js"],
+      "run_at": "document_start"
+    }
+  ]
+}
diff --git a/packages/react-devtools-extensions/edge/now.json b/packages/react-devtools-extensions/edge/now.json
new file mode 100644
index 0000000000000..6faa13a7efefd
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/now.json
@@ -0,0 +1,5 @@
+{
+  "name": "react-devtools-experimental-edge",
+  "alias": ["react-devtools-experimental-edge"],
+  "files": ["index.html", "ReactDevTools.zip"]
+}
diff --git a/packages/react-devtools-extensions/edge/test.js b/packages/react-devtools-extensions/edge/test.js
new file mode 100644
index 0000000000000..b9c4f6a7833d1
--- /dev/null
+++ b/packages/react-devtools-extensions/edge/test.js
@@ -0,0 +1,18 @@
+#!/usr/bin/env node
+
+'use strict';
+
+const edge = require('windows-edge');
+
+const START_URL = 'https://facebook.github.io/react/';
+
+edge({uri: START_URL}, (err, ps) => {
+  if (err) throw err;
+  ps.on('error', console.error);
+  ps.on('exit', code => {
+    // Browser exited
+  });
+  setTimeout(() => {
+    ps.kill();
+  }, 2000);
+});
diff --git a/packages/react-devtools-extensions/package.json b/packages/react-devtools-extensions/package.json
index ce42fc7799f87..5ccaeef289a61 100644
--- a/packages/react-devtools-extensions/package.json
+++ b/packages/react-devtools-extensions/package.json
@@ -3,15 +3,19 @@
   "version": "0.0.0",
   "private": true,
   "scripts": {
-    "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox",
-    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome && yarn run build:firefox",
+    "build": "cross-env NODE_ENV=production yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
+    "build:dev": "cross-env NODE_ENV=development yarn run build:chrome && yarn run build:firefox && yarn run build:edge",
     "build:chrome": "cross-env NODE_ENV=production node ./chrome/build",
     "build:chrome:crx": "cross-env NODE_ENV=production node ./chrome/build --crx",
     "build:chrome:dev": "cross-env NODE_ENV=development node ./chrome/build",
     "build:firefox": "cross-env NODE_ENV=production node ./firefox/build",
     "build:firefox:dev": "cross-env NODE_ENV=development node ./firefox/build",
+    "build:edge": "cross-env NODE_ENV=production node ./edge/build",
+    "build:edge:crx": "cross-env NODE_ENV=production node ./edge/build --crx",
+    "build:edge:dev": "cross-env NODE_ENV=development node ./edge/build",
     "test:chrome": "node ./chrome/test",
-    "test:firefox": "node ./firefox/test"
+    "test:firefox": "node ./firefox/test",
+    "test:edge": "node ./edge/test"
   },
   "devDependencies": {
     "@babel/core": "^7.1.6",
@@ -37,6 +41,7 @@
     "web-ext": "^3.0.0",
     "webpack": "^4.41.2",
     "webpack-cli": "^3.3.10",
-    "webpack-dev-server": "^3.3.1"
+    "webpack-dev-server": "^3.3.1",
+    "windows-edge": "^1.0.1"
   }
 }

From 90be006da8e231279151e7b1518bb64c62e26851 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Feb 2020 09:40:59 -0800
Subject: [PATCH 06/24] Updated Yarn lockfile

---
 yarn.lock | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++++---
 1 file changed, 86 insertions(+), 5 deletions(-)

diff --git a/yarn.lock b/yarn.lock
index dd15271097244..1456c34cc4e42 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3171,7 +3171,7 @@ buffer-alloc-unsafe@^1.1.0:
   resolved "https://registry.yarnpkg.com/buffer-alloc-unsafe/-/buffer-alloc-unsafe-1.1.0.tgz#bd7dc26ae2972d0eda253be061dba992349c19f0"
   integrity sha512-TEM2iMIEQdJ2yjPJoSIsldnleVaAk1oW3DBVUykyOLsEsFmEc9kn+SFFPz+gl54KQNxlDnAwCXosOS9Okx2xAg==
 
-buffer-alloc@^1.2.0:
+buffer-alloc@^1.1.0, buffer-alloc@^1.2.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/buffer-alloc/-/buffer-alloc-1.2.0.tgz#890dd90d923a873e08e10e5fd51a57e5b7cce0ec"
   integrity sha512-CFsHQgjtW1UChdXgbyJGtnm+O/uLQeZdtbDo8mfUgYXCHSM1wgrVxXm6bSyrUuErEb+4sYVGCzASBRot7zyrow==
@@ -3837,7 +3837,7 @@ concat-map@0.0.1:
   resolved "https://registry.yarnpkg.com/concat-map/-/concat-map-0.0.1.tgz#d8a96bd77fd68df7793a73036a3ba0d5405d477b"
   integrity sha1-2Klr13/Wjfd5OnMDajug1UBdR3s=
 
-concat-stream@1.6.2, concat-stream@^1.4.7, concat-stream@^1.5.0, concat-stream@^1.5.2:
+concat-stream@1.6.2, concat-stream@^1.4.7, concat-stream@^1.4.8, concat-stream@^1.5.0, concat-stream@^1.5.2:
   version "1.6.2"
   resolved "https://registry.yarnpkg.com/concat-stream/-/concat-stream-1.6.2.tgz#904bdf194cd3122fc675c77fc4ac3d4ff0fd1a34"
   integrity sha512-27HBghJxjiZtIk3Ycvn/4kbJk/1uZuJFfuPEns6LaEvpvG1f0hTea8lilrouyo9mVc2GWdcEZ8OLoGmSADlrCw==
@@ -4228,6 +4228,19 @@ cssstyle@^2.0.0:
   dependencies:
     cssom "~0.3.6"
 
+csv-parser@^1.6.0:
+  version "1.12.1"
+  resolved "https://registry.yarnpkg.com/csv-parser/-/csv-parser-1.12.1.tgz#391e1ef961b1f9dcb4c7c0f82eb450a1bd916158"
+  integrity sha512-r45M92nLnGP246ot0Yo5RvbiiMF5Bw/OTIdWJ3OQ4Vbv4hpOeoXVIPxdSmUw+fPJlQOseY+iigJyLSfPMIrddQ==
+  dependencies:
+    buffer-alloc "^1.1.0"
+    buffer-from "^1.0.0"
+    generate-function "^1.0.1"
+    generate-object-property "^1.0.0"
+    inherits "^2.0.1"
+    minimist "^1.2.0"
+    ndjson "^1.4.0"
+
 currently-unhandled@^0.4.1:
   version "0.4.1"
   resolved "https://registry.yarnpkg.com/currently-unhandled/-/currently-unhandled-0.4.1.tgz#988df33feab191ef799a61369dd76c17adf957ea"
@@ -6047,7 +6060,7 @@ fresh@0.5.2:
   resolved "https://registry.yarnpkg.com/fresh/-/fresh-0.5.2.tgz#3d8cadd90d976569fa835ab1f8e4b23a105605a7"
   integrity sha1-PYyt2Q2XZWn6g1qx+OSyOhBWBac=
 
-from2@^2.1.0:
+from2@^2.1.0, from2@^2.1.1:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/from2/-/from2-2.3.0.tgz#8bfb5502bde4a4d36cfdeea007fcca21d7e382af"
   integrity sha1-i/tVAr3kpNNs/e6gB/zKIdfjgq8=
@@ -6170,12 +6183,17 @@ gauge@~2.7.3:
     strip-ansi "^3.0.1"
     wide-align "^1.1.0"
 
+generate-function@^1.0.1:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-1.1.0.tgz#54c21b080192b16d9877779c5bb81666e772365f"
+  integrity sha1-VMIbCAGSsW2Yd3ecW7gWZudyNl8=
+
 generate-function@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/generate-function/-/generate-function-2.0.0.tgz#6858fe7c0969b7d4e9093337647ac79f60dfbe74"
   integrity sha1-aFj+fAlpt9TpCTM3ZHrHn2DfvnQ=
 
-generate-object-property@^1.1.0:
+generate-object-property@^1.0.0, generate-object-property@^1.1.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/generate-object-property/-/generate-object-property-1.2.0.tgz#9c0e1c40308ce804f4783618b937fa88f99d50d0"
   integrity sha1-nA4cQDCM6AT0eDYYuTf6iPmdUNA=
@@ -7136,6 +7154,13 @@ interpret@1.2.0, interpret@^1.0.0:
   resolved "https://registry.yarnpkg.com/interpret/-/interpret-1.2.0.tgz#d5061a6224be58e8083985f5014d844359576296"
   integrity sha512-mT34yGKMNceBQUoVn7iCDKDntA7SC6gycMAWzGx1z/CMCTV7b2AAtXlo3nRyHZ1FelRkQbQjprHSYGwzLtkVbw==
 
+into-stream@^2.0.0:
+  version "2.0.1"
+  resolved "https://registry.yarnpkg.com/into-stream/-/into-stream-2.0.1.tgz#db9b003694453eae091d8a5c84cc11507b781d31"
+  integrity sha1-25sANpRFPq4JHYpchMwRUHt4HTE=
+  dependencies:
+    from2 "^2.1.1"
+
 invariant@^2.2.2, invariant@^2.2.4:
   version "2.2.4"
   resolved "https://registry.yarnpkg.com/invariant/-/invariant-2.2.4.tgz#610f3c92c9359ce1db616e538008d23ff35158e6"
@@ -9249,6 +9274,25 @@ ncp@^2.0.0, ncp@~2.0.0:
   resolved "https://registry.yarnpkg.com/ncp/-/ncp-2.0.0.tgz#195a21d6c46e361d2fb1281ba38b91e9df7bdbb3"
   integrity sha1-GVoh1sRuNh0vsSgbo4uR6d9727M=
 
+ndjson@^1.4.0:
+  version "1.5.0"
+  resolved "https://registry.yarnpkg.com/ndjson/-/ndjson-1.5.0.tgz#ae603b36b134bcec347b452422b0bf98d5832ec8"
+  integrity sha1-rmA7NrE0vOw0e0UkIrC/mNWDLsg=
+  dependencies:
+    json-stringify-safe "^5.0.1"
+    minimist "^1.2.0"
+    split2 "^2.1.0"
+    through2 "^2.0.3"
+
+neat-csv@^1.0.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/neat-csv/-/neat-csv-1.1.0.tgz#357a412f84b55b21160259945def3a70be30301c"
+  integrity sha1-NXpBL4S1WyEWAlmUXe86cL4wMBw=
+  dependencies:
+    concat-stream "^1.4.8"
+    csv-parser "^1.6.0"
+    into-stream "^2.0.0"
+
 needle@^2.2.1, needle@^2.2.4:
   version "2.4.0"
   resolved "https://registry.yarnpkg.com/needle/-/needle-2.4.0.tgz#6833e74975c444642590e15a750288c5f939b57c"
@@ -10232,7 +10276,7 @@ picomatch@^2.0.4, picomatch@^2.0.5:
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.2.1.tgz#21bac888b6ed8601f831ce7816e335bc779f0a4a"
   integrity sha512-ISBaA8xQNmwELC7eOjqFKMESB2VIqt4PPDD0nsS95b/9dZXvVKOlz9keMSnoGGKcOHXfTvDD6WMaRoSc9UuhRA==
 
-pify@^2.0.0:
+pify@^2.0.0, pify@^2.2.0:
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/pify/-/pify-2.3.0.tgz#ed141a6ac043a849ea588498e7dca8b15330e90c"
   integrity sha1-7RQaasBDqEnqWISY59yosVMw6Qw=
@@ -11565,6 +11609,11 @@ schema-utils@^2.0.1:
     ajv "^6.1.0"
     ajv-keywords "^3.1.0"
 
+sec@^1.0.0:
+  version "1.0.0"
+  resolved "https://registry.yarnpkg.com/sec/-/sec-1.0.0.tgz#033d60a3ad20ecf2e00940d14f97823465774335"
+  integrity sha1-Az1go60g7PLgCUDRT5eCNGV3QzU=
+
 secure-keys@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/secure-keys/-/secure-keys-1.0.0.tgz#f0c82d98a3b139a8776a8808050b824431087fca"
@@ -12306,6 +12355,13 @@ split-string@^3.0.1, split-string@^3.0.2:
   dependencies:
     extend-shallow "^3.0.0"
 
+split2@^2.1.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/split2/-/split2-2.2.0.tgz#186b2575bcf83e85b7d18465756238ee4ee42493"
+  integrity sha512-RAb22TG39LhI31MbreBgIuKiIKhVsawfTgEGqKHTK87aG+ul/PB8Sqoi3I7kVdRWiCfrKxK3uo4/YUkpNvhPbw==
+  dependencies:
+    through2 "^2.0.2"
+
 split@~0.3.3:
   version "0.3.3"
   resolved "https://registry.yarnpkg.com/split/-/split-0.3.3.tgz#cd0eea5e63a211dfff7eb0f091c4133e2d0dd28f"
@@ -12768,6 +12824,16 @@ targz@^1.0.1:
   dependencies:
     tar-fs "^1.8.1"
 
+tasklist@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/tasklist/-/tasklist-2.1.0.tgz#53382e962e090adaf4c67d255057a97eec616e54"
+  integrity sha1-Uzguli4JCtr0xn0lUFepfuxhblQ=
+  dependencies:
+    neat-csv "^1.0.0"
+    pify "^2.2.0"
+    pinkie-promise "^2.0.0"
+    sec "^1.0.0"
+
 temp-dir@^1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/temp-dir/-/temp-dir-1.0.0.tgz#0a7c0ea26d3a39afa7e0ebea9c1fc0bc4daa011d"
@@ -12886,6 +12952,14 @@ through2@^2.0.0, through2@^2.0.1, through2@~2.0.0:
     readable-stream "^2.1.5"
     xtend "~4.0.1"
 
+through2@^2.0.2, through2@^2.0.3:
+  version "2.0.5"
+  resolved "https://registry.yarnpkg.com/through2/-/through2-2.0.5.tgz#01c1e39eb31d07cb7d03a96a70823260b23132cd"
+  integrity sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==
+  dependencies:
+    readable-stream "~2.3.6"
+    xtend "~4.0.1"
+
 through2@^3.0.1:
   version "3.0.1"
   resolved "https://registry.yarnpkg.com/through2/-/through2-3.0.1.tgz#39276e713c3302edf9e388dd9c812dd3b825bd5a"
@@ -13839,6 +13913,13 @@ window-size@^0.1.4:
   resolved "https://registry.yarnpkg.com/window-size/-/window-size-0.1.4.tgz#f8e1aa1ee5a53ec5bf151ffa09742a6ad7697876"
   integrity sha1-+OGqHuWlPsW/FR/6CXQqatdpeHY=
 
+windows-edge@^1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/windows-edge/-/windows-edge-1.0.1.tgz#ecb8dbf56b380ec226fbf9874db5b977e7ec03ad"
+  integrity sha1-7Ljb9Ws4DsIm+/mHTbW5d+fsA60=
+  dependencies:
+    tasklist "^2.1.0"
+
 windows-release@^3.1.0:
   version "3.2.0"
   resolved "https://registry.yarnpkg.com/windows-release/-/windows-release-3.2.0.tgz#8122dad5afc303d833422380680a79cdfa91785f"

From 48c4867d745bbf91ae73892545960c0979c2dbf7 Mon Sep 17 00:00:00 2001
From: Ryota Murakami <dojce1048@gmail.com>
Date: Wed, 19 Feb 2020 03:30:00 +0900
Subject: [PATCH 07/24] Update issue templates to directly link to relevant
 sources (#18039)

GitHub supports linking to off-site sources for certain types of issue.
---
 .github/ISSUE_TEMPLATE/config.yml       |  7 ++++++
 .github/ISSUE_TEMPLATE/documentation.md | 13 -----------
 .github/ISSUE_TEMPLATE/question.md      | 29 -------------------------
 3 files changed, 7 insertions(+), 42 deletions(-)
 create mode 100644 .github/ISSUE_TEMPLATE/config.yml
 delete mode 100644 .github/ISSUE_TEMPLATE/documentation.md
 delete mode 100644 .github/ISSUE_TEMPLATE/question.md

diff --git a/.github/ISSUE_TEMPLATE/config.yml b/.github/ISSUE_TEMPLATE/config.yml
new file mode 100644
index 0000000000000..e5bb31b2b3787
--- /dev/null
+++ b/.github/ISSUE_TEMPLATE/config.yml
@@ -0,0 +1,7 @@
+contact_links:
+    - name: 📃 Documentation Issue
+      url: https://github.com/reactjs/reactjs.org/issues/new
+      about: This issue tracker is not for documentation issues. Please file documentation issues here.
+    - name: 🤔 Questions and Help
+      url: https://reactjs.org/community/support.html
+      about: This issue tracker is not for support questions. Please refer to the React community's help and discussion forums.
diff --git a/.github/ISSUE_TEMPLATE/documentation.md b/.github/ISSUE_TEMPLATE/documentation.md
deleted file mode 100644
index 57c380e2ac97a..0000000000000
--- a/.github/ISSUE_TEMPLATE/documentation.md
+++ /dev/null
@@ -1,13 +0,0 @@
----
-name: "📃 Documentation Issue"
-about: This issue tracker is not for documentation issues. Please file documentation issues at https://github.com/reactjs/reactjs.org.
-title: 'Docs: '
-labels: 'Resolution: Invalid'
-
----
-
-🚨 This issue tracker is not for documentation issues. 🚨
-
-The React website is hosted on a separate repository. You may let the
-team know about any issues with the documentation by opening an issue there:
-- https://github.com/reactjs/reactjs.org/issues/new
diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
deleted file mode 100644
index 0131925d2c7a3..0000000000000
--- a/.github/ISSUE_TEMPLATE/question.md
+++ /dev/null
@@ -1,29 +0,0 @@
----
-name: "🤔 Questions and Help"
-about: This issue tracker is not for questions. Please ask questions at https://stackoverflow.com/questions/tagged/react.
-title: 'Question: '
-labels: 'Resolution: Invalid, Type: Question'
-
----
-
-🚨 This issue tracker is not for questions. 🚨
-
-As it happens, support requests that are created as issues are likely to be closed. We want to make sure you are able to find the help you seek. Please take a look at the following resources.
-
-## Coding Questions
-
-If you have a coding question related to React and React DOM, it might be better suited for Stack Overflow. It's a great place to browse through frequent questions about using React, as well as ask for help with specific questions.
-
-https://stackoverflow.com/questions/tagged/react
-
-## Talk to other React developers
-
-There are many online forums which are a great place for discussion about best practices and application architecture as well as the future of React.
-
-https://reactjs.org/community/support.html#popular-discussion-forums
-
-## Proposals
-
-If you'd like to discuss topics related to the future of React, or would like to propose a new feature or change before sending a pull request, please check out the discussions and proposals repository.
-
-https://github.com/reactjs/rfcs

From 1a6d8179b6dd427fdf7ee50d5ac45ae5a40979eb Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Tue, 18 Feb 2020 18:50:38 +0000
Subject: [PATCH 08/24] [react-interactions] Ensure onBeforeBlur fires for
 hideInstance (#18064)

---
 .../src/client/ReactDOMHostConfig.js          | 42 +++++++++---
 .../__tests__/FocusWithin-test.internal.js    | 64 +++++++++++++++++++
 2 files changed, 96 insertions(+), 10 deletions(-)

diff --git a/packages/react-dom/src/client/ReactDOMHostConfig.js b/packages/react-dom/src/client/ReactDOMHostConfig.js
index 0cf8db9da956a..4baee93d58b9d 100644
--- a/packages/react-dom/src/client/ReactDOMHostConfig.js
+++ b/packages/react-dom/src/client/ReactDOMHostConfig.js
@@ -58,6 +58,17 @@ import {
 } from '../events/DeprecatedDOMEventResponderSystem';
 import {retryIfBlockedOn} from '../events/ReactDOMEventReplaying';
 
+import {
+  enableSuspenseServerRenderer,
+  enableDeprecatedFlareAPI,
+  enableFundamentalAPI,
+} from 'shared/ReactFeatureFlags';
+import {HostComponent} from 'shared/ReactWorkTags';
+import {
+  RESPONDER_EVENT_SYSTEM,
+  IS_PASSIVE,
+} from 'legacy-events/EventSystemFlags';
+
 export type Type = string;
 export type Props = {
   autoFocus?: boolean,
@@ -112,16 +123,6 @@ type SelectionInformation = {|
   selectionRange: mixed,
 |};
 
-import {
-  enableSuspenseServerRenderer,
-  enableDeprecatedFlareAPI,
-  enableFundamentalAPI,
-} from 'shared/ReactFeatureFlags';
-import {
-  RESPONDER_EVENT_SYSTEM,
-  IS_PASSIVE,
-} from 'legacy-events/EventSystemFlags';
-
 let SUPPRESS_HYDRATION_WARNING;
 if (__DEV__) {
   SUPPRESS_HYDRATION_WARNING = 'suppressHydrationWarning';
@@ -584,7 +585,28 @@ export function clearSuspenseBoundaryFromContainer(
   retryIfBlockedOn(container);
 }
 
+function instanceContainsElem(instance: Instance, element: HTMLElement) {
+  let fiber = getClosestInstanceFromNode(element);
+  while (fiber !== null) {
+    if (fiber.tag === HostComponent && fiber.stateNode === element) {
+      return true;
+    }
+    fiber = fiber.return;
+  }
+  return false;
+}
+
 export function hideInstance(instance: Instance): void {
+  // Ensure we trigger `onBeforeBlur` if the active focused elment
+  // is ether the instance of a child or the instance. We need
+  // to traverse the Fiber tree here rather than use node.contains()
+  // as the child node might be inside a Portal.
+  if (enableDeprecatedFlareAPI && selectionInformation) {
+    const focusedElem = selectionInformation.focusedElem;
+    if (focusedElem !== null && instanceContainsElem(instance, focusedElem)) {
+      dispatchBeforeDetachedBlur(((focusedElem: any): HTMLElement));
+    }
+  }
   // TODO: Does this work for all element types? What about MathML? Should we
   // pass host context to this method?
   instance = ((instance: any): HTMLElement);
diff --git a/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js b/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js
index 0c2b783b03c0e..647527e4e4417 100644
--- a/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js
+++ b/packages/react-interactions/events/src/dom/__tests__/FocusWithin-test.internal.js
@@ -16,6 +16,7 @@ let ReactFeatureFlags;
 let ReactDOM;
 let FocusWithinResponder;
 let useFocusWithin;
+let Scheduler;
 
 const initializeModules = hasPointerEvents => {
   setPointerEvent(hasPointerEvents);
@@ -27,6 +28,7 @@ const initializeModules = hasPointerEvents => {
   FocusWithinResponder = require('react-interactions/events/focus')
     .FocusWithinResponder;
   useFocusWithin = require('react-interactions/events/focus').useFocusWithin;
+  Scheduler = require('scheduler');
 };
 
 const forcePointerEvents = true;
@@ -336,6 +338,68 @@ describe.each(table)('FocusWithin responder', hasPointerEvents => {
         expect.objectContaining({isTargetAttached: false}),
       );
     });
+
+    it.experimental(
+      'is called after a focused suspended element is hidden',
+      () => {
+        const Suspense = React.Suspense;
+        let suspend = false;
+        let resolve;
+        let promise = new Promise(resolvePromise => (resolve = resolvePromise));
+
+        function Child() {
+          if (suspend) {
+            throw promise;
+          } else {
+            return <input ref={innerRef} />;
+          }
+        }
+
+        const Component = ({show}) => {
+          const listener = useFocusWithin({
+            onBeforeBlurWithin,
+            onBlurWithin,
+          });
+
+          return (
+            <div DEPRECATED_flareListeners={listener}>
+              <Suspense fallback="Loading...">
+                <Child />
+              </Suspense>
+            </div>
+          );
+        };
+
+        const container2 = document.createElement('div');
+        document.body.appendChild(container2);
+
+        let root = ReactDOM.createRoot(container2);
+        root.render(<Component />);
+        Scheduler.unstable_flushAll();
+        jest.runAllTimers();
+        expect(container2.innerHTML).toBe('<div><input></div>');
+
+        const inner = innerRef.current;
+        const target = createEventTarget(inner);
+        target.keydown({key: 'Tab'});
+        target.focus();
+        expect(onBeforeBlurWithin).toHaveBeenCalledTimes(0);
+        expect(onBlurWithin).toHaveBeenCalledTimes(0);
+
+        suspend = true;
+        root.render(<Component />);
+        Scheduler.unstable_flushAll();
+        jest.runAllTimers();
+        expect(container2.innerHTML).toBe(
+          '<div><input style="display: none;">Loading...</div>',
+        );
+        expect(onBeforeBlurWithin).toHaveBeenCalledTimes(1);
+        expect(onBlurWithin).toHaveBeenCalledTimes(1);
+        resolve();
+
+        document.body.removeChild(container2);
+      },
+    );
   });
 
   it('expect displayName to show up for event component', () => {

From 56d8a73affad624ee4d48f1685e0a92adce0bd9c Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 18 Feb 2020 13:43:16 -0800
Subject: [PATCH 09/24] [www] Disable Scheduler `timeout` w/ dynamic flag
 (#18069)

Before attempting to land an expiration times refactor, I want to see
if this particular change will impact performance (either positively
or negatively). I will test this with a GK.
---
 packages/shared/forks/ReactFeatureFlags.www.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index eff0275c99f19..74394efdab883 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -17,6 +17,7 @@ export const {
   enableTrustedTypesIntegration,
   deferPassiveEffectCleanupDuringUnmount,
   warnAboutShorthandPropertyCollision,
+  disableSchedulerTimeoutBasedOnReactExpirationTime,
 } = require('ReactFeatureFlags');
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.
@@ -39,7 +40,6 @@ export const warnAboutDeprecatedLifecycles = true;
 export const disableLegacyContext = __EXPERIMENTAL__;
 export const warnAboutStringRefs = false;
 export const warnAboutDefaultPropsOnFunctionComponents = false;
-export const disableSchedulerTimeoutBasedOnReactExpirationTime = false;
 
 export const enableTrainModelFix = true;
 

From 691096c95d1019f57e0da2c9a060c5e094b7c586 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Feb 2020 14:19:43 -0800
Subject: [PATCH 10/24] Split recent passive effects changes into 2 flags
 (#18030)

* Split recent passive effects changes into 2 flags

Separate flags can now be used to opt passive effects into:
1) Deferring destroy functions on unmount to subsequent passive effects flush
2) Running all destroy functions (for all fibers) before create functions

This allows us to test the less risky feature (2) separately from the more risky one.

* deferPassiveEffectCleanupDuringUnmount is ignored unless runAllPassiveEffectDestroysBeforeCreates is true
---
 .../src/ReactFiberCommitWork.js               |   10 +-
 .../src/ReactFiberWorkLoop.js                 |    8 +-
 ...eactHooksWithNoopRenderer-test.internal.js | 5132 ++++++++--------
 ...tSuspenseWithNoopRenderer-test.internal.js | 5333 +++++++++--------
 packages/shared/ReactFeatureFlags.js          |    9 +
 .../forks/ReactFeatureFlags.native-fb.js      |    1 +
 .../forks/ReactFeatureFlags.native-oss.js     |    1 +
 .../forks/ReactFeatureFlags.persistent.js     |    1 +
 .../forks/ReactFeatureFlags.test-renderer.js  |    1 +
 .../ReactFeatureFlags.test-renderer.www.js    |    1 +
 .../shared/forks/ReactFeatureFlags.testing.js |    1 +
 .../shared/forks/ReactFeatureFlags.www.js     |    3 +-
 12 files changed, 5400 insertions(+), 5101 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js
index 9d9d220f33d52..ba682cc93f53c 100644
--- a/packages/react-reconciler/src/ReactFiberCommitWork.js
+++ b/packages/react-reconciler/src/ReactFiberCommitWork.js
@@ -34,6 +34,7 @@ import {
   enableFundamentalAPI,
   enableSuspenseCallback,
   enableScopeAPI,
+  runAllPassiveEffectDestroysBeforeCreates,
 } from 'shared/ReactFeatureFlags';
 import {
   FunctionComponent,
@@ -398,7 +399,7 @@ function commitHookEffectListMount(tag: number, finishedWork: Fiber) {
 }
 
 function schedulePassiveEffects(finishedWork: Fiber) {
-  if (deferPassiveEffectCleanupDuringUnmount) {
+  if (runAllPassiveEffectDestroysBeforeCreates) {
     const updateQueue: FunctionComponentUpdateQueue | null = (finishedWork.updateQueue: any);
     let lastEffect = updateQueue !== null ? updateQueue.lastEffect : null;
     if (lastEffect !== null) {
@@ -456,7 +457,7 @@ function commitLifeCycles(
       // by a create function in another component during the same commit.
       commitHookEffectListMount(HookLayout | HookHasEffect, finishedWork);
 
-      if (deferPassiveEffectCleanupDuringUnmount) {
+      if (runAllPassiveEffectDestroysBeforeCreates) {
         schedulePassiveEffects(finishedWork);
       }
       return;
@@ -795,7 +796,10 @@ function commitUnmount(
         if (lastEffect !== null) {
           const firstEffect = lastEffect.next;
 
-          if (deferPassiveEffectCleanupDuringUnmount) {
+          if (
+            deferPassiveEffectCleanupDuringUnmount &&
+            runAllPassiveEffectDestroysBeforeCreates
+          ) {
             let effect = firstEffect;
             do {
               const {destroy, tag} = effect;
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index f647ccb88b2ce..116bb2e99cf60 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -18,7 +18,7 @@ import type {Effect as HookEffect} from './ReactFiberHooks';
 
 import {
   warnAboutDeprecatedLifecycles,
-  deferPassiveEffectCleanupDuringUnmount,
+  runAllPassiveEffectDestroysBeforeCreates,
   enableUserTimingAPI,
   enableSuspenseServerRenderer,
   replayFailedUnitOfWorkWithInvokeGuardedCallback,
@@ -2174,7 +2174,7 @@ export function enqueuePendingPassiveHookEffectMount(
   fiber: Fiber,
   effect: HookEffect,
 ): void {
-  if (deferPassiveEffectCleanupDuringUnmount) {
+  if (runAllPassiveEffectDestroysBeforeCreates) {
     pendingPassiveHookEffectsMount.push(effect, fiber);
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
@@ -2190,7 +2190,7 @@ export function enqueuePendingPassiveHookEffectUnmount(
   fiber: Fiber,
   effect: HookEffect,
 ): void {
-  if (deferPassiveEffectCleanupDuringUnmount) {
+  if (runAllPassiveEffectDestroysBeforeCreates) {
     pendingPassiveHookEffectsUnmount.push(effect, fiber);
     if (!rootDoesHavePassiveEffects) {
       rootDoesHavePassiveEffects = true;
@@ -2224,7 +2224,7 @@ function flushPassiveEffectsImpl() {
   executionContext |= CommitContext;
   const prevInteractions = pushInteractions(root);
 
-  if (deferPassiveEffectCleanupDuringUnmount) {
+  if (runAllPassiveEffectDestroysBeforeCreates) {
     // It's important that ALL pending passive effect destroy functions are called
     // before ANY passive effect create functions are called.
     // Otherwise effects in sibling components might interfere with each other.
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
index 438a748fb75a4..6e50579addd31 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
@@ -34,2759 +34,2953 @@ let forwardRef;
 let memo;
 let act;
 
-describe('ReactHooksWithNoopRenderer', () => {
-  beforeEach(() => {
-    jest.resetModules();
-    jest.useFakeTimers();
-
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
-    ReactFeatureFlags.enableSchedulerTracing = true;
-    ReactFeatureFlags.flushSuspenseFallbacksInTests = false;
-    ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount = true;
-    React = require('react');
-    ReactNoop = require('react-noop-renderer');
-    Scheduler = require('scheduler');
-    SchedulerTracing = require('scheduler/tracing');
-    ReactCache = require('react-cache');
-    useState = React.useState;
-    useReducer = React.useReducer;
-    useEffect = React.useEffect;
-    useLayoutEffect = React.useLayoutEffect;
-    useCallback = React.useCallback;
-    useMemo = React.useMemo;
-    useRef = React.useRef;
-    useImperativeHandle = React.useImperativeHandle;
-    forwardRef = React.forwardRef;
-    memo = React.memo;
-    useTransition = React.useTransition;
-    useDeferredValue = React.useDeferredValue;
-    Suspense = React.Suspense;
-    act = ReactNoop.act;
-
-    TextResource = ReactCache.unstable_createResource(
-      ([text, ms = 0]) => {
-        return new Promise((resolve, reject) =>
-          setTimeout(() => {
-            Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
-            resolve(text);
-          }, ms),
+function loadModules({
+  deferPassiveEffectCleanupDuringUnmount,
+  runAllPassiveEffectDestroysBeforeCreates,
+}) {
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+  ReactFeatureFlags.enableSchedulerTracing = true;
+  ReactFeatureFlags.flushSuspenseFallbacksInTests = false;
+  ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount = deferPassiveEffectCleanupDuringUnmount;
+  ReactFeatureFlags.runAllPassiveEffectDestroysBeforeCreates = runAllPassiveEffectDestroysBeforeCreates;
+  React = require('react');
+  ReactNoop = require('react-noop-renderer');
+  Scheduler = require('scheduler');
+  SchedulerTracing = require('scheduler/tracing');
+  ReactCache = require('react-cache');
+  useState = React.useState;
+  useReducer = React.useReducer;
+  useEffect = React.useEffect;
+  useLayoutEffect = React.useLayoutEffect;
+  useCallback = React.useCallback;
+  useMemo = React.useMemo;
+  useRef = React.useRef;
+  useImperativeHandle = React.useImperativeHandle;
+  forwardRef = React.forwardRef;
+  memo = React.memo;
+  useTransition = React.useTransition;
+  useDeferredValue = React.useDeferredValue;
+  Suspense = React.Suspense;
+  act = ReactNoop.act;
+}
+
+[true, false].forEach(deferPassiveEffectCleanupDuringUnmount => {
+  [true, false].forEach(runAllPassiveEffectDestroysBeforeCreates => {
+    describe(`ReactHooksWithNoopRenderer deferPassiveEffectCleanupDuringUnmount:${deferPassiveEffectCleanupDuringUnmount} runAllPassiveEffectDestroysBeforeCreates:${runAllPassiveEffectDestroysBeforeCreates}`, () => {
+      beforeEach(() => {
+        jest.resetModules();
+        jest.useFakeTimers();
+
+        loadModules({
+          deferPassiveEffectCleanupDuringUnmount,
+          runAllPassiveEffectDestroysBeforeCreates,
+        });
+
+        TextResource = ReactCache.unstable_createResource(
+          ([text, ms = 0]) => {
+            return new Promise((resolve, reject) =>
+              setTimeout(() => {
+                Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
+                resolve(text);
+              }, ms),
+            );
+          },
+          ([text, ms]) => text,
         );
-      },
-      ([text, ms]) => text,
-    );
-  });
+      });
 
-  function span(prop) {
-    return {type: 'span', hidden: false, children: [], prop};
-  }
-
-  function hiddenSpan(prop) {
-    return {type: 'span', children: [], prop, hidden: true};
-  }
-
-  function Text(props) {
-    Scheduler.unstable_yieldValue(props.text);
-    return <span prop={props.text} />;
-  }
-
-  function AsyncText(props) {
-    const text = props.text;
-    try {
-      TextResource.read([props.text, props.ms]);
-      Scheduler.unstable_yieldValue(text);
-      return <span prop={text} />;
-    } catch (promise) {
-      if (typeof promise.then === 'function') {
-        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-      } else {
-        Scheduler.unstable_yieldValue(`Error! [${text}]`);
+      function span(prop) {
+        return {type: 'span', hidden: false, children: [], prop};
       }
-      throw promise;
-    }
-  }
-
-  function advanceTimers(ms) {
-    // Note: This advances Jest's virtual time but not React's. Use
-    // ReactNoop.expire for that.
-    if (typeof ms !== 'number') {
-      throw new Error('Must specify ms');
-    }
-    jest.advanceTimersByTime(ms);
-    // Wait until the end of the current tick
-    // We cannot use a timer since we're faking them
-    return Promise.resolve().then(() => {});
-  }
-
-  it('resumes after an interruption', () => {
-    function Counter(props, ref) {
-      const [count, updateCount] = useState(0);
-      useImperativeHandle(ref, () => ({updateCount}));
-      return <Text text={props.label + ': ' + count} />;
-    }
-    Counter = forwardRef(Counter);
-
-    // Initial mount
-    const counter = React.createRef(null);
-    ReactNoop.render(<Counter label="Count" ref={counter} />);
-    expect(Scheduler).toFlushAndYield(['Count: 0']);
-    expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-
-    // Schedule some updates
-    ReactNoop.batchedUpdates(() => {
-      counter.current.updateCount(1);
-      counter.current.updateCount(count => count + 10);
-    });
 
-    // Partially flush without committing
-    expect(Scheduler).toFlushAndYieldThrough(['Count: 11']);
-    expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      function hiddenSpan(prop) {
+        return {type: 'span', children: [], prop, hidden: true};
+      }
 
-    // Interrupt with a high priority update
-    ReactNoop.flushSync(() => {
-      ReactNoop.render(<Counter label="Total" />);
-    });
-    expect(Scheduler).toHaveYielded(['Total: 0']);
+      function Text(props) {
+        Scheduler.unstable_yieldValue(props.text);
+        return <span prop={props.text} />;
+      }
 
-    // Resume rendering
-    expect(Scheduler).toFlushAndYield(['Total: 11']);
-    expect(ReactNoop.getChildren()).toEqual([span('Total: 11')]);
-  });
+      function AsyncText(props) {
+        const text = props.text;
+        try {
+          TextResource.read([props.text, props.ms]);
+          Scheduler.unstable_yieldValue(text);
+          return <span prop={text} />;
+        } catch (promise) {
+          if (typeof promise.then === 'function') {
+            Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+          } else {
+            Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          }
+          throw promise;
+        }
+      }
 
-  it('throws inside class components', () => {
-    class BadCounter extends React.Component {
-      render() {
-        const [count] = useState(0);
-        return <Text text={this.props.label + ': ' + count} />;
+      function advanceTimers(ms) {
+        // Note: This advances Jest's virtual time but not React's. Use
+        // ReactNoop.expire for that.
+        if (typeof ms !== 'number') {
+          throw new Error('Must specify ms');
+        }
+        jest.advanceTimersByTime(ms);
+        // Wait until the end of the current tick
+        // We cannot use a timer since we're faking them
+        return Promise.resolve().then(() => {});
       }
-    }
-    ReactNoop.render(<BadCounter />);
-
-    expect(Scheduler).toFlushAndThrow(
-      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
-        ' one of the following reasons:\n' +
-        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
-        '2. You might be breaking the Rules of Hooks\n' +
-        '3. You might have more than one copy of React in the same app\n' +
-        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
-    );
-
-    // Confirm that a subsequent hook works properly.
-    function GoodCounter(props, ref) {
-      const [count] = useState(props.initialCount);
-      return <Text text={count} />;
-    }
-    ReactNoop.render(<GoodCounter initialCount={10} />);
-    expect(Scheduler).toFlushAndYield([10]);
-  });
 
-  it('throws inside module-style components', () => {
-    function Counter() {
-      return {
-        render() {
-          const [count] = useState(0);
-          return <Text text={this.props.label + ': ' + count} />;
-        },
-      };
-    }
-    ReactNoop.render(<Counter />);
-    expect(() =>
-      expect(Scheduler).toFlushAndThrow(
-        'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen ' +
-          'for one of the following reasons:\n' +
-          '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
-          '2. You might be breaking the Rules of Hooks\n' +
-          '3. You might have more than one copy of React in the same app\n' +
-          'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
-      ),
-    ).toErrorDev(
-      'Warning: The <Counter /> component appears to be a function component that returns a class instance. ' +
-        'Change Counter to a class that extends React.Component instead. ' +
-        "If you can't use a class try assigning the prototype on the function as a workaround. " +
-        '`Counter.prototype = React.Component.prototype`. ' +
-        "Don't use an arrow function since it cannot be called with `new` by React.",
-    );
-
-    // Confirm that a subsequent hook works properly.
-    function GoodCounter(props) {
-      const [count] = useState(props.initialCount);
-      return <Text text={count} />;
-    }
-    ReactNoop.render(<GoodCounter initialCount={10} />);
-    expect(Scheduler).toFlushAndYield([10]);
-  });
+      it('resumes after an interruption', () => {
+        function Counter(props, ref) {
+          const [count, updateCount] = useState(0);
+          useImperativeHandle(ref, () => ({updateCount}));
+          return <Text text={props.label + ': ' + count} />;
+        }
+        Counter = forwardRef(Counter);
 
-  it('throws when called outside the render phase', () => {
-    expect(() => useState(0)).toThrow(
-      'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
-        ' one of the following reasons:\n' +
-        '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
-        '2. You might be breaking the Rules of Hooks\n' +
-        '3. You might have more than one copy of React in the same app\n' +
-        'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
-    );
-  });
+        // Initial mount
+        const counter = React.createRef(null);
+        ReactNoop.render(<Counter label="Count" ref={counter} />);
+        expect(Scheduler).toFlushAndYield(['Count: 0']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-  describe('useState', () => {
-    it('simple mount and update', () => {
-      function Counter(props, ref) {
-        const [count, updateCount] = useState(0);
-        useImperativeHandle(ref, () => ({updateCount}));
-        return <Text text={'Count: ' + count} />;
-      }
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-
-      act(() => counter.current.updateCount(1));
-      expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-
-      act(() => counter.current.updateCount(count => count + 10));
-      expect(Scheduler).toHaveYielded(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
-    });
+        // Schedule some updates
+        ReactNoop.batchedUpdates(() => {
+          counter.current.updateCount(1);
+          counter.current.updateCount(count => count + 10);
+        });
+
+        // Partially flush without committing
+        expect(Scheduler).toFlushAndYieldThrough(['Count: 11']);
+        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-    it('lazy state initializer', () => {
-      function Counter(props, ref) {
-        const [count, updateCount] = useState(() => {
-          Scheduler.unstable_yieldValue('getInitialState');
-          return props.initialState;
+        // Interrupt with a high priority update
+        ReactNoop.flushSync(() => {
+          ReactNoop.render(<Counter label="Total" />);
         });
-        useImperativeHandle(ref, () => ({updateCount}));
-        return <Text text={'Count: ' + count} />;
-      }
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter initialState={42} ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['getInitialState', 'Count: 42']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 42')]);
-
-      act(() => counter.current.updateCount(7));
-      expect(Scheduler).toHaveYielded(['Count: 7']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 7')]);
-    });
+        expect(Scheduler).toHaveYielded(['Total: 0']);
 
-    it('multiple states', () => {
-      function Counter(props, ref) {
-        const [count, updateCount] = useState(0);
-        const [label, updateLabel] = useState('Count');
-        useImperativeHandle(ref, () => ({updateCount, updateLabel}));
-        return <Text text={label + ': ' + count} />;
-      }
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        // Resume rendering
+        expect(Scheduler).toFlushAndYield(['Total: 11']);
+        expect(ReactNoop.getChildren()).toEqual([span('Total: 11')]);
+      });
 
-      act(() => counter.current.updateCount(7));
-      expect(Scheduler).toHaveYielded(['Count: 7']);
+      it('throws inside class components', () => {
+        class BadCounter extends React.Component {
+          render() {
+            const [count] = useState(0);
+            return <Text text={this.props.label + ': ' + count} />;
+          }
+        }
+        ReactNoop.render(<BadCounter />);
+
+        expect(Scheduler).toFlushAndThrow(
+          'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+            ' one of the following reasons:\n' +
+            '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+            '2. You might be breaking the Rules of Hooks\n' +
+            '3. You might have more than one copy of React in the same app\n' +
+            'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
+        );
 
-      act(() => counter.current.updateLabel('Total'));
-      expect(Scheduler).toHaveYielded(['Total: 7']);
-    });
+        // Confirm that a subsequent hook works properly.
+        function GoodCounter(props, ref) {
+          const [count] = useState(props.initialCount);
+          return <Text text={count} />;
+        }
+        ReactNoop.render(<GoodCounter initialCount={10} />);
+        expect(Scheduler).toFlushAndYield([10]);
+      });
 
-    it('returns the same updater function every time', () => {
-      let updaters = [];
-      function Counter() {
-        const [count, updateCount] = useState(0);
-        updaters.push(updateCount);
-        return <Text text={'Count: ' + count} />;
-      }
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+      it('throws inside module-style components', () => {
+        function Counter() {
+          return {
+            render() {
+              const [count] = useState(0);
+              return <Text text={this.props.label + ': ' + count} />;
+            },
+          };
+        }
+        ReactNoop.render(<Counter />);
+        expect(() =>
+          expect(Scheduler).toFlushAndThrow(
+            'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen ' +
+              'for one of the following reasons:\n' +
+              '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+              '2. You might be breaking the Rules of Hooks\n' +
+              '3. You might have more than one copy of React in the same app\n' +
+              'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
+          ),
+        ).toErrorDev(
+          'Warning: The <Counter /> component appears to be a function component that returns a class instance. ' +
+            'Change Counter to a class that extends React.Component instead. ' +
+            "If you can't use a class try assigning the prototype on the function as a workaround. " +
+            '`Counter.prototype = React.Component.prototype`. ' +
+            "Don't use an arrow function since it cannot be called with `new` by React.",
+        );
 
-      act(() => updaters[0](1));
-      expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        // Confirm that a subsequent hook works properly.
+        function GoodCounter(props) {
+          const [count] = useState(props.initialCount);
+          return <Text text={count} />;
+        }
+        ReactNoop.render(<GoodCounter initialCount={10} />);
+        expect(Scheduler).toFlushAndYield([10]);
+      });
 
-      act(() => updaters[0](count => count + 10));
-      expect(Scheduler).toHaveYielded(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
+      it('throws when called outside the render phase', () => {
+        expect(() => useState(0)).toThrow(
+          'Invalid hook call. Hooks can only be called inside of the body of a function component. This could happen for' +
+            ' one of the following reasons:\n' +
+            '1. You might have mismatching versions of React and the renderer (such as React DOM)\n' +
+            '2. You might be breaking the Rules of Hooks\n' +
+            '3. You might have more than one copy of React in the same app\n' +
+            'See https://fb.me/react-invalid-hook-call for tips about how to debug and fix this problem.',
+        );
+      });
 
-      expect(updaters).toEqual([updaters[0], updaters[0], updaters[0]]);
-    });
+      describe('useState', () => {
+        it('simple mount and update', () => {
+          function Counter(props, ref) {
+            const [count, updateCount] = useState(0);
+            useImperativeHandle(ref, () => ({updateCount}));
+            return <Text text={'Count: ' + count} />;
+          }
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+
+          act(() => counter.current.updateCount(1));
+          expect(Scheduler).toHaveYielded(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+
+          act(() => counter.current.updateCount(count => count + 10));
+          expect(Scheduler).toHaveYielded(['Count: 11']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
+        });
 
-    it('warns on set after unmount', () => {
-      let _updateCount;
-      function Counter(props, ref) {
-        const [, updateCount] = useState(0);
-        _updateCount = updateCount;
-        return null;
-      }
+        it('lazy state initializer', () => {
+          function Counter(props, ref) {
+            const [count, updateCount] = useState(() => {
+              Scheduler.unstable_yieldValue('getInitialState');
+              return props.initialState;
+            });
+            useImperativeHandle(ref, () => ({updateCount}));
+            return <Text text={'Count: ' + count} />;
+          }
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter initialState={42} ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['getInitialState', 'Count: 42']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 42')]);
+
+          act(() => counter.current.updateCount(7));
+          expect(Scheduler).toHaveYielded(['Count: 7']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 7')]);
+        });
 
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushWithoutYielding();
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushWithoutYielding();
-      expect(() => act(() => _updateCount(1))).toErrorDev(
-        "Warning: Can't perform a React state update on an unmounted " +
-          'component. This is a no-op, but it indicates a memory leak in your ' +
-          'application. To fix, cancel all subscriptions and asynchronous ' +
-          'tasks in a useEffect cleanup function.\n' +
-          '    in Counter (at **)',
-      );
-    });
+        it('multiple states', () => {
+          function Counter(props, ref) {
+            const [count, updateCount] = useState(0);
+            const [label, updateLabel] = useState('Count');
+            useImperativeHandle(ref, () => ({updateCount, updateLabel}));
+            return <Text text={label + ': ' + count} />;
+          }
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-    it('works with memo', () => {
-      let _updateCount;
-      function Counter(props) {
-        const [count, updateCount] = useState(0);
-        _updateCount = updateCount;
-        return <Text text={'Count: ' + count} />;
-      }
-      Counter = memo(Counter);
+          act(() => counter.current.updateCount(7));
+          expect(Scheduler).toHaveYielded(['Count: 7']);
 
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          act(() => counter.current.updateLabel('Total'));
+          expect(Scheduler).toHaveYielded(['Total: 7']);
+        });
 
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield([]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        it('returns the same updater function every time', () => {
+          let updaters = [];
+          function Counter() {
+            const [count, updateCount] = useState(0);
+            updaters.push(updateCount);
+            return <Text text={'Count: ' + count} />;
+          }
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-      act(() => _updateCount(1));
-      expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-    });
-  });
+          act(() => updaters[0](1));
+          expect(Scheduler).toHaveYielded(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
 
-  describe('updates during the render phase', () => {
-    it('restarts the render function and applies the new updates on top', () => {
-      function ScrollView({row: newRow}) {
-        let [isScrollingDown, setIsScrollingDown] = useState(false);
-        let [row, setRow] = useState(null);
+          act(() => updaters[0](count => count + 10));
+          expect(Scheduler).toHaveYielded(['Count: 11']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
 
-        if (row !== newRow) {
-          // Row changed since last render. Update isScrollingDown.
-          setIsScrollingDown(row !== null && newRow > row);
-          setRow(newRow);
-        }
+          expect(updaters).toEqual([updaters[0], updaters[0], updaters[0]]);
+        });
 
-        return <Text text={`Scrolling down: ${isScrollingDown}`} />;
-      }
+        it('warns on set after unmount', () => {
+          let _updateCount;
+          function Counter(props, ref) {
+            const [, updateCount] = useState(0);
+            _updateCount = updateCount;
+            return null;
+          }
 
-      ReactNoop.render(<ScrollView row={1} />);
-      expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: false')]);
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushWithoutYielding();
+          ReactNoop.render(null);
+          expect(Scheduler).toFlushWithoutYielding();
+          expect(() => act(() => _updateCount(1))).toErrorDev(
+            "Warning: Can't perform a React state update on an unmounted " +
+              'component. This is a no-op, but it indicates a memory leak in your ' +
+              'application. To fix, cancel all subscriptions and asynchronous ' +
+              'tasks in a useEffect cleanup function.\n' +
+              '    in Counter (at **)',
+          );
+        });
 
-      ReactNoop.render(<ScrollView row={5} />);
-      expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: true')]);
+        it('works with memo', () => {
+          let _updateCount;
+          function Counter(props) {
+            const [count, updateCount] = useState(0);
+            _updateCount = updateCount;
+            return <Text text={'Count: ' + count} />;
+          }
+          Counter = memo(Counter);
 
-      ReactNoop.render(<ScrollView row={5} />);
-      expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: true')]);
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-      ReactNoop.render(<ScrollView row={10} />);
-      expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: true')]);
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndYield([]);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-      ReactNoop.render(<ScrollView row={2} />);
-      expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: false')]);
+          act(() => _updateCount(1));
+          expect(Scheduler).toHaveYielded(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+        });
+      });
 
-      ReactNoop.render(<ScrollView row={2} />);
-      expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
-      expect(ReactNoop.getChildren()).toEqual([span('Scrolling down: false')]);
-    });
+      describe('updates during the render phase', () => {
+        it('restarts the render function and applies the new updates on top', () => {
+          function ScrollView({row: newRow}) {
+            let [isScrollingDown, setIsScrollingDown] = useState(false);
+            let [row, setRow] = useState(null);
 
-    it('keeps restarting until there are no more new updates', () => {
-      function Counter({row: newRow}) {
-        let [count, setCount] = useState(0);
-        if (count < 3) {
-          setCount(count + 1);
-        }
-        Scheduler.unstable_yieldValue('Render: ' + count);
-        return <Text text={count} />;
-      }
+            if (row !== newRow) {
+              // Row changed since last render. Update isScrollingDown.
+              setIsScrollingDown(row !== null && newRow > row);
+              setRow(newRow);
+            }
 
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield([
-        'Render: 0',
-        'Render: 1',
-        'Render: 2',
-        'Render: 3',
-        3,
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span(3)]);
-    });
+            return <Text text={`Scrolling down: ${isScrollingDown}`} />;
+          }
 
-    it('updates multiple times within same render function', () => {
-      function Counter({row: newRow}) {
-        let [count, setCount] = useState(0);
-        if (count < 12) {
-          setCount(c => c + 1);
-          setCount(c => c + 1);
-          setCount(c => c + 1);
-        }
-        Scheduler.unstable_yieldValue('Render: ' + count);
-        return <Text text={count} />;
-      }
+          ReactNoop.render(<ScrollView row={1} />);
+          expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Scrolling down: false'),
+          ]);
 
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield([
-        // Should increase by three each time
-        'Render: 0',
-        'Render: 3',
-        'Render: 6',
-        'Render: 9',
-        'Render: 12',
-        12,
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span(12)]);
-    });
+          ReactNoop.render(<ScrollView row={5} />);
+          expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Scrolling down: true'),
+          ]);
 
-    it('throws after too many iterations', () => {
-      function Counter({row: newRow}) {
-        let [count, setCount] = useState(0);
-        setCount(count + 1);
-        Scheduler.unstable_yieldValue('Render: ' + count);
-        return <Text text={count} />;
-      }
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndThrow(
-        'Too many re-renders. React limits the number of renders to prevent ' +
-          'an infinite loop.',
-      );
-    });
+          ReactNoop.render(<ScrollView row={5} />);
+          expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Scrolling down: true'),
+          ]);
 
-    it('works with useReducer', () => {
-      function reducer(state, action) {
-        return action === 'increment' ? state + 1 : state;
-      }
-      function Counter({row: newRow}) {
-        let [count, dispatch] = useReducer(reducer, 0);
-        if (count < 3) {
-          dispatch('increment');
-        }
-        Scheduler.unstable_yieldValue('Render: ' + count);
-        return <Text text={count} />;
-      }
+          ReactNoop.render(<ScrollView row={10} />);
+          expect(Scheduler).toFlushAndYield(['Scrolling down: true']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Scrolling down: true'),
+          ]);
 
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield([
-        'Render: 0',
-        'Render: 1',
-        'Render: 2',
-        'Render: 3',
-        3,
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span(3)]);
-    });
+          ReactNoop.render(<ScrollView row={2} />);
+          expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Scrolling down: false'),
+          ]);
 
-    it('uses reducer passed at time of render, not time of dispatch', () => {
-      // This test is a bit contrived but it demonstrates a subtle edge case.
+          ReactNoop.render(<ScrollView row={2} />);
+          expect(Scheduler).toFlushAndYield(['Scrolling down: false']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Scrolling down: false'),
+          ]);
+        });
 
-      // Reducer A increments by 1. Reducer B increments by 10.
-      function reducerA(state, action) {
-        switch (action) {
-          case 'increment':
-            return state + 1;
-          case 'reset':
-            return 0;
-        }
-      }
-      function reducerB(state, action) {
-        switch (action) {
-          case 'increment':
-            return state + 10;
-          case 'reset':
-            return 0;
-        }
-      }
+        it('keeps restarting until there are no more new updates', () => {
+          function Counter({row: newRow}) {
+            let [count, setCount] = useState(0);
+            if (count < 3) {
+              setCount(count + 1);
+            }
+            Scheduler.unstable_yieldValue('Render: ' + count);
+            return <Text text={count} />;
+          }
 
-      function Counter({row: newRow}, ref) {
-        let [reducer, setReducer] = useState(() => reducerA);
-        let [count, dispatch] = useReducer(reducer, 0);
-        useImperativeHandle(ref, () => ({dispatch}));
-        if (count < 20) {
-          dispatch('increment');
-          // Swap reducers each time we increment
-          if (reducer === reducerA) {
-            setReducer(() => reducerB);
-          } else {
-            setReducer(() => reducerA);
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndYield([
+            'Render: 0',
+            'Render: 1',
+            'Render: 2',
+            'Render: 3',
+            3,
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span(3)]);
+        });
+
+        it('updates multiple times within same render function', () => {
+          function Counter({row: newRow}) {
+            let [count, setCount] = useState(0);
+            if (count < 12) {
+              setCount(c => c + 1);
+              setCount(c => c + 1);
+              setCount(c => c + 1);
+            }
+            Scheduler.unstable_yieldValue('Render: ' + count);
+            return <Text text={count} />;
           }
-        }
-        Scheduler.unstable_yieldValue('Render: ' + count);
-        return <Text text={count} />;
-      }
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toFlushAndYield([
-        // The count should increase by alternating amounts of 10 and 1
-        // until we reach 21.
-        'Render: 0',
-        'Render: 10',
-        'Render: 11',
-        'Render: 21',
-        21,
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span(21)]);
-
-      // Test that it works on update, too. This time the log is a bit different
-      // because we started with reducerB instead of reducerA.
-      ReactNoop.act(() => {
-        counter.current.dispatch('reset');
-      });
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toHaveYielded([
-        'Render: 0',
-        'Render: 1',
-        'Render: 11',
-        'Render: 12',
-        'Render: 22',
-        22,
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span(22)]);
-    });
 
-    it('discards render phase updates if something suspends', () => {
-      const thenable = {then() {}};
-      function Foo({signal}) {
-        return (
-          <Suspense fallback="Loading...">
-            <Bar signal={signal} />
-          </Suspense>
-        );
-      }
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndYield([
+            // Should increase by three each time
+            'Render: 0',
+            'Render: 3',
+            'Render: 6',
+            'Render: 9',
+            'Render: 12',
+            12,
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span(12)]);
+        });
 
-      function Bar({signal: newSignal}) {
-        let [counter, setCounter] = useState(0);
-        let [signal, setSignal] = useState(true);
+        it('throws after too many iterations', () => {
+          function Counter({row: newRow}) {
+            let [count, setCount] = useState(0);
+            setCount(count + 1);
+            Scheduler.unstable_yieldValue('Render: ' + count);
+            return <Text text={count} />;
+          }
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndThrow(
+            'Too many re-renders. React limits the number of renders to prevent ' +
+              'an infinite loop.',
+          );
+        });
 
-        // Increment a counter every time the signal changes
-        if (signal !== newSignal) {
-          setCounter(c => c + 1);
-          setSignal(newSignal);
-          if (counter === 0) {
-            // We're suspending during a render that includes render phase
-            // updates. Those updates should not persist to the next render.
-            Scheduler.unstable_yieldValue('Suspend!');
-            throw thenable;
+        it('works with useReducer', () => {
+          function reducer(state, action) {
+            return action === 'increment' ? state + 1 : state;
+          }
+          function Counter({row: newRow}) {
+            let [count, dispatch] = useReducer(reducer, 0);
+            if (count < 3) {
+              dispatch('increment');
+            }
+            Scheduler.unstable_yieldValue('Render: ' + count);
+            return <Text text={count} />;
           }
-        }
 
-        return <Text text={counter} />;
-      }
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndYield([
+            'Render: 0',
+            'Render: 1',
+            'Render: 2',
+            'Render: 3',
+            3,
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span(3)]);
+        });
 
-      const root = ReactNoop.createRoot();
-      root.render(<Foo signal={true} />);
+        it('uses reducer passed at time of render, not time of dispatch', () => {
+          // This test is a bit contrived but it demonstrates a subtle edge case.
+
+          // Reducer A increments by 1. Reducer B increments by 10.
+          function reducerA(state, action) {
+            switch (action) {
+              case 'increment':
+                return state + 1;
+              case 'reset':
+                return 0;
+            }
+          }
+          function reducerB(state, action) {
+            switch (action) {
+              case 'increment':
+                return state + 10;
+              case 'reset':
+                return 0;
+            }
+          }
 
-      expect(Scheduler).toFlushAndYield([0]);
-      expect(root).toMatchRenderedOutput(<span prop={0} />);
+          function Counter({row: newRow}, ref) {
+            let [reducer, setReducer] = useState(() => reducerA);
+            let [count, dispatch] = useReducer(reducer, 0);
+            useImperativeHandle(ref, () => ({dispatch}));
+            if (count < 20) {
+              dispatch('increment');
+              // Swap reducers each time we increment
+              if (reducer === reducerA) {
+                setReducer(() => reducerB);
+              } else {
+                setReducer(() => reducerA);
+              }
+            }
+            Scheduler.unstable_yieldValue('Render: ' + count);
+            return <Text text={count} />;
+          }
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toFlushAndYield([
+            // The count should increase by alternating amounts of 10 and 1
+            // until we reach 21.
+            'Render: 0',
+            'Render: 10',
+            'Render: 11',
+            'Render: 21',
+            21,
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span(21)]);
 
-      root.render(<Foo signal={false} />);
-      expect(Scheduler).toFlushAndYield(['Suspend!']);
-      expect(root).toMatchRenderedOutput(<span prop={0} />);
+          // Test that it works on update, too. This time the log is a bit different
+          // because we started with reducerB instead of reducerA.
+          ReactNoop.act(() => {
+            counter.current.dispatch('reset');
+          });
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toHaveYielded([
+            'Render: 0',
+            'Render: 1',
+            'Render: 11',
+            'Render: 12',
+            'Render: 22',
+            22,
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span(22)]);
+        });
 
-      // Rendering again should suspend again.
-      root.render(<Foo signal={false} />);
-      expect(Scheduler).toFlushAndYield(['Suspend!']);
-    });
+        it('discards render phase updates if something suspends', () => {
+          const thenable = {then() {}};
+          function Foo({signal}) {
+            return (
+              <Suspense fallback="Loading...">
+                <Bar signal={signal} />
+              </Suspense>
+            );
+          }
 
-    it('discards render phase updates if something suspends, but not other updates in the same component', async () => {
-      const thenable = {then() {}};
-      function Foo({signal}) {
-        return (
-          <Suspense fallback="Loading...">
-            <Bar signal={signal} />
-          </Suspense>
-        );
-      }
+          function Bar({signal: newSignal}) {
+            let [counter, setCounter] = useState(0);
+            let [signal, setSignal] = useState(true);
+
+            // Increment a counter every time the signal changes
+            if (signal !== newSignal) {
+              setCounter(c => c + 1);
+              setSignal(newSignal);
+              if (counter === 0) {
+                // We're suspending during a render that includes render phase
+                // updates. Those updates should not persist to the next render.
+                Scheduler.unstable_yieldValue('Suspend!');
+                throw thenable;
+              }
+            }
+
+            return <Text text={counter} />;
+          }
 
-      let setLabel;
-      function Bar({signal: newSignal}) {
-        let [counter, setCounter] = useState(0);
+          const root = ReactNoop.createRoot();
+          root.render(<Foo signal={true} />);
 
-        if (counter === 1) {
-          // We're suspending during a render that includes render phase
-          // updates. Those updates should not persist to the next render.
-          Scheduler.unstable_yieldValue('Suspend!');
-          throw thenable;
-        }
+          expect(Scheduler).toFlushAndYield([0]);
+          expect(root).toMatchRenderedOutput(<span prop={0} />);
 
-        let [signal, setSignal] = useState(true);
+          root.render(<Foo signal={false} />);
+          expect(Scheduler).toFlushAndYield(['Suspend!']);
+          expect(root).toMatchRenderedOutput(<span prop={0} />);
 
-        // Increment a counter every time the signal changes
-        if (signal !== newSignal) {
-          setCounter(c => c + 1);
-          setSignal(newSignal);
-        }
+          // Rendering again should suspend again.
+          root.render(<Foo signal={false} />);
+          expect(Scheduler).toFlushAndYield(['Suspend!']);
+        });
 
-        let [label, _setLabel] = useState('A');
-        setLabel = _setLabel;
+        it('discards render phase updates if something suspends, but not other updates in the same component', async () => {
+          const thenable = {then() {}};
+          function Foo({signal}) {
+            return (
+              <Suspense fallback="Loading...">
+                <Bar signal={signal} />
+              </Suspense>
+            );
+          }
 
-        return <Text text={`${label}:${counter}`} />;
-      }
+          let setLabel;
+          function Bar({signal: newSignal}) {
+            let [counter, setCounter] = useState(0);
 
-      const root = ReactNoop.createRoot();
-      root.render(<Foo signal={true} />);
+            if (counter === 1) {
+              // We're suspending during a render that includes render phase
+              // updates. Those updates should not persist to the next render.
+              Scheduler.unstable_yieldValue('Suspend!');
+              throw thenable;
+            }
 
-      expect(Scheduler).toFlushAndYield(['A:0']);
-      expect(root).toMatchRenderedOutput(<span prop="A:0" />);
+            let [signal, setSignal] = useState(true);
 
-      await ReactNoop.act(async () => {
-        root.render(<Foo signal={false} />);
-        setLabel('B');
-      });
-      expect(Scheduler).toHaveYielded(['Suspend!']);
-      expect(root).toMatchRenderedOutput(<span prop="A:0" />);
-
-      // Rendering again should suspend again.
-      root.render(<Foo signal={false} />);
-      expect(Scheduler).toFlushAndYield(['Suspend!']);
-
-      // Flip the signal back to "cancel" the update. However, the update to
-      // label should still proceed. It shouldn't have been dropped.
-      root.render(<Foo signal={true} />);
-      expect(Scheduler).toFlushAndYield(['B:0']);
-      expect(root).toMatchRenderedOutput(<span prop="B:0" />);
-    });
+            // Increment a counter every time the signal changes
+            if (signal !== newSignal) {
+              setCounter(c => c + 1);
+              setSignal(newSignal);
+            }
 
-    // TODO: This should probably warn
-    it.experimental('calling startTransition inside render phase', async () => {
-      let startTransition;
-      function App() {
-        let [counter, setCounter] = useState(0);
-        let [_startTransition] = useTransition();
-        startTransition = _startTransition;
-
-        if (counter === 0) {
-          startTransition(() => {
-            setCounter(c => c + 1);
-          });
-        }
+            let [label, _setLabel] = useState('A');
+            setLabel = _setLabel;
 
-        return <Text text={counter} />;
-      }
+            return <Text text={`${label}:${counter}`} />;
+          }
 
-      const root = ReactNoop.createRoot();
-      root.render(<App />);
-      expect(Scheduler).toFlushAndYield([1]);
-      expect(root).toMatchRenderedOutput(<span prop={1} />);
-    });
-  });
+          const root = ReactNoop.createRoot();
+          root.render(<Foo signal={true} />);
 
-  describe('useReducer', () => {
-    it('simple mount and update', () => {
-      const INCREMENT = 'INCREMENT';
-      const DECREMENT = 'DECREMENT';
-
-      function reducer(state, action) {
-        switch (action) {
-          case 'INCREMENT':
-            return state + 1;
-          case 'DECREMENT':
-            return state - 1;
-          default:
-            return state;
-        }
-      }
+          expect(Scheduler).toFlushAndYield(['A:0']);
+          expect(root).toMatchRenderedOutput(<span prop="A:0" />);
 
-      function Counter(props, ref) {
-        const [count, dispatch] = useReducer(reducer, 0);
-        useImperativeHandle(ref, () => ({dispatch}));
-        return <Text text={'Count: ' + count} />;
-      }
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-
-      act(() => counter.current.dispatch(INCREMENT));
-      expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      act(() => {
-        counter.current.dispatch(DECREMENT);
-        counter.current.dispatch(DECREMENT);
-        counter.current.dispatch(DECREMENT);
+          await ReactNoop.act(async () => {
+            root.render(<Foo signal={false} />);
+            setLabel('B');
+          });
+          expect(Scheduler).toHaveYielded(['Suspend!']);
+          expect(root).toMatchRenderedOutput(<span prop="A:0" />);
+
+          // Rendering again should suspend again.
+          root.render(<Foo signal={false} />);
+          expect(Scheduler).toFlushAndYield(['Suspend!']);
+
+          // Flip the signal back to "cancel" the update. However, the update to
+          // label should still proceed. It shouldn't have been dropped.
+          root.render(<Foo signal={true} />);
+          expect(Scheduler).toFlushAndYield(['B:0']);
+          expect(root).toMatchRenderedOutput(<span prop="B:0" />);
+        });
+
+        // TODO: This should probably warn
+        it.experimental(
+          'calling startTransition inside render phase',
+          async () => {
+            let startTransition;
+            function App() {
+              let [counter, setCounter] = useState(0);
+              let [_startTransition] = useTransition();
+              startTransition = _startTransition;
+
+              if (counter === 0) {
+                startTransition(() => {
+                  setCounter(c => c + 1);
+                });
+              }
+
+              return <Text text={counter} />;
+            }
+
+            const root = ReactNoop.createRoot();
+            root.render(<App />);
+            expect(Scheduler).toFlushAndYield([1]);
+            expect(root).toMatchRenderedOutput(<span prop={1} />);
+          },
+        );
       });
 
-      expect(Scheduler).toHaveYielded(['Count: -2']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: -2')]);
-    });
+      describe('useReducer', () => {
+        it('simple mount and update', () => {
+          const INCREMENT = 'INCREMENT';
+          const DECREMENT = 'DECREMENT';
+
+          function reducer(state, action) {
+            switch (action) {
+              case 'INCREMENT':
+                return state + 1;
+              case 'DECREMENT':
+                return state - 1;
+              default:
+                return state;
+            }
+          }
 
-    it('lazy init', () => {
-      const INCREMENT = 'INCREMENT';
-      const DECREMENT = 'DECREMENT';
-
-      function reducer(state, action) {
-        switch (action) {
-          case 'INCREMENT':
-            return state + 1;
-          case 'DECREMENT':
-            return state - 1;
-          default:
-            return state;
-        }
-      }
+          function Counter(props, ref) {
+            const [count, dispatch] = useReducer(reducer, 0);
+            useImperativeHandle(ref, () => ({dispatch}));
+            return <Text text={'Count: ' + count} />;
+          }
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+
+          act(() => counter.current.dispatch(INCREMENT));
+          expect(Scheduler).toHaveYielded(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          act(() => {
+            counter.current.dispatch(DECREMENT);
+            counter.current.dispatch(DECREMENT);
+            counter.current.dispatch(DECREMENT);
+          });
 
-      function Counter(props, ref) {
-        const [count, dispatch] = useReducer(reducer, props, p => {
-          Scheduler.unstable_yieldValue('Init');
-          return p.initialCount;
+          expect(Scheduler).toHaveYielded(['Count: -2']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: -2')]);
         });
-        useImperativeHandle(ref, () => ({dispatch}));
-        return <Text text={'Count: ' + count} />;
-      }
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter initialCount={10} ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['Init', 'Count: 10']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 10')]);
-
-      act(() => counter.current.dispatch(INCREMENT));
-      expect(Scheduler).toHaveYielded(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
-
-      act(() => {
-        counter.current.dispatch(DECREMENT);
-        counter.current.dispatch(DECREMENT);
-        counter.current.dispatch(DECREMENT);
-      });
 
-      expect(Scheduler).toHaveYielded(['Count: 8']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 8')]);
-    });
+        it('lazy init', () => {
+          const INCREMENT = 'INCREMENT';
+          const DECREMENT = 'DECREMENT';
+
+          function reducer(state, action) {
+            switch (action) {
+              case 'INCREMENT':
+                return state + 1;
+              case 'DECREMENT':
+                return state - 1;
+              default:
+                return state;
+            }
+          }
 
-    // Regression test for https://github.com/facebook/react/issues/14360
-    it('handles dispatches with mixed priorities', () => {
-      const INCREMENT = 'INCREMENT';
+          function Counter(props, ref) {
+            const [count, dispatch] = useReducer(reducer, props, p => {
+              Scheduler.unstable_yieldValue('Init');
+              return p.initialCount;
+            });
+            useImperativeHandle(ref, () => ({dispatch}));
+            return <Text text={'Count: ' + count} />;
+          }
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter initialCount={10} ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['Init', 'Count: 10']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 10')]);
+
+          act(() => counter.current.dispatch(INCREMENT));
+          expect(Scheduler).toHaveYielded(['Count: 11']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 11')]);
+
+          act(() => {
+            counter.current.dispatch(DECREMENT);
+            counter.current.dispatch(DECREMENT);
+            counter.current.dispatch(DECREMENT);
+          });
 
-      function reducer(state, action) {
-        return action === INCREMENT ? state + 1 : state;
-      }
+          expect(Scheduler).toHaveYielded(['Count: 8']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 8')]);
+        });
 
-      function Counter(props, ref) {
-        const [count, dispatch] = useReducer(reducer, 0);
-        useImperativeHandle(ref, () => ({dispatch}));
-        return <Text text={'Count: ' + count} />;
-      }
+        // Regression test for https://github.com/facebook/react/issues/14360
+        it('handles dispatches with mixed priorities', () => {
+          const INCREMENT = 'INCREMENT';
 
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter ref={counter} />);
+          function reducer(state, action) {
+            return action === INCREMENT ? state + 1 : state;
+          }
 
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          function Counter(props, ref) {
+            const [count, dispatch] = useReducer(reducer, 0);
+            useImperativeHandle(ref, () => ({dispatch}));
+            return <Text text={'Count: ' + count} />;
+          }
 
-      ReactNoop.batchedUpdates(() => {
-        counter.current.dispatch(INCREMENT);
-        counter.current.dispatch(INCREMENT);
-        counter.current.dispatch(INCREMENT);
-      });
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter ref={counter} />);
 
-      ReactNoop.flushSync(() => {
-        counter.current.dispatch(INCREMENT);
-      });
-      expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-      expect(Scheduler).toFlushAndYield(['Count: 4']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 4')]);
-    });
-  });
+          ReactNoop.batchedUpdates(() => {
+            counter.current.dispatch(INCREMENT);
+            counter.current.dispatch(INCREMENT);
+            counter.current.dispatch(INCREMENT);
+          });
+
+          ReactNoop.flushSync(() => {
+            counter.current.dispatch(INCREMENT);
+          });
+          expect(Scheduler).toHaveYielded(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
 
-  describe('useEffect', () => {
-    it('simple mount and update', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Passive effect [${props.count}]`);
+          expect(Scheduler).toFlushAndYield(['Count: 4']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 4')]);
         });
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-        // Effects are deferred until after the commit
-        expect(Scheduler).toFlushAndYield(['Passive effect [0]']);
       });
 
-      act(() => {
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-        // Effects are deferred until after the commit
-        expect(Scheduler).toFlushAndYield(['Passive effect [1]']);
-      });
-    });
+      describe('useEffect', () => {
+        it('simple mount and update', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Passive effect [${props.count}]`);
+            });
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+            // Effects are deferred until after the commit
+            expect(Scheduler).toFlushAndYield(['Passive effect [0]']);
+          });
 
-    it('flushes passive effects even with sibling deletions', () => {
-      function LayoutEffect(props) {
-        useLayoutEffect(() => {
-          Scheduler.unstable_yieldValue(`Layout effect`);
+          act(() => {
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+            // Effects are deferred until after the commit
+            expect(Scheduler).toFlushAndYield(['Passive effect [1]']);
+          });
         });
-        return <Text text="Layout" />;
-      }
-      function PassiveEffect(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Passive effect`);
-        }, []);
-        return <Text text="Passive" />;
-      }
-      let passive = <PassiveEffect key="p" />;
-      act(() => {
-        ReactNoop.render([<LayoutEffect key="l" />, passive]);
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Layout',
-          'Passive',
-          'Layout effect',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Layout'),
-          span('Passive'),
-        ]);
-        // Destroying the first child shouldn't prevent the passive effect from
-        // being executed
-        ReactNoop.render([passive]);
-        expect(Scheduler).toFlushAndYield(['Passive effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Passive')]);
-      });
-      // exiting act calls flushPassiveEffects(), but there are none left to flush.
-      expect(Scheduler).toHaveYielded([]);
-    });
 
-    it('flushes passive effects even if siblings schedule an update', () => {
-      function PassiveEffect(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Passive effect');
-        });
-        return <Text text="Passive" />;
-      }
-      function LayoutEffect(props) {
-        let [count, setCount] = useState(0);
-        useLayoutEffect(() => {
-          // Scheduling work shouldn't interfere with the queued passive effect
-          if (count === 0) {
-            setCount(1);
-          }
-          Scheduler.unstable_yieldValue('Layout effect ' + count);
+        it('flushes passive effects even with sibling deletions', () => {
+          function LayoutEffect(props) {
+            useLayoutEffect(() => {
+              Scheduler.unstable_yieldValue(`Layout effect`);
+            });
+            return <Text text="Layout" />;
+          }
+          function PassiveEffect(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Passive effect`);
+            }, []);
+            return <Text text="Passive" />;
+          }
+          let passive = <PassiveEffect key="p" />;
+          act(() => {
+            ReactNoop.render([<LayoutEffect key="l" />, passive]);
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Layout',
+              'Passive',
+              'Layout effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('Layout'),
+              span('Passive'),
+            ]);
+            // Destroying the first child shouldn't prevent the passive effect from
+            // being executed
+            ReactNoop.render([passive]);
+            expect(Scheduler).toFlushAndYield(['Passive effect']);
+            expect(ReactNoop.getChildren()).toEqual([span('Passive')]);
+          });
+          // exiting act calls flushPassiveEffects(), but there are none left to flush.
+          expect(Scheduler).toHaveYielded([]);
         });
-        return <Text text="Layout" />;
-      }
 
-      ReactNoop.render([<PassiveEffect key="p" />, <LayoutEffect key="l" />]);
+        it('flushes passive effects even if siblings schedule an update', () => {
+          function PassiveEffect(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue('Passive effect');
+            });
+            return <Text text="Passive" />;
+          }
+          function LayoutEffect(props) {
+            let [count, setCount] = useState(0);
+            useLayoutEffect(() => {
+              // Scheduling work shouldn't interfere with the queued passive effect
+              if (count === 0) {
+                setCount(1);
+              }
+              Scheduler.unstable_yieldValue('Layout effect ' + count);
+            });
+            return <Text text="Layout" />;
+          }
 
-      act(() => {
-        expect(Scheduler).toFlushAndYield([
-          'Passive',
-          'Layout',
-          'Layout effect 0',
-          'Passive effect',
-          'Layout',
-          'Layout effect 1',
-        ]);
-      });
+          ReactNoop.render([
+            <PassiveEffect key="p" />,
+            <LayoutEffect key="l" />,
+          ]);
 
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Passive'),
-        span('Layout'),
-      ]);
-    });
+          act(() => {
+            expect(Scheduler).toFlushAndYield([
+              'Passive',
+              'Layout',
+              'Layout effect 0',
+              'Passive effect',
+              'Layout',
+              'Layout effect 1',
+            ]);
+          });
 
-    it('flushes passive effects even if siblings schedule a new root', () => {
-      function PassiveEffect(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Passive effect');
-        }, []);
-        return <Text text="Passive" />;
-      }
-      function LayoutEffect(props) {
-        useLayoutEffect(() => {
-          Scheduler.unstable_yieldValue('Layout effect');
-          // Scheduling work shouldn't interfere with the queued passive effect
-          ReactNoop.renderToRootWithID(<Text text="New Root" />, 'root2');
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Passive'),
+            span('Layout'),
+          ]);
         });
-        return <Text text="Layout" />;
-      }
-      act(() => {
-        ReactNoop.render([<PassiveEffect key="p" />, <LayoutEffect key="l" />]);
-        expect(Scheduler).toFlushAndYield([
-          'Passive',
-          'Layout',
-          'Layout effect',
-          'Passive effect',
-          'New Root',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Passive'),
-          span('Layout'),
-        ]);
-      });
-    });
 
-    it(
-      'flushes effects serially by flushing old effects before flushing ' +
-        "new ones, if they haven't already fired",
-      () => {
-        function getCommittedText() {
-          const children = ReactNoop.getChildren();
-          if (children === null) {
-            return null;
+        it('flushes passive effects even if siblings schedule a new root', () => {
+          function PassiveEffect(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue('Passive effect');
+            }, []);
+            return <Text text="Passive" />;
           }
-          return children[0].prop;
-        }
-
-        function Counter(props) {
-          useEffect(() => {
-            Scheduler.unstable_yieldValue(
-              `Committed state when effect was fired: ${getCommittedText()}`,
-            );
+          function LayoutEffect(props) {
+            useLayoutEffect(() => {
+              Scheduler.unstable_yieldValue('Layout effect');
+              // Scheduling work shouldn't interfere with the queued passive effect
+              ReactNoop.renderToRootWithID(<Text text="New Root" />, 'root2');
+            });
+            return <Text text="Layout" />;
+          }
+          act(() => {
+            ReactNoop.render([
+              <PassiveEffect key="p" />,
+              <LayoutEffect key="l" />,
+            ]);
+            expect(Scheduler).toFlushAndYield([
+              'Passive',
+              'Layout',
+              'Layout effect',
+              'Passive effect',
+              'New Root',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('Passive'),
+              span('Layout'),
+            ]);
           });
-          return <Text text={props.count} />;
-        }
-        act(() => {
-          ReactNoop.render(<Counter count={0} />, () =>
-            Scheduler.unstable_yieldValue('Sync effect'),
-          );
-          expect(Scheduler).toFlushAndYieldThrough([0, 'Sync effect']);
-          expect(ReactNoop.getChildren()).toEqual([span(0)]);
-          // Before the effects have a chance to flush, schedule another update
-          ReactNoop.render(<Counter count={1} />, () =>
-            Scheduler.unstable_yieldValue('Sync effect'),
-          );
-          expect(Scheduler).toFlushAndYieldThrough([
-            // The previous effect flushes before the reconciliation
-            'Committed state when effect was fired: 0',
-            1,
-            'Sync effect',
-          ]);
-          expect(ReactNoop.getChildren()).toEqual([span(1)]);
         });
 
-        expect(Scheduler).toHaveYielded([
-          'Committed state when effect was fired: 1',
-        ]);
-      },
-    );
-
-    it('defers passive effect destroy functions during unmount', () => {
-      function Child({bar, foo}) {
-        React.useEffect(() => {
-          Scheduler.unstable_yieldValue('passive bar create');
-          return () => {
-            Scheduler.unstable_yieldValue('passive bar destroy');
-          };
-        }, [bar]);
-        React.useLayoutEffect(() => {
-          Scheduler.unstable_yieldValue('layout bar create');
-          return () => {
-            Scheduler.unstable_yieldValue('layout bar destroy');
-          };
-        }, [bar]);
-        React.useEffect(() => {
-          Scheduler.unstable_yieldValue('passive foo create');
-          return () => {
-            Scheduler.unstable_yieldValue('passive foo destroy');
-          };
-        }, [foo]);
-        React.useLayoutEffect(() => {
-          Scheduler.unstable_yieldValue('layout foo create');
-          return () => {
-            Scheduler.unstable_yieldValue('layout foo destroy');
-          };
-        }, [foo]);
-        Scheduler.unstable_yieldValue('render');
-        return null;
-      }
+        it(
+          'flushes effects serially by flushing old effects before flushing ' +
+            "new ones, if they haven't already fired",
+          () => {
+            function getCommittedText() {
+              const children = ReactNoop.getChildren();
+              if (children === null) {
+                return null;
+              }
+              return children[0].prop;
+            }
+
+            function Counter(props) {
+              useEffect(() => {
+                Scheduler.unstable_yieldValue(
+                  `Committed state when effect was fired: ${getCommittedText()}`,
+                );
+              });
+              return <Text text={props.count} />;
+            }
+            act(() => {
+              ReactNoop.render(<Counter count={0} />, () =>
+                Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([0, 'Sync effect']);
+              expect(ReactNoop.getChildren()).toEqual([span(0)]);
+              // Before the effects have a chance to flush, schedule another update
+              ReactNoop.render(<Counter count={1} />, () =>
+                Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([
+                // The previous effect flushes before the reconciliation
+                'Committed state when effect was fired: 0',
+                1,
+                'Sync effect',
+              ]);
+              expect(ReactNoop.getChildren()).toEqual([span(1)]);
+            });
 
-      act(() => {
-        ReactNoop.render(<Child bar={1} foo={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
+            expect(Scheduler).toHaveYielded([
+              'Committed state when effect was fired: 1',
+            ]);
+          },
         );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'render',
-          'layout bar create',
-          'layout foo create',
-          'Sync effect',
-        ]);
-        // Effects are deferred until after the commit
-        expect(Scheduler).toFlushAndYield([
-          'passive bar create',
-          'passive foo create',
-        ]);
-      });
-
-      // This update is exists to test an internal implementation detail:
-      // Effects without updating dependencies lose their layout/passive tag during an update.
-      act(() => {
-        ReactNoop.render(<Child bar={1} foo={2} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'render',
-          'layout foo destroy',
-          'layout foo create',
-          'Sync effect',
-        ]);
-        // Effects are deferred until after the commit
-        expect(Scheduler).toFlushAndYield([
-          'passive foo destroy',
-          'passive foo create',
-        ]);
-      });
 
-      // Unmount the component and verify that passive destroy functions are deferred until post-commit.
-      act(() => {
-        ReactNoop.render(null, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'layout bar destroy',
-          'layout foo destroy',
-          'Sync effect',
-        ]);
-        // Effects are deferred until after the commit
-        expect(Scheduler).toFlushAndYield([
-          'passive bar destroy',
-          'passive foo destroy',
-        ]);
-      });
-    });
+        if (
+          deferPassiveEffectCleanupDuringUnmount &&
+          runAllPassiveEffectDestroysBeforeCreates
+        ) {
+          it('defers passive effect destroy functions during unmount', () => {
+            function Child({bar, foo}) {
+              React.useEffect(() => {
+                Scheduler.unstable_yieldValue('passive bar create');
+                return () => {
+                  Scheduler.unstable_yieldValue('passive bar destroy');
+                };
+              }, [bar]);
+              React.useLayoutEffect(() => {
+                Scheduler.unstable_yieldValue('layout bar create');
+                return () => {
+                  Scheduler.unstable_yieldValue('layout bar destroy');
+                };
+              }, [bar]);
+              React.useEffect(() => {
+                Scheduler.unstable_yieldValue('passive foo create');
+                return () => {
+                  Scheduler.unstable_yieldValue('passive foo destroy');
+                };
+              }, [foo]);
+              React.useLayoutEffect(() => {
+                Scheduler.unstable_yieldValue('layout foo create');
+                return () => {
+                  Scheduler.unstable_yieldValue('layout foo destroy');
+                };
+              }, [foo]);
+              Scheduler.unstable_yieldValue('render');
+              return null;
+            }
+
+            act(() => {
+              ReactNoop.render(<Child bar={1} foo={1} />, () =>
+                Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([
+                'render',
+                'layout bar create',
+                'layout foo create',
+                'Sync effect',
+              ]);
+              // Effects are deferred until after the commit
+              expect(Scheduler).toFlushAndYield([
+                'passive bar create',
+                'passive foo create',
+              ]);
+            });
 
-    it('updates have async priority', () => {
-      function Counter(props) {
-        const [count, updateCount] = useState('(empty)');
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
-          updateCount(props.count);
-        }, [props.count]);
-        return <Text text={'Count: ' + count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Count: (empty)',
-          'Sync effect',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
-        ReactNoop.flushPassiveEffects();
-        expect(Scheduler).toHaveYielded(['Schedule update [0]']);
-        expect(Scheduler).toFlushAndYield(['Count: 0']);
-      });
+            // This update is exists to test an internal implementation detail:
+            // Effects without updating dependencies lose their layout/passive tag during an update.
+            act(() => {
+              ReactNoop.render(<Child bar={1} foo={2} />, () =>
+                Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([
+                'render',
+                'layout foo destroy',
+                'layout foo create',
+                'Sync effect',
+              ]);
+              // Effects are deferred until after the commit
+              expect(Scheduler).toFlushAndYield([
+                'passive foo destroy',
+                'passive foo create',
+              ]);
+            });
 
-      act(() => {
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-        ReactNoop.flushPassiveEffects();
-        expect(Scheduler).toHaveYielded(['Schedule update [1]']);
-        expect(Scheduler).toFlushAndYield(['Count: 1']);
-      });
-    });
+            // Unmount the component and verify that passive destroy functions are deferred until post-commit.
+            act(() => {
+              ReactNoop.render(null, () =>
+                Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([
+                'layout bar destroy',
+                'layout foo destroy',
+                'Sync effect',
+              ]);
+              // Effects are deferred until after the commit
+              expect(Scheduler).toFlushAndYield([
+                'passive bar destroy',
+                'passive foo destroy',
+              ]);
+            });
+          });
+        }
 
-    it('updates have async priority even if effects are flushed early', () => {
-      function Counter(props) {
-        const [count, updateCount] = useState('(empty)');
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
-          updateCount(props.count);
-        }, [props.count]);
-        return <Text text={'Count: ' + count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Count: (empty)',
-          'Sync effect',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+        it('updates have async priority', () => {
+          function Counter(props) {
+            const [count, updateCount] = useState('(empty)');
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
+              updateCount(props.count);
+            }, [props.count]);
+            return <Text text={'Count: ' + count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: (empty)',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+            ReactNoop.flushPassiveEffects();
+            expect(Scheduler).toHaveYielded(['Schedule update [0]']);
+            expect(Scheduler).toFlushAndYield(['Count: 0']);
+          });
 
-        // Rendering again should flush the previous commit's effects
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Schedule update [0]',
-          'Count: 0',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+          act(() => {
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+            ReactNoop.flushPassiveEffects();
+            expect(Scheduler).toHaveYielded(['Schedule update [1]']);
+            expect(Scheduler).toFlushAndYield(['Count: 1']);
+          });
+        });
 
-        expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-        ReactNoop.flushPassiveEffects();
-        expect(Scheduler).toHaveYielded(['Schedule update [1]']);
-        expect(Scheduler).toFlushAndYield(['Count: 1']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      });
-    });
+        it('updates have async priority even if effects are flushed early', () => {
+          function Counter(props) {
+            const [count, updateCount] = useState('(empty)');
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
+              updateCount(props.count);
+            }, [props.count]);
+            return <Text text={'Count: ' + count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: (empty)',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+
+            // Rendering again should flush the previous commit's effects
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Schedule update [0]',
+              'Count: 0',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+
+            expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+            ReactNoop.flushPassiveEffects();
+            expect(Scheduler).toHaveYielded(['Schedule update [1]']);
+            expect(Scheduler).toFlushAndYield(['Count: 1']);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          });
+        });
 
-    it('flushes passive effects when flushing discrete updates', () => {
-      let _updateCount;
-      function Counter(props) {
-        const [count, updateCount] = useState(0);
-        _updateCount = updateCount;
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Will set count to 1`);
-          updateCount(1);
-        }, []);
-        return <Text text={'Count: ' + count} />;
-      }
+        it('flushes passive effects when flushing discrete updates', () => {
+          let _updateCount;
+          function Counter(props) {
+            const [count, updateCount] = useState(0);
+            _updateCount = updateCount;
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Will set count to 1`);
+              updateCount(1);
+            }, []);
+            return <Text text={'Count: ' + count} />;
+          }
 
-      // we explicitly wait for missing act() warnings here since
-      // it's a lot harder to simulate this condition inside an act scope
-      expect(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      }).toErrorDev(['An update to Counter ran an effect']);
+          // we explicitly wait for missing act() warnings here since
+          // it's a lot harder to simulate this condition inside an act scope
+          expect(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          }).toErrorDev(['An update to Counter ran an effect']);
+
+          // A discrete event forces the passive effect to be flushed --
+          // updateCount(1) happens first, so 2 wins.
+          ReactNoop.flushDiscreteUpdates();
+          ReactNoop.discreteUpdates(() => {
+            // (use batchedUpdates to silence the act() warning)
+            ReactNoop.batchedUpdates(() => {
+              _updateCount(2);
+            });
+          });
+          expect(Scheduler).toHaveYielded(['Will set count to 1']);
+          expect(() => {
+            expect(Scheduler).toFlushAndYield(['Count: 2']);
+          }).toErrorDev([
+            'An update to Counter ran an effect',
+            'An update to Counter ran an effect',
+          ]);
 
-      // A discrete event forces the passive effect to be flushed --
-      // updateCount(1) happens first, so 2 wins.
-      ReactNoop.flushDiscreteUpdates();
-      ReactNoop.discreteUpdates(() => {
-        // (use batchedUpdates to silence the act() warning)
-        ReactNoop.batchedUpdates(() => {
-          _updateCount(2);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 2')]);
         });
-      });
-      expect(Scheduler).toHaveYielded(['Will set count to 1']);
-      expect(() => {
-        expect(Scheduler).toFlushAndYield(['Count: 2']);
-      }).toErrorDev([
-        'An update to Counter ran an effect',
-        'An update to Counter ran an effect',
-      ]);
-
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 2')]);
-    });
 
-    it('flushes passive effects when flushing discrete updates (with tracing)', () => {
-      const onInteractionScheduledWorkCompleted = jest.fn();
-      const onWorkCanceled = jest.fn();
-      SchedulerTracing.unstable_subscribe({
-        onInteractionScheduledWorkCompleted,
-        onInteractionTraced: jest.fn(),
-        onWorkCanceled,
-        onWorkScheduled: jest.fn(),
-        onWorkStarted: jest.fn(),
-        onWorkStopped: jest.fn(),
-      });
+        it('flushes passive effects when flushing discrete updates (with tracing)', () => {
+          const onInteractionScheduledWorkCompleted = jest.fn();
+          const onWorkCanceled = jest.fn();
+          SchedulerTracing.unstable_subscribe({
+            onInteractionScheduledWorkCompleted,
+            onInteractionTraced: jest.fn(),
+            onWorkCanceled,
+            onWorkScheduled: jest.fn(),
+            onWorkStarted: jest.fn(),
+            onWorkStopped: jest.fn(),
+          });
 
-      let _updateCount;
-      function Counter(props) {
-        const [count, updateCount] = useState(0);
-        _updateCount = updateCount;
-        useEffect(() => {
-          expect(SchedulerTracing.unstable_getCurrent()).toMatchInteractions([
-            tracingEvent,
-          ]);
-          Scheduler.unstable_yieldValue(`Will set count to 1`);
-          updateCount(1);
-        }, []);
-        return <Text text={'Count: ' + count} />;
-      }
+          let _updateCount;
+          function Counter(props) {
+            const [count, updateCount] = useState(0);
+            _updateCount = updateCount;
+            useEffect(() => {
+              expect(
+                SchedulerTracing.unstable_getCurrent(),
+              ).toMatchInteractions([tracingEvent]);
+              Scheduler.unstable_yieldValue(`Will set count to 1`);
+              updateCount(1);
+            }, []);
+            return <Text text={'Count: ' + count} />;
+          }
 
-      const tracingEvent = {id: 0, name: 'hello', timestamp: 0};
-      // we explicitly wait for missing act() warnings here since
-      // it's a lot harder to simulate this condition inside an act scope
-      expect(() => {
-        SchedulerTracing.unstable_trace(
-          tracingEvent.name,
-          tracingEvent.timestamp,
-          () => {
-            ReactNoop.render(<Counter count={0} />, () =>
-              Scheduler.unstable_yieldValue('Sync effect'),
+          const tracingEvent = {id: 0, name: 'hello', timestamp: 0};
+          // we explicitly wait for missing act() warnings here since
+          // it's a lot harder to simulate this condition inside an act scope
+          expect(() => {
+            SchedulerTracing.unstable_trace(
+              tracingEvent.name,
+              tracingEvent.timestamp,
+              () => {
+                ReactNoop.render(<Counter count={0} />, () =>
+                  Scheduler.unstable_yieldValue('Sync effect'),
+                );
+              },
             );
-          },
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      }).toErrorDev(['An update to Counter ran an effect']);
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          }).toErrorDev(['An update to Counter ran an effect']);
+
+          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(0);
+
+          // A discrete event forces the passive effect to be flushed --
+          // updateCount(1) happens first, so 2 wins.
+          ReactNoop.flushDiscreteUpdates();
+          ReactNoop.discreteUpdates(() => {
+            // (use batchedUpdates to silence the act() warning)
+            ReactNoop.batchedUpdates(() => {
+              _updateCount(2);
+            });
+          });
+          expect(Scheduler).toHaveYielded(['Will set count to 1']);
+          expect(() => {
+            expect(Scheduler).toFlushAndYield(['Count: 2']);
+          }).toErrorDev([
+            'An update to Counter ran an effect',
+            'An update to Counter ran an effect',
+          ]);
 
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(0);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 2')]);
 
-      // A discrete event forces the passive effect to be flushed --
-      // updateCount(1) happens first, so 2 wins.
-      ReactNoop.flushDiscreteUpdates();
-      ReactNoop.discreteUpdates(() => {
-        // (use batchedUpdates to silence the act() warning)
-        ReactNoop.batchedUpdates(() => {
-          _updateCount(2);
+          expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
+          expect(onWorkCanceled).toHaveBeenCalledTimes(0);
         });
-      });
-      expect(Scheduler).toHaveYielded(['Will set count to 1']);
-      expect(() => {
-        expect(Scheduler).toFlushAndYield(['Count: 2']);
-      }).toErrorDev([
-        'An update to Counter ran an effect',
-        'An update to Counter ran an effect',
-      ]);
-
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 2')]);
-
-      expect(onInteractionScheduledWorkCompleted).toHaveBeenCalledTimes(1);
-      expect(onWorkCanceled).toHaveBeenCalledTimes(0);
-    });
 
-    it(
-      'in legacy mode, useEffect is deferred and updates finish synchronously ' +
-        '(in a single batch)',
-      () => {
-        function Counter(props) {
-          const [count, updateCount] = useState('(empty)');
-          useEffect(() => {
-            // Update multiple times. These should all be batched together in
-            // a single render.
-            updateCount(props.count);
-            updateCount(props.count);
-            updateCount(props.count);
-            updateCount(props.count);
-            updateCount(props.count);
-            updateCount(props.count);
-          }, [props.count]);
-          return <Text text={'Count: ' + count} />;
-        }
-        act(() => {
-          ReactNoop.renderLegacySyncRoot(<Counter count={0} />);
-          // Even in legacy mode, effects are deferred until after paint
-          expect(Scheduler).toFlushAndYieldThrough(['Count: (empty)']);
-          expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
-        });
+        it(
+          'in legacy mode, useEffect is deferred and updates finish synchronously ' +
+            '(in a single batch)',
+          () => {
+            function Counter(props) {
+              const [count, updateCount] = useState('(empty)');
+              useEffect(() => {
+                // Update multiple times. These should all be batched together in
+                // a single render.
+                updateCount(props.count);
+                updateCount(props.count);
+                updateCount(props.count);
+                updateCount(props.count);
+                updateCount(props.count);
+                updateCount(props.count);
+              }, [props.count]);
+              return <Text text={'Count: ' + count} />;
+            }
+            act(() => {
+              ReactNoop.renderLegacySyncRoot(<Counter count={0} />);
+              // Even in legacy mode, effects are deferred until after paint
+              expect(Scheduler).toFlushAndYieldThrough(['Count: (empty)']);
+              expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+            });
 
-        // effects get fored on exiting act()
-        // There were multiple updates, but there should only be a
-        // single render
-        expect(Scheduler).toHaveYielded(['Count: 0']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      },
-    );
-
-    it('flushSync is not allowed', () => {
-      function Counter(props) {
-        const [count, updateCount] = useState('(empty)');
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
-          ReactNoop.flushSync(() => {
-            updateCount(props.count);
-          });
-        }, [props.count]);
-        return <Text text={'Count: ' + count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
+            // effects get fored on exiting act()
+            // There were multiple updates, but there should only be a
+            // single render
+            expect(Scheduler).toHaveYielded(['Count: 0']);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          },
         );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Count: (empty)',
-          'Sync effect',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
-        expect(() => {
-          ReactNoop.flushPassiveEffects();
-        }).toThrow('flushSync was called from inside a lifecycle method');
-      });
-    });
 
-    it('unmounts previous effect', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
-          };
+        it('flushSync is not allowed', () => {
+          function Counter(props) {
+            const [count, updateCount] = useState('(empty)');
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Schedule update [${props.count}]`);
+              ReactNoop.flushSync(() => {
+                updateCount(props.count);
+              });
+            }, [props.count]);
+            return <Text text={'Count: ' + count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: (empty)',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: (empty)')]);
+            expect(() => {
+              ReactNoop.flushPassiveEffects();
+            }).toThrow('flushSync was called from inside a lifecycle method');
+          });
         });
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      });
 
-      expect(Scheduler).toHaveYielded(['Did create [0]']);
+        it('unmounts previous effect', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
+              };
+            });
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          });
 
-      act(() => {
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      });
+          expect(Scheduler).toHaveYielded(['Did create [0]']);
 
-      expect(Scheduler).toHaveYielded(['Did destroy [0]', 'Did create [1]']);
-    });
+          act(() => {
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          });
 
-    it('unmounts on deletion', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
-          };
+          expect(Scheduler).toHaveYielded([
+            'Did destroy [0]',
+            'Did create [1]',
+          ]);
         });
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      });
 
-      expect(Scheduler).toHaveYielded(['Did create [0]']);
+        it('unmounts on deletion', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
+              };
+            });
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          });
 
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushAndYield(['Did destroy [0]']);
-      expect(ReactNoop.getChildren()).toEqual([]);
-    });
+          expect(Scheduler).toHaveYielded(['Did create [0]']);
 
-    it('unmounts on deletion after skipped effect', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
-          };
-        }, []);
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      });
+          ReactNoop.render(null);
+          expect(Scheduler).toFlushAndYield(['Did destroy [0]']);
+          expect(ReactNoop.getChildren()).toEqual([]);
+        });
 
-      expect(Scheduler).toHaveYielded(['Did create [0]']);
+        it('unmounts on deletion after skipped effect', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Did create [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Did destroy [${props.count}]`);
+              };
+            }, []);
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          });
 
-      act(() => {
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      });
+          expect(Scheduler).toHaveYielded(['Did create [0]']);
 
-      expect(Scheduler).toHaveYielded([]);
+          act(() => {
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          });
 
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushAndYield(['Did destroy [0]']);
-      expect(ReactNoop.getChildren()).toEqual([]);
-    });
+          expect(Scheduler).toHaveYielded([]);
 
-    it('always fires effects if no dependencies are provided', () => {
-      function effect() {
-        Scheduler.unstable_yieldValue(`Did create`);
-        return () => {
-          Scheduler.unstable_yieldValue(`Did destroy`);
-        };
-      }
-      function Counter(props) {
-        useEffect(effect);
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      });
+          ReactNoop.render(null);
+          expect(Scheduler).toFlushAndYield(['Did destroy [0]']);
+          expect(ReactNoop.getChildren()).toEqual([]);
+        });
 
-      expect(Scheduler).toHaveYielded(['Did create']);
+        it('always fires effects if no dependencies are provided', () => {
+          function effect() {
+            Scheduler.unstable_yieldValue(`Did create`);
+            return () => {
+              Scheduler.unstable_yieldValue(`Did destroy`);
+            };
+          }
+          function Counter(props) {
+            useEffect(effect);
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          });
 
-      act(() => {
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      });
+          expect(Scheduler).toHaveYielded(['Did create']);
 
-      expect(Scheduler).toHaveYielded(['Did destroy', 'Did create']);
+          act(() => {
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          });
 
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushAndYield(['Did destroy']);
-      expect(ReactNoop.getChildren()).toEqual([]);
-    });
+          expect(Scheduler).toHaveYielded(['Did destroy', 'Did create']);
 
-    it('skips effect if inputs have not changed', () => {
-      function Counter(props) {
-        const text = `${props.label}: ${props.count}`;
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Did create [${text}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Did destroy [${text}]`);
-          };
-        }, [props.label, props.count]);
-        return <Text text={text} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter label="Count" count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-      });
+          ReactNoop.render(null);
+          expect(Scheduler).toFlushAndYield(['Did destroy']);
+          expect(ReactNoop.getChildren()).toEqual([]);
+        });
 
-      expect(Scheduler).toHaveYielded(['Did create [Count: 0]']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+        it('skips effect if inputs have not changed', () => {
+          function Counter(props) {
+            const text = `${props.label}: ${props.count}`;
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Did create [${text}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Did destroy [${text}]`);
+              };
+            }, [props.label, props.count]);
+            return <Text text={text} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter label="Count" count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+          });
 
-      act(() => {
-        ReactNoop.render(<Counter label="Count" count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        // Count changed
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      });
+          expect(Scheduler).toHaveYielded(['Did create [Count: 0]']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
 
-      expect(Scheduler).toHaveYielded([
-        'Did destroy [Count: 0]',
-        'Did create [Count: 1]',
-      ]);
+          act(() => {
+            ReactNoop.render(<Counter label="Count" count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            // Count changed
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          });
 
-      act(() => {
-        ReactNoop.render(<Counter label="Count" count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        // Nothing changed, so no effect should have fired
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-      });
+          expect(Scheduler).toHaveYielded([
+            'Did destroy [Count: 0]',
+            'Did create [Count: 1]',
+          ]);
 
-      expect(Scheduler).toHaveYielded([]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          act(() => {
+            ReactNoop.render(<Counter label="Count" count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            // Nothing changed, so no effect should have fired
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+          });
 
-      act(() => {
-        ReactNoop.render(<Counter label="Total" count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        // Label changed
-        expect(Scheduler).toFlushAndYieldThrough(['Total: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Total: 1')]);
-      });
+          expect(Scheduler).toHaveYielded([]);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
 
-      expect(Scheduler).toHaveYielded([
-        'Did destroy [Count: 1]',
-        'Did create [Total: 1]',
-      ]);
-    });
+          act(() => {
+            ReactNoop.render(<Counter label="Total" count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            // Label changed
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Total: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Total: 1')]);
+          });
 
-    it('multiple effects', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Did commit 1 [${props.count}]`);
-        });
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Did commit 2 [${props.count}]`);
+          expect(Scheduler).toHaveYielded([
+            'Did destroy [Count: 1]',
+            'Did create [Total: 1]',
+          ]);
         });
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      });
 
-      expect(Scheduler).toHaveYielded(['Did commit 1 [0]', 'Did commit 2 [0]']);
+        it('multiple effects', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Did commit 1 [${props.count}]`);
+            });
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Did commit 2 [${props.count}]`);
+            });
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          });
 
-      act(() => {
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      });
-      expect(Scheduler).toHaveYielded(['Did commit 1 [1]', 'Did commit 2 [1]']);
-    });
+          expect(Scheduler).toHaveYielded([
+            'Did commit 1 [0]',
+            'Did commit 2 [0]',
+          ]);
 
-    it('unmounts all previous effects before creating any new ones', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
-          };
-        });
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
-          };
+          act(() => {
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          });
+          expect(Scheduler).toHaveYielded([
+            'Did commit 1 [1]',
+            'Did commit 2 [1]',
+          ]);
         });
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      });
 
-      expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+        it('unmounts all previous effects before creating any new ones', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
+              };
+            });
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
+              };
+            });
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          });
 
-      act(() => {
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      });
-      expect(Scheduler).toHaveYielded([
-        'Unmount A [0]',
-        'Unmount B [0]',
-        'Mount A [1]',
-        'Mount B [1]',
-      ]);
-    });
+          expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
 
-    it('unmounts all previous effects between siblings before creating any new ones', () => {
-      function Counter({count, label}) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Mount ${label} [${count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Unmount ${label} [${count}]`);
-          };
+          act(() => {
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          });
+          expect(Scheduler).toHaveYielded([
+            'Unmount A [0]',
+            'Unmount B [0]',
+            'Mount A [1]',
+            'Mount B [1]',
+          ]);
         });
-        return <Text text={`${label} ${count}`} />;
-      }
-      act(() => {
-        ReactNoop.render(
-          <React.Fragment>
-            <Counter label="A" count={0} />
-            <Counter label="B" count={0} />
-          </React.Fragment>,
-          () => Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['A 0', 'B 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('A 0'), span('B 0')]);
-      });
 
-      expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+        if (runAllPassiveEffectDestroysBeforeCreates) {
+          it('unmounts all previous effects between siblings before creating any new ones', () => {
+            function Counter({count, label}) {
+              useEffect(() => {
+                Scheduler.unstable_yieldValue(`Mount ${label} [${count}]`);
+                return () => {
+                  Scheduler.unstable_yieldValue(`Unmount ${label} [${count}]`);
+                };
+              });
+              return <Text text={`${label} ${count}`} />;
+            }
+            act(() => {
+              ReactNoop.render(
+                <React.Fragment>
+                  <Counter label="A" count={0} />
+                  <Counter label="B" count={0} />
+                </React.Fragment>,
+                () => Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([
+                'A 0',
+                'B 0',
+                'Sync effect',
+              ]);
+              expect(ReactNoop.getChildren()).toEqual([
+                span('A 0'),
+                span('B 0'),
+              ]);
+            });
 
-      act(() => {
-        ReactNoop.render(
-          <React.Fragment>
-            <Counter label="A" count={1} />
-            <Counter label="B" count={1} />
-          </React.Fragment>,
-          () => Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['A 1', 'B 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('A 1'), span('B 1')]);
-      });
-      expect(Scheduler).toHaveYielded([
-        'Unmount A [0]',
-        'Unmount B [0]',
-        'Mount A [1]',
-        'Mount B [1]',
-      ]);
-
-      act(() => {
-        ReactNoop.render(
-          <React.Fragment>
-            <Counter label="B" count={2} />
-            <Counter label="C" count={0} />
-          </React.Fragment>,
-          () => Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['B 2', 'C 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('B 2'), span('C 0')]);
-      });
-      expect(Scheduler).toHaveYielded([
-        'Unmount A [1]',
-        'Unmount B [1]',
-        'Mount B [2]',
-        'Mount C [0]',
-      ]);
-    });
+            expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+
+            act(() => {
+              ReactNoop.render(
+                <React.Fragment>
+                  <Counter label="A" count={1} />
+                  <Counter label="B" count={1} />
+                </React.Fragment>,
+                () => Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([
+                'A 1',
+                'B 1',
+                'Sync effect',
+              ]);
+              expect(ReactNoop.getChildren()).toEqual([
+                span('A 1'),
+                span('B 1'),
+              ]);
+            });
+            expect(Scheduler).toHaveYielded([
+              'Unmount A [0]',
+              'Unmount B [0]',
+              'Mount A [1]',
+              'Mount B [1]',
+            ]);
+
+            act(() => {
+              ReactNoop.render(
+                <React.Fragment>
+                  <Counter label="B" count={2} />
+                  <Counter label="C" count={0} />
+                </React.Fragment>,
+                () => Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([
+                'B 2',
+                'C 0',
+                'Sync effect',
+              ]);
+              expect(ReactNoop.getChildren()).toEqual([
+                span('B 2'),
+                span('C 0'),
+              ]);
+            });
+            expect(Scheduler).toHaveYielded([
+              'Unmount A [1]',
+              'Unmount B [1]',
+              'Mount B [2]',
+              'Mount C [0]',
+            ]);
+          });
+        }
 
-    it('handles errors on mount', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
-          };
+        it('handles errors in create on mount', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
+              };
+            });
+            useEffect(() => {
+              Scheduler.unstable_yieldValue('Oops!');
+              throw new Error('Oops!');
+              // eslint-disable-next-line no-unreachable
+              Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
+              };
+            });
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+            expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
+          });
+
+          expect(Scheduler).toHaveYielded([
+            'Mount A [0]',
+            'Oops!',
+            // Clean up effect A. There's no effect B to clean-up, because it
+            // never mounted.
+            'Unmount A [0]',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([]);
         });
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Oops!');
-          throw new Error('Oops!');
-          // eslint-disable-next-line no-unreachable
-          Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
-          };
+
+        it('handles errors in create on update', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
+              };
+            });
+            useEffect(() => {
+              if (props.count === 1) {
+                Scheduler.unstable_yieldValue('Oops!');
+                throw new Error('Oops!');
+              }
+              Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
+              };
+            });
+            return <Text text={'Count: ' + props.count} />;
+          }
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+            ReactNoop.flushPassiveEffects();
+            expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+          });
+
+          act(() => {
+            // This update will trigger an error
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 1',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+            expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
+            expect(Scheduler).toHaveYielded(
+              deferPassiveEffectCleanupDuringUnmount &&
+                runAllPassiveEffectDestroysBeforeCreates
+                ? ['Unmount A [0]', 'Unmount B [0]', 'Mount A [1]', 'Oops!']
+                : [
+                    'Unmount A [0]',
+                    'Unmount B [0]',
+                    'Mount A [1]',
+                    'Oops!',
+                    'Unmount A [1]',
+                  ],
+            );
+            expect(ReactNoop.getChildren()).toEqual([]);
+          });
+          if (
+            deferPassiveEffectCleanupDuringUnmount &&
+            runAllPassiveEffectDestroysBeforeCreates
+          ) {
+            expect(Scheduler).toHaveYielded([
+              // Clean up effect A runs passively on unmount.
+              // There's no effect B to clean-up, because it never mounted.
+              'Unmount A [1]',
+            ]);
+          }
         });
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
-      });
 
-      expect(Scheduler).toHaveYielded([
-        'Mount A [0]',
-        'Oops!',
-        // Clean up effect A. There's no effect B to clean-up, because it
-        // never mounted.
-        'Unmount A [0]',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([]);
-    });
+        it('handles errors in destroy on update', () => {
+          function Counter(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue('Oops!');
+                if (props.count === 0) {
+                  throw new Error('Oops!');
+                }
+              };
+            });
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
+              return () => {
+                Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
+              };
+            });
+            return <Text text={'Count: ' + props.count} />;
+          }
 
-    it('handles errors on update', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Unmount A [${props.count}]`);
-          };
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Count: 0',
+              'Sync effect',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+            ReactNoop.flushPassiveEffects();
+            expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
+          });
+
+          if (
+            deferPassiveEffectCleanupDuringUnmount &&
+            runAllPassiveEffectDestroysBeforeCreates
+          ) {
+            act(() => {
+              // This update will trigger an error during passive effect unmount
+              ReactNoop.render(<Counter count={1} />, () =>
+                Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(Scheduler).toFlushAndYieldThrough([
+                'Count: 1',
+                'Sync effect',
+              ]);
+              expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+              expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
+
+              // This branch enables a feature flag that flushes all passive destroys in a
+              // separate pass before flushing any passive creates.
+              // A result of this two-pass flush is that an error thrown from unmount does
+              // not block the subsequent create functions from being run.
+              expect(Scheduler).toHaveYielded([
+                'Oops!',
+                'Unmount B [0]',
+                'Mount A [1]',
+                'Mount B [1]',
+              ]);
+            });
+
+            // <Counter> gets unmounted because an error is thrown above.
+            // The remaining destroy functions are run later on unmount, since they're passive.
+            // In this case, one of them throws again (because of how the test is written).
+            expect(Scheduler).toHaveYielded(['Oops!', 'Unmount B [1]']);
+            expect(ReactNoop.getChildren()).toEqual([]);
+          } else {
+            act(() => {
+              // This update will trigger an error during passive effect unmount
+              ReactNoop.render(<Counter count={1} />, () =>
+                Scheduler.unstable_yieldValue('Sync effect'),
+              );
+              expect(() => {
+                expect(Scheduler).toFlushAndYield(['Count: 1', 'Sync effect']);
+              }).toThrow('Oops!');
+              expect(ReactNoop.getChildren()).toEqual([]);
+              ReactNoop.flushPassiveEffects();
+            });
+          }
         });
-        useEffect(() => {
-          if (props.count === 1) {
-            Scheduler.unstable_yieldValue('Oops!');
-            throw new Error('Oops!');
-          }
-          Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
-          };
+
+        it('works with memo', () => {
+          function Counter({count}) {
+            useLayoutEffect(() => {
+              Scheduler.unstable_yieldValue('Mount: ' + count);
+              return () => Scheduler.unstable_yieldValue('Unmount: ' + count);
+            });
+            return <Text text={'Count: ' + count} />;
+          }
+          Counter = memo(Counter);
+
+          ReactNoop.render(<Counter count={0} />, () =>
+            Scheduler.unstable_yieldValue('Sync effect'),
+          );
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Count: 0',
+            'Mount: 0',
+            'Sync effect',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.unstable_yieldValue('Sync effect'),
+          );
+          expect(Scheduler).toFlushAndYieldThrough([
+            'Count: 1',
+            'Unmount: 0',
+            'Mount: 1',
+            'Sync effect',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+
+          ReactNoop.render(null);
+          expect(Scheduler).toFlushAndYieldThrough(['Unmount: 1']);
+          expect(ReactNoop.getChildren()).toEqual([]);
         });
-        return <Text text={'Count: ' + props.count} />;
-      }
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-        ReactNoop.flushPassiveEffects();
-        expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
       });
 
-      act(() => {
-        // This update will trigger an error
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
-        expect(Scheduler).toHaveYielded([
-          'Unmount A [0]',
-          'Unmount B [0]',
-          'Mount A [1]',
-          'Oops!',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([]);
-      });
-      expect(Scheduler).toHaveYielded([
-        // Clean up effect A runs passively on unmount.
-        // There's no effect B to clean-up, because it never mounted.
-        'Unmount A [1]',
-      ]);
-    });
+      describe('useLayoutEffect', () => {
+        it('fires layout effects after the host has been mutated', () => {
+          function getCommittedText() {
+            const yields = Scheduler.unstable_clearYields();
+            const children = ReactNoop.getChildren();
+            Scheduler.unstable_yieldValue(yields);
+            if (children === null) {
+              return null;
+            }
+            return children[0].prop;
+          }
 
-    it('handles errors on unmount', () => {
-      function Counter(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Mount A [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue('Oops!');
-            throw new Error('Oops!');
-          };
-        });
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(`Mount B [${props.count}]`);
-          return () => {
-            Scheduler.unstable_yieldValue(`Unmount B [${props.count}]`);
-          };
-        });
-        return <Text text={'Count: ' + props.count} />;
-      }
+          function Counter(props) {
+            useLayoutEffect(() => {
+              Scheduler.unstable_yieldValue(`Current: ${getCommittedText()}`);
+            });
+            return <Text text={props.count} />;
+          }
 
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 0', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-        ReactNoop.flushPassiveEffects();
-        expect(Scheduler).toHaveYielded(['Mount A [0]', 'Mount B [0]']);
-      });
+          ReactNoop.render(<Counter count={0} />, () =>
+            Scheduler.unstable_yieldValue('Sync effect'),
+          );
+          expect(Scheduler).toFlushAndYieldThrough([
+            [0],
+            'Current: 0',
+            'Sync effect',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span(0)]);
 
-      act(() => {
-        // This update will trigger an error during passive effect unmount
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Count: 1', 'Sync effect']);
-        expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-        expect(() => ReactNoop.flushPassiveEffects()).toThrow('Oops');
-
-        // This tests enables a feature flag that flushes all passive destroys in a
-        // separate pass before flushing any passive creates.
-        // A result of this two-pass flush is that an error thrown from unmount does
-        // not block the subsequent create functions from being run.
-        expect(Scheduler).toHaveYielded([
-          'Oops!',
-          'Unmount B [0]',
-          'Mount A [1]',
-          'Mount B [1]',
-        ]);
-      });
+          ReactNoop.render(<Counter count={1} />, () =>
+            Scheduler.unstable_yieldValue('Sync effect'),
+          );
+          expect(Scheduler).toFlushAndYieldThrough([
+            [1],
+            'Current: 1',
+            'Sync effect',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span(1)]);
+        });
 
-      // <Counter> gets unmounted because an error is thrown above.
-      // The remaining destroy functions are run later on unmount, since they're passive.
-      // In this case, one of them throws again (because of how the test is written).
-      expect(Scheduler).toHaveYielded(['Oops!', 'Unmount B [1]']);
-      expect(ReactNoop.getChildren()).toEqual([]);
-    });
+        it('force flushes passive effects before firing new layout effects', () => {
+          let committedText = '(empty)';
+
+          function Counter(props) {
+            useLayoutEffect(() => {
+              // Normally this would go in a mutation effect, but this test
+              // intentionally omits a mutation effect.
+              committedText = props.count + '';
+
+              Scheduler.unstable_yieldValue(
+                `Mount layout [current: ${committedText}]`,
+              );
+              return () => {
+                Scheduler.unstable_yieldValue(
+                  `Unmount layout [current: ${committedText}]`,
+                );
+              };
+            });
+            useEffect(() => {
+              Scheduler.unstable_yieldValue(
+                `Mount normal [current: ${committedText}]`,
+              );
+              return () => {
+                Scheduler.unstable_yieldValue(
+                  `Unmount normal [current: ${committedText}]`,
+                );
+              };
+            });
+            return null;
+          }
+
+          act(() => {
+            ReactNoop.render(<Counter count={0} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Mount layout [current: 0]',
+              'Sync effect',
+            ]);
+            expect(committedText).toEqual('0');
+            ReactNoop.render(<Counter count={1} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough([
+              'Mount normal [current: 0]',
+              'Unmount layout [current: 0]',
+              'Mount layout [current: 1]',
+              'Sync effect',
+            ]);
+            expect(committedText).toEqual('1');
+          });
 
-    it('works with memo', () => {
-      function Counter({count}) {
-        useLayoutEffect(() => {
-          Scheduler.unstable_yieldValue('Mount: ' + count);
-          return () => Scheduler.unstable_yieldValue('Unmount: ' + count);
+          expect(Scheduler).toHaveYielded([
+            'Unmount normal [current: 1]',
+            'Mount normal [current: 1]',
+          ]);
         });
-        return <Text text={'Count: ' + count} />;
-      }
-      Counter = memo(Counter);
-
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Count: 0',
-        'Mount: 0',
-        'Sync effect',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        'Count: 1',
-        'Unmount: 0',
-        'Mount: 1',
-        'Sync effect',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-
-      ReactNoop.render(null);
-      expect(Scheduler).toFlushAndYieldThrough(['Unmount: 1']);
-      expect(ReactNoop.getChildren()).toEqual([]);
-    });
-  });
+      });
 
-  describe('useLayoutEffect', () => {
-    it('fires layout effects after the host has been mutated', () => {
-      function getCommittedText() {
-        const yields = Scheduler.unstable_clearYields();
-        const children = ReactNoop.getChildren();
-        Scheduler.unstable_yieldValue(yields);
-        if (children === null) {
-          return null;
-        }
-        return children[0].prop;
-      }
+      describe('useCallback', () => {
+        it('memoizes callback by comparing inputs', () => {
+          class IncrementButton extends React.PureComponent {
+            increment = () => {
+              this.props.increment();
+            };
+            render() {
+              return <Text text="Increment" />;
+            }
+          }
 
-      function Counter(props) {
-        useLayoutEffect(() => {
-          Scheduler.unstable_yieldValue(`Current: ${getCommittedText()}`);
-        });
-        return <Text text={props.count} />;
-      }
+          function Counter({incrementBy}) {
+            const [count, updateCount] = useState(0);
+            const increment = useCallback(
+              () => updateCount(c => c + incrementBy),
+              [incrementBy],
+            );
+            return (
+              <>
+                <IncrementButton increment={increment} ref={button} />
+                <Text text={'Count: ' + count} />
+              </>
+            );
+          }
 
-      ReactNoop.render(<Counter count={0} />, () =>
-        Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        [0],
-        'Current: 0',
-        'Sync effect',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span(0)]);
-
-      ReactNoop.render(<Counter count={1} />, () =>
-        Scheduler.unstable_yieldValue('Sync effect'),
-      );
-      expect(Scheduler).toFlushAndYieldThrough([
-        [1],
-        'Current: 1',
-        'Sync effect',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span(1)]);
-    });
+          const button = React.createRef(null);
+          ReactNoop.render(<Counter incrementBy={1} />);
+          expect(Scheduler).toFlushAndYield(['Increment', 'Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Increment'),
+            span('Count: 0'),
+          ]);
 
-    it('force flushes passive effects before firing new layout effects', () => {
-      let committedText = '(empty)';
+          act(button.current.increment);
+          expect(Scheduler).toHaveYielded([
+            // Button should not re-render, because its props haven't changed
+            // 'Increment',
+            'Count: 1',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Increment'),
+            span('Count: 1'),
+          ]);
 
-      function Counter(props) {
-        useLayoutEffect(() => {
-          // Normally this would go in a mutation effect, but this test
-          // intentionally omits a mutation effect.
-          committedText = props.count + '';
+          // Increase the increment amount
+          ReactNoop.render(<Counter incrementBy={10} />);
+          expect(Scheduler).toFlushAndYield([
+            // Inputs did change this time
+            'Increment',
+            'Count: 1',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Increment'),
+            span('Count: 1'),
+          ]);
 
-          Scheduler.unstable_yieldValue(
-            `Mount layout [current: ${committedText}]`,
-          );
-          return () => {
-            Scheduler.unstable_yieldValue(
-              `Unmount layout [current: ${committedText}]`,
-            );
-          };
-        });
-        useEffect(() => {
-          Scheduler.unstable_yieldValue(
-            `Mount normal [current: ${committedText}]`,
-          );
-          return () => {
-            Scheduler.unstable_yieldValue(
-              `Unmount normal [current: ${committedText}]`,
-            );
-          };
+          // Callback should have updated
+          act(button.current.increment);
+          expect(Scheduler).toHaveYielded(['Count: 11']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('Increment'),
+            span('Count: 11'),
+          ]);
         });
-        return null;
-      }
-
-      act(() => {
-        ReactNoop.render(<Counter count={0} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Mount layout [current: 0]',
-          'Sync effect',
-        ]);
-        expect(committedText).toEqual('0');
-        ReactNoop.render(<Counter count={1} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough([
-          'Mount normal [current: 0]',
-          'Unmount layout [current: 0]',
-          'Mount layout [current: 1]',
-          'Sync effect',
-        ]);
-        expect(committedText).toEqual('1');
       });
 
-      expect(Scheduler).toHaveYielded([
-        'Unmount normal [current: 1]',
-        'Mount normal [current: 1]',
-      ]);
-    });
-  });
+      describe('useMemo', () => {
+        it('memoizes value by comparing to previous inputs', () => {
+          function CapitalizedText(props) {
+            const text = props.text;
+            const capitalizedText = useMemo(() => {
+              Scheduler.unstable_yieldValue(`Capitalize '${text}'`);
+              return text.toUpperCase();
+            }, [text]);
+            return <Text text={capitalizedText} />;
+          }
 
-  describe('useCallback', () => {
-    it('memoizes callback by comparing inputs', () => {
-      class IncrementButton extends React.PureComponent {
-        increment = () => {
-          this.props.increment();
-        };
-        render() {
-          return <Text text="Increment" />;
-        }
-      }
+          ReactNoop.render(<CapitalizedText text="hello" />);
+          expect(Scheduler).toFlushAndYield(["Capitalize 'hello'", 'HELLO']);
+          expect(ReactNoop.getChildren()).toEqual([span('HELLO')]);
 
-      function Counter({incrementBy}) {
-        const [count, updateCount] = useState(0);
-        const increment = useCallback(() => updateCount(c => c + incrementBy), [
-          incrementBy,
-        ]);
-        return (
-          <>
-            <IncrementButton increment={increment} ref={button} />
-            <Text text={'Count: ' + count} />
-          </>
-        );
-      }
+          ReactNoop.render(<CapitalizedText text="hi" />);
+          expect(Scheduler).toFlushAndYield(["Capitalize 'hi'", 'HI']);
+          expect(ReactNoop.getChildren()).toEqual([span('HI')]);
 
-      const button = React.createRef(null);
-      ReactNoop.render(<Counter incrementBy={1} />);
-      expect(Scheduler).toFlushAndYield(['Increment', 'Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Increment'),
-        span('Count: 0'),
-      ]);
-
-      act(button.current.increment);
-      expect(Scheduler).toHaveYielded([
-        // Button should not re-render, because its props haven't changed
-        // 'Increment',
-        'Count: 1',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Increment'),
-        span('Count: 1'),
-      ]);
-
-      // Increase the increment amount
-      ReactNoop.render(<Counter incrementBy={10} />);
-      expect(Scheduler).toFlushAndYield([
-        // Inputs did change this time
-        'Increment',
-        'Count: 1',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Increment'),
-        span('Count: 1'),
-      ]);
-
-      // Callback should have updated
-      act(button.current.increment);
-      expect(Scheduler).toHaveYielded(['Count: 11']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('Increment'),
-        span('Count: 11'),
-      ]);
-    });
-  });
+          ReactNoop.render(<CapitalizedText text="hi" />);
+          expect(Scheduler).toFlushAndYield(['HI']);
+          expect(ReactNoop.getChildren()).toEqual([span('HI')]);
 
-  describe('useMemo', () => {
-    it('memoizes value by comparing to previous inputs', () => {
-      function CapitalizedText(props) {
-        const text = props.text;
-        const capitalizedText = useMemo(() => {
-          Scheduler.unstable_yieldValue(`Capitalize '${text}'`);
-          return text.toUpperCase();
-        }, [text]);
-        return <Text text={capitalizedText} />;
-      }
+          ReactNoop.render(<CapitalizedText text="goodbye" />);
+          expect(Scheduler).toFlushAndYield([
+            "Capitalize 'goodbye'",
+            'GOODBYE',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span('GOODBYE')]);
+        });
 
-      ReactNoop.render(<CapitalizedText text="hello" />);
-      expect(Scheduler).toFlushAndYield(["Capitalize 'hello'", 'HELLO']);
-      expect(ReactNoop.getChildren()).toEqual([span('HELLO')]);
+        it('always re-computes if no inputs are provided', () => {
+          function LazyCompute(props) {
+            const computed = useMemo(props.compute);
+            return <Text text={computed} />;
+          }
 
-      ReactNoop.render(<CapitalizedText text="hi" />);
-      expect(Scheduler).toFlushAndYield(["Capitalize 'hi'", 'HI']);
-      expect(ReactNoop.getChildren()).toEqual([span('HI')]);
+          function computeA() {
+            Scheduler.unstable_yieldValue('compute A');
+            return 'A';
+          }
 
-      ReactNoop.render(<CapitalizedText text="hi" />);
-      expect(Scheduler).toFlushAndYield(['HI']);
-      expect(ReactNoop.getChildren()).toEqual([span('HI')]);
+          function computeB() {
+            Scheduler.unstable_yieldValue('compute B');
+            return 'B';
+          }
 
-      ReactNoop.render(<CapitalizedText text="goodbye" />);
-      expect(Scheduler).toFlushAndYield(["Capitalize 'goodbye'", 'GOODBYE']);
-      expect(ReactNoop.getChildren()).toEqual([span('GOODBYE')]);
-    });
+          ReactNoop.render(<LazyCompute compute={computeA} />);
+          expect(Scheduler).toFlushAndYield(['compute A', 'A']);
 
-    it('always re-computes if no inputs are provided', () => {
-      function LazyCompute(props) {
-        const computed = useMemo(props.compute);
-        return <Text text={computed} />;
-      }
+          ReactNoop.render(<LazyCompute compute={computeA} />);
+          expect(Scheduler).toFlushAndYield(['compute A', 'A']);
 
-      function computeA() {
-        Scheduler.unstable_yieldValue('compute A');
-        return 'A';
-      }
+          ReactNoop.render(<LazyCompute compute={computeA} />);
+          expect(Scheduler).toFlushAndYield(['compute A', 'A']);
 
-      function computeB() {
-        Scheduler.unstable_yieldValue('compute B');
-        return 'B';
-      }
+          ReactNoop.render(<LazyCompute compute={computeB} />);
+          expect(Scheduler).toFlushAndYield(['compute B', 'B']);
+        });
 
-      ReactNoop.render(<LazyCompute compute={computeA} />);
-      expect(Scheduler).toFlushAndYield(['compute A', 'A']);
+        it('should not invoke memoized function during re-renders unless inputs change', () => {
+          function LazyCompute(props) {
+            const computed = useMemo(() => props.compute(props.input), [
+              props.input,
+            ]);
+            const [count, setCount] = useState(0);
+            if (count < 3) {
+              setCount(count + 1);
+            }
+            return <Text text={computed} />;
+          }
 
-      ReactNoop.render(<LazyCompute compute={computeA} />);
-      expect(Scheduler).toFlushAndYield(['compute A', 'A']);
+          function compute(val) {
+            Scheduler.unstable_yieldValue('compute ' + val);
+            return val;
+          }
 
-      ReactNoop.render(<LazyCompute compute={computeA} />);
-      expect(Scheduler).toFlushAndYield(['compute A', 'A']);
+          ReactNoop.render(<LazyCompute compute={compute} input="A" />);
+          expect(Scheduler).toFlushAndYield(['compute A', 'A']);
 
-      ReactNoop.render(<LazyCompute compute={computeB} />);
-      expect(Scheduler).toFlushAndYield(['compute B', 'B']);
-    });
+          ReactNoop.render(<LazyCompute compute={compute} input="A" />);
+          expect(Scheduler).toFlushAndYield(['A']);
 
-    it('should not invoke memoized function during re-renders unless inputs change', () => {
-      function LazyCompute(props) {
-        const computed = useMemo(() => props.compute(props.input), [
-          props.input,
-        ]);
-        const [count, setCount] = useState(0);
-        if (count < 3) {
-          setCount(count + 1);
-        }
-        return <Text text={computed} />;
-      }
+          ReactNoop.render(<LazyCompute compute={compute} input="B" />);
+          expect(Scheduler).toFlushAndYield(['compute B', 'B']);
+        });
+      });
 
-      function compute(val) {
-        Scheduler.unstable_yieldValue('compute ' + val);
-        return val;
-      }
+      describe('useRef', () => {
+        it('creates a ref object initialized with the provided value', () => {
+          jest.useFakeTimers();
+
+          function useDebouncedCallback(callback, ms, inputs) {
+            const timeoutID = useRef(-1);
+            useEffect(() => {
+              return function unmount() {
+                clearTimeout(timeoutID.current);
+              };
+            }, []);
+            const debouncedCallback = useCallback(
+              (...args) => {
+                clearTimeout(timeoutID.current);
+                timeoutID.current = setTimeout(callback, ms, ...args);
+              },
+              [callback, ms],
+            );
+            return useCallback(debouncedCallback, inputs);
+          }
 
-      ReactNoop.render(<LazyCompute compute={compute} input="A" />);
-      expect(Scheduler).toFlushAndYield(['compute A', 'A']);
+          let ping;
+          function App() {
+            ping = useDebouncedCallback(
+              value => {
+                Scheduler.unstable_yieldValue('ping: ' + value);
+              },
+              100,
+              [],
+            );
+            return null;
+          }
 
-      ReactNoop.render(<LazyCompute compute={compute} input="A" />);
-      expect(Scheduler).toFlushAndYield(['A']);
+          act(() => {
+            ReactNoop.render(<App />);
+          });
+          expect(Scheduler).toHaveYielded([]);
 
-      ReactNoop.render(<LazyCompute compute={compute} input="B" />);
-      expect(Scheduler).toFlushAndYield(['compute B', 'B']);
-    });
-  });
+          ping(1);
+          ping(2);
+          ping(3);
 
-  describe('useRef', () => {
-    it('creates a ref object initialized with the provided value', () => {
-      jest.useFakeTimers();
+          expect(Scheduler).toHaveYielded([]);
 
-      function useDebouncedCallback(callback, ms, inputs) {
-        const timeoutID = useRef(-1);
-        useEffect(() => {
-          return function unmount() {
-            clearTimeout(timeoutID.current);
-          };
-        }, []);
-        const debouncedCallback = useCallback(
-          (...args) => {
-            clearTimeout(timeoutID.current);
-            timeoutID.current = setTimeout(callback, ms, ...args);
-          },
-          [callback, ms],
-        );
-        return useCallback(debouncedCallback, inputs);
-      }
+          jest.advanceTimersByTime(100);
 
-      let ping;
-      function App() {
-        ping = useDebouncedCallback(
-          value => {
-            Scheduler.unstable_yieldValue('ping: ' + value);
-          },
-          100,
-          [],
-        );
-        return null;
-      }
+          expect(Scheduler).toHaveYielded(['ping: 3']);
 
-      act(() => {
-        ReactNoop.render(<App />);
-      });
-      expect(Scheduler).toHaveYielded([]);
+          ping(4);
+          jest.advanceTimersByTime(20);
+          ping(5);
+          ping(6);
+          jest.advanceTimersByTime(80);
 
-      ping(1);
-      ping(2);
-      ping(3);
+          expect(Scheduler).toHaveYielded([]);
 
-      expect(Scheduler).toHaveYielded([]);
+          jest.advanceTimersByTime(20);
+          expect(Scheduler).toHaveYielded(['ping: 6']);
+        });
 
-      jest.advanceTimersByTime(100);
+        it('should return the same ref during re-renders', () => {
+          function Counter() {
+            const ref = useRef('val');
+            const [count, setCount] = useState(0);
+            const [firstRef] = useState(ref);
 
-      expect(Scheduler).toHaveYielded(['ping: 3']);
+            if (firstRef !== ref) {
+              throw new Error('should never change');
+            }
 
-      ping(4);
-      jest.advanceTimersByTime(20);
-      ping(5);
-      ping(6);
-      jest.advanceTimersByTime(80);
+            if (count < 3) {
+              setCount(count + 1);
+            }
 
-      expect(Scheduler).toHaveYielded([]);
+            return <Text text={ref.current} />;
+          }
 
-      jest.advanceTimersByTime(20);
-      expect(Scheduler).toHaveYielded(['ping: 6']);
-    });
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndYield(['val']);
 
-    it('should return the same ref during re-renders', () => {
-      function Counter() {
-        const ref = useRef('val');
-        const [count, setCount] = useState(0);
-        const [firstRef] = useState(ref);
+          ReactNoop.render(<Counter />);
+          expect(Scheduler).toFlushAndYield(['val']);
+        });
+      });
 
-        if (firstRef !== ref) {
-          throw new Error('should never change');
-        }
+      describe('useImperativeHandle', () => {
+        it('does not update when deps are the same', () => {
+          const INCREMENT = 'INCREMENT';
 
-        if (count < 3) {
-          setCount(count + 1);
-        }
+          function reducer(state, action) {
+            return action === INCREMENT ? state + 1 : state;
+          }
 
-        return <Text text={ref.current} />;
-      }
+          function Counter(props, ref) {
+            const [count, dispatch] = useReducer(reducer, 0);
+            useImperativeHandle(ref, () => ({count, dispatch}), []);
+            return <Text text={'Count: ' + count} />;
+          }
 
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield(['val']);
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          expect(counter.current.count).toBe(0);
 
-      ReactNoop.render(<Counter />);
-      expect(Scheduler).toFlushAndYield(['val']);
-    });
-  });
+          act(() => {
+            counter.current.dispatch(INCREMENT);
+          });
+          expect(Scheduler).toHaveYielded(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          // Intentionally not updated because of [] deps:
+          expect(counter.current.count).toBe(0);
+        });
 
-  describe('useImperativeHandle', () => {
-    it('does not update when deps are the same', () => {
-      const INCREMENT = 'INCREMENT';
+        // Regression test for https://github.com/facebook/react/issues/14782
+        it('automatically updates when deps are not specified', () => {
+          const INCREMENT = 'INCREMENT';
 
-      function reducer(state, action) {
-        return action === INCREMENT ? state + 1 : state;
-      }
+          function reducer(state, action) {
+            return action === INCREMENT ? state + 1 : state;
+          }
 
-      function Counter(props, ref) {
-        const [count, dispatch] = useReducer(reducer, 0);
-        useImperativeHandle(ref, () => ({count, dispatch}), []);
-        return <Text text={'Count: ' + count} />;
-      }
+          function Counter(props, ref) {
+            const [count, dispatch] = useReducer(reducer, 0);
+            useImperativeHandle(ref, () => ({count, dispatch}));
+            return <Text text={'Count: ' + count} />;
+          }
 
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      expect(counter.current.count).toBe(0);
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          expect(counter.current.count).toBe(0);
 
-      act(() => {
-        counter.current.dispatch(INCREMENT);
-      });
-      expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      // Intentionally not updated because of [] deps:
-      expect(counter.current.count).toBe(0);
-    });
+          act(() => {
+            counter.current.dispatch(INCREMENT);
+          });
+          expect(Scheduler).toHaveYielded(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          expect(counter.current.count).toBe(1);
+        });
 
-    // Regression test for https://github.com/facebook/react/issues/14782
-    it('automatically updates when deps are not specified', () => {
-      const INCREMENT = 'INCREMENT';
+        it('updates when deps are different', () => {
+          const INCREMENT = 'INCREMENT';
 
-      function reducer(state, action) {
-        return action === INCREMENT ? state + 1 : state;
-      }
+          function reducer(state, action) {
+            return action === INCREMENT ? state + 1 : state;
+          }
 
-      function Counter(props, ref) {
-        const [count, dispatch] = useReducer(reducer, 0);
-        useImperativeHandle(ref, () => ({count, dispatch}));
-        return <Text text={'Count: ' + count} />;
-      }
+          let totalRefUpdates = 0;
+          function Counter(props, ref) {
+            const [count, dispatch] = useReducer(reducer, 0);
+            useImperativeHandle(
+              ref,
+              () => {
+                totalRefUpdates++;
+                return {count, dispatch};
+              },
+              [count],
+            );
+            return <Text text={'Count: ' + count} />;
+          }
 
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      expect(counter.current.count).toBe(0);
+          Counter = forwardRef(Counter);
+          const counter = React.createRef(null);
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['Count: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
+          expect(counter.current.count).toBe(0);
+          expect(totalRefUpdates).toBe(1);
 
-      act(() => {
-        counter.current.dispatch(INCREMENT);
+          act(() => {
+            counter.current.dispatch(INCREMENT);
+          });
+          expect(Scheduler).toHaveYielded(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          expect(counter.current.count).toBe(1);
+          expect(totalRefUpdates).toBe(2);
+
+          // Update that doesn't change the ref dependencies
+          ReactNoop.render(<Counter ref={counter} />);
+          expect(Scheduler).toFlushAndYield(['Count: 1']);
+          expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
+          expect(counter.current.count).toBe(1);
+          expect(totalRefUpdates).toBe(2); // Should not increase since last time
+        });
       });
-      expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      expect(counter.current.count).toBe(1);
-    });
+      describe('useTransition', () => {
+        it.experimental(
+          'delays showing loading state until after timeout',
+          async () => {
+            let transition;
+            function App() {
+              const [show, setShow] = useState(false);
+              const [startTransition, isPending] = useTransition({
+                timeoutMs: 1000,
+              });
+              transition = () => {
+                startTransition(() => {
+                  setShow(true);
+                });
+              };
+              return (
+                <Suspense
+                  fallback={<Text text={`Loading... Pending: ${isPending}`} />}>
+                  {show ? (
+                    <AsyncText
+                      ms={2000}
+                      text={`After... Pending: ${isPending}`}
+                    />
+                  ) : (
+                    <Text text={`Before... Pending: ${isPending}`} />
+                  )}
+                </Suspense>
+              );
+            }
+            ReactNoop.render(<App />);
+            expect(Scheduler).toFlushAndYield(['Before... Pending: false']);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('Before... Pending: false'),
+            ]);
+
+            act(() => {
+              Scheduler.unstable_runWithPriority(
+                Scheduler.unstable_UserBlockingPriority,
+                transition,
+              );
+            });
+            Scheduler.unstable_advanceTime(500);
+            await advanceTimers(500);
+            expect(Scheduler).toHaveYielded([
+              'Before... Pending: true',
+              'Suspend! [After... Pending: false]',
+              'Loading... Pending: false',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('Before... Pending: true'),
+            ]);
+
+            Scheduler.unstable_advanceTime(1000);
+            await advanceTimers(1000);
+            expect(ReactNoop.getChildren()).toEqual([
+              hiddenSpan('Before... Pending: true'),
+              span('Loading... Pending: false'),
+            ]);
+
+            Scheduler.unstable_advanceTime(500);
+            await advanceTimers(500);
+            expect(Scheduler).toHaveYielded([
+              'Promise resolved [After... Pending: false]',
+            ]);
+            expect(Scheduler).toFlushAndYield(['After... Pending: false']);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('After... Pending: false'),
+            ]);
+          },
+        );
+        it.experimental(
+          'delays showing loading state until after busyDelayMs + busyMinDurationMs',
+          async () => {
+            let transition;
+            function App() {
+              const [show, setShow] = useState(false);
+              const [startTransition, isPending] = useTransition({
+                busyDelayMs: 1000,
+                busyMinDurationMs: 2000,
+              });
+              transition = () => {
+                startTransition(() => {
+                  setShow(true);
+                });
+              };
+              return (
+                <Suspense
+                  fallback={<Text text={`Loading... Pending: ${isPending}`} />}>
+                  {show ? (
+                    <AsyncText
+                      ms={2000}
+                      text={`After... Pending: ${isPending}`}
+                    />
+                  ) : (
+                    <Text text={`Before... Pending: ${isPending}`} />
+                  )}
+                </Suspense>
+              );
+            }
+            ReactNoop.render(<App />);
+            expect(Scheduler).toFlushAndYield(['Before... Pending: false']);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('Before... Pending: false'),
+            ]);
+
+            act(() => {
+              Scheduler.unstable_runWithPriority(
+                Scheduler.unstable_UserBlockingPriority,
+                transition,
+              );
+            });
+            Scheduler.unstable_advanceTime(1000);
+            await advanceTimers(1000);
+            expect(Scheduler).toHaveYielded([
+              'Before... Pending: true',
+              'Suspend! [After... Pending: false]',
+              'Loading... Pending: false',
+            ]);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('Before... Pending: true'),
+            ]);
+
+            Scheduler.unstable_advanceTime(1000);
+            await advanceTimers(1000);
+            expect(Scheduler).toHaveYielded([
+              'Promise resolved [After... Pending: false]',
+            ]);
+            expect(Scheduler).toFlushAndYield(['After... Pending: false']);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('Before... Pending: true'),
+            ]);
+
+            Scheduler.unstable_advanceTime(1000);
+            await advanceTimers(1000);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('Before... Pending: true'),
+            ]);
+            Scheduler.unstable_advanceTime(250);
+            await advanceTimers(250);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('After... Pending: false'),
+            ]);
+          },
+        );
+      });
+      describe('useDeferredValue', () => {
+        it.experimental(
+          'defers text value until specified timeout',
+          async () => {
+            function TextBox({text}) {
+              return <AsyncText ms={1000} text={text} />;
+            }
+
+            let _setText;
+            function App() {
+              const [text, setText] = useState('A');
+              const deferredText = useDeferredValue(text, {
+                timeoutMs: 500,
+              });
+              _setText = setText;
+              return (
+                <>
+                  <Text text={text} />
+                  <Suspense fallback={<Text text={'Loading'} />}>
+                    <TextBox text={deferredText} />
+                  </Suspense>
+                </>
+              );
+            }
+
+            act(() => {
+              ReactNoop.render(<App />);
+            });
 
-    it('updates when deps are different', () => {
-      const INCREMENT = 'INCREMENT';
+            expect(Scheduler).toHaveYielded(['A', 'Suspend! [A]', 'Loading']);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('A'),
+              span('Loading'),
+            ]);
 
-      function reducer(state, action) {
-        return action === INCREMENT ? state + 1 : state;
-      }
+            Scheduler.unstable_advanceTime(1000);
+            await advanceTimers(1000);
+            expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+            expect(Scheduler).toFlushAndYield(['A']);
+            expect(ReactNoop.getChildren()).toEqual([span('A'), span('A')]);
 
-      let totalRefUpdates = 0;
-      function Counter(props, ref) {
-        const [count, dispatch] = useReducer(reducer, 0);
-        useImperativeHandle(
-          ref,
-          () => {
-            totalRefUpdates++;
-            return {count, dispatch};
+            act(() => {
+              _setText('B');
+            });
+            expect(Scheduler).toHaveYielded([
+              'B',
+              'A',
+              'B',
+              'Suspend! [B]',
+              'Loading',
+            ]);
+            expect(Scheduler).toFlushAndYield([]);
+            expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
+
+            Scheduler.unstable_advanceTime(250);
+            await advanceTimers(250);
+            expect(Scheduler).toFlushAndYield([]);
+            expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
+
+            Scheduler.unstable_advanceTime(500);
+            await advanceTimers(500);
+            expect(ReactNoop.getChildren()).toEqual([
+              span('B'),
+              hiddenSpan('A'),
+              span('Loading'),
+            ]);
+
+            Scheduler.unstable_advanceTime(250);
+            await advanceTimers(250);
+            expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+
+            act(() => {
+              expect(Scheduler).toFlushAndYield(['B']);
+            });
+            expect(ReactNoop.getChildren()).toEqual([span('B'), span('B')]);
           },
-          [count],
         );
-        return <Text text={'Count: ' + count} />;
-      }
-
-      Counter = forwardRef(Counter);
-      const counter = React.createRef(null);
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['Count: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 0')]);
-      expect(counter.current.count).toBe(0);
-      expect(totalRefUpdates).toBe(1);
-
-      act(() => {
-        counter.current.dispatch(INCREMENT);
       });
-      expect(Scheduler).toHaveYielded(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      expect(counter.current.count).toBe(1);
-      expect(totalRefUpdates).toBe(2);
-
-      // Update that doesn't change the ref dependencies
-      ReactNoop.render(<Counter ref={counter} />);
-      expect(Scheduler).toFlushAndYield(['Count: 1']);
-      expect(ReactNoop.getChildren()).toEqual([span('Count: 1')]);
-      expect(counter.current.count).toBe(1);
-      expect(totalRefUpdates).toBe(2); // Should not increase since last time
-    });
-  });
-  describe('useTransition', () => {
-    it.experimental(
-      'delays showing loading state until after timeout',
-      async () => {
-        let transition;
-        function App() {
-          const [show, setShow] = useState(false);
-          const [startTransition, isPending] = useTransition({
-            timeoutMs: 1000,
-          });
-          transition = () => {
-            startTransition(() => {
-              setShow(true);
-            });
-          };
-          return (
-            <Suspense
-              fallback={<Text text={`Loading... Pending: ${isPending}`} />}>
-              {show ? (
-                <AsyncText ms={2000} text={`After... Pending: ${isPending}`} />
-              ) : (
-                <Text text={`Before... Pending: ${isPending}`} />
-              )}
-            </Suspense>
-          );
-        }
-        ReactNoop.render(<App />);
-        expect(Scheduler).toFlushAndYield(['Before... Pending: false']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Before... Pending: false'),
-        ]);
 
-        act(() => {
-          Scheduler.unstable_runWithPriority(
-            Scheduler.unstable_UserBlockingPriority,
-            transition,
-          );
-        });
-        Scheduler.unstable_advanceTime(500);
-        await advanceTimers(500);
-        expect(Scheduler).toHaveYielded([
-          'Before... Pending: true',
-          'Suspend! [After... Pending: false]',
-          'Loading... Pending: false',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Before... Pending: true'),
-        ]);
+      describe('progressive enhancement (not supported)', () => {
+        it('mount additional state', () => {
+          let updateA;
+          let updateB;
+          // let updateC;
+
+          function App(props) {
+            const [A, _updateA] = useState(0);
+            const [B, _updateB] = useState(0);
+            updateA = _updateA;
+            updateB = _updateB;
+
+            let C;
+            if (props.loadC) {
+              useState(0);
+            } else {
+              C = '[not loaded]';
+            }
+
+            return <Text text={`A: ${A}, B: ${B}, C: ${C}`} />;
+          }
 
-        Scheduler.unstable_advanceTime(1000);
-        await advanceTimers(1000);
-        expect(ReactNoop.getChildren()).toEqual([
-          hiddenSpan('Before... Pending: true'),
-          span('Loading... Pending: false'),
-        ]);
+          ReactNoop.render(<App loadC={false} />);
+          expect(Scheduler).toFlushAndYield(['A: 0, B: 0, C: [not loaded]']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('A: 0, B: 0, C: [not loaded]'),
+          ]);
 
-        Scheduler.unstable_advanceTime(500);
-        await advanceTimers(500);
-        expect(Scheduler).toHaveYielded([
-          'Promise resolved [After... Pending: false]',
-        ]);
-        expect(Scheduler).toFlushAndYield(['After... Pending: false']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('After... Pending: false'),
-        ]);
-      },
-    );
-    it.experimental(
-      'delays showing loading state until after busyDelayMs + busyMinDurationMs',
-      async () => {
-        let transition;
-        function App() {
-          const [show, setShow] = useState(false);
-          const [startTransition, isPending] = useTransition({
-            busyDelayMs: 1000,
-            busyMinDurationMs: 2000,
+          act(() => {
+            updateA(2);
+            updateB(3);
           });
-          transition = () => {
-            startTransition(() => {
-              setShow(true);
-            });
-          };
-          return (
-            <Suspense
-              fallback={<Text text={`Loading... Pending: ${isPending}`} />}>
-              {show ? (
-                <AsyncText ms={2000} text={`After... Pending: ${isPending}`} />
-              ) : (
-                <Text text={`Before... Pending: ${isPending}`} />
-              )}
-            </Suspense>
-          );
-        }
-        ReactNoop.render(<App />);
-        expect(Scheduler).toFlushAndYield(['Before... Pending: false']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Before... Pending: false'),
-        ]);
 
-        act(() => {
-          Scheduler.unstable_runWithPriority(
-            Scheduler.unstable_UserBlockingPriority,
-            transition,
-          );
-        });
-        Scheduler.unstable_advanceTime(1000);
-        await advanceTimers(1000);
-        expect(Scheduler).toHaveYielded([
-          'Before... Pending: true',
-          'Suspend! [After... Pending: false]',
-          'Loading... Pending: false',
-        ]);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Before... Pending: true'),
-        ]);
+          expect(Scheduler).toHaveYielded(['A: 2, B: 3, C: [not loaded]']);
+          expect(ReactNoop.getChildren()).toEqual([
+            span('A: 2, B: 3, C: [not loaded]'),
+          ]);
 
-        Scheduler.unstable_advanceTime(1000);
-        await advanceTimers(1000);
-        expect(Scheduler).toHaveYielded([
-          'Promise resolved [After... Pending: false]',
-        ]);
-        expect(Scheduler).toFlushAndYield(['After... Pending: false']);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Before... Pending: true'),
-        ]);
+          ReactNoop.render(<App loadC={true} />);
+          expect(() => {
+            expect(() => {
+              expect(Scheduler).toFlushAndYield(['A: 2, B: 3, C: 0']);
+            }).toThrow('Rendered more hooks than during the previous render');
+          }).toErrorDev([
+            'Warning: React has detected a change in the order of Hooks called by App. ' +
+              'This will lead to bugs and errors if not fixed. For more information, ' +
+              'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
+              '   Previous render            Next render\n' +
+              '   ------------------------------------------------------\n' +
+              '1. useState                   useState\n' +
+              '2. useState                   useState\n' +
+              '3. undefined                  useState\n' +
+              '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\n',
+          ]);
 
-        Scheduler.unstable_advanceTime(1000);
-        await advanceTimers(1000);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('Before... Pending: true'),
-        ]);
-        Scheduler.unstable_advanceTime(250);
-        await advanceTimers(250);
-        expect(ReactNoop.getChildren()).toEqual([
-          span('After... Pending: false'),
-        ]);
-      },
-    );
-  });
-  describe('useDeferredValue', () => {
-    it.experimental('defers text value until specified timeout', async () => {
-      function TextBox({text}) {
-        return <AsyncText ms={1000} text={text} />;
-      }
+          // Uncomment if/when we support this again
+          // expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 0')]);
 
-      let _setText;
-      function App() {
-        const [text, setText] = useState('A');
-        const deferredText = useDeferredValue(text, {
-          timeoutMs: 500,
+          // updateC(4);
+          // expect(Scheduler).toFlushAndYield(['A: 2, B: 3, C: 4']);
+          // expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 4')]);
         });
-        _setText = setText;
-        return (
-          <>
-            <Text text={text} />
-            <Suspense fallback={<Text text={'Loading'} />}>
-              <TextBox text={deferredText} />
-            </Suspense>
-          </>
-        );
-      }
 
-      act(() => {
-        ReactNoop.render(<App />);
-      });
+        it('unmount state', () => {
+          let updateA;
+          let updateB;
+          let updateC;
+
+          function App(props) {
+            const [A, _updateA] = useState(0);
+            const [B, _updateB] = useState(0);
+            updateA = _updateA;
+            updateB = _updateB;
+
+            let C;
+            if (props.loadC) {
+              const [_C, _updateC] = useState(0);
+              C = _C;
+              updateC = _updateC;
+            } else {
+              C = '[not loaded]';
+            }
+
+            return <Text text={`A: ${A}, B: ${B}, C: ${C}`} />;
+          }
 
-      expect(Scheduler).toHaveYielded(['A', 'Suspend! [A]', 'Loading']);
-      expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading')]);
+          ReactNoop.render(<App loadC={true} />);
+          expect(Scheduler).toFlushAndYield(['A: 0, B: 0, C: 0']);
+          expect(ReactNoop.getChildren()).toEqual([span('A: 0, B: 0, C: 0')]);
+          act(() => {
+            updateA(2);
+            updateB(3);
+            updateC(4);
+          });
+          expect(Scheduler).toHaveYielded(['A: 2, B: 3, C: 4']);
+          expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 4')]);
+          ReactNoop.render(<App loadC={false} />);
+          expect(Scheduler).toFlushAndThrow(
+            'Rendered fewer hooks than expected. This may be caused by an ' +
+              'accidental early return statement.',
+          );
+        });
 
-      Scheduler.unstable_advanceTime(1000);
-      await advanceTimers(1000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-      expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A'), span('A')]);
+        it('unmount effects', () => {
+          function App(props) {
+            useEffect(() => {
+              Scheduler.unstable_yieldValue('Mount A');
+              return () => {
+                Scheduler.unstable_yieldValue('Unmount A');
+              };
+            }, []);
+
+            if (props.showMore) {
+              useEffect(() => {
+                Scheduler.unstable_yieldValue('Mount B');
+                return () => {
+                  Scheduler.unstable_yieldValue('Unmount B');
+                };
+              }, []);
+            }
 
-      act(() => {
-        _setText('B');
-      });
-      expect(Scheduler).toHaveYielded([
-        'B',
-        'A',
-        'B',
-        'Suspend! [B]',
-        'Loading',
-      ]);
-      expect(Scheduler).toFlushAndYield([]);
-      expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
-
-      Scheduler.unstable_advanceTime(250);
-      await advanceTimers(250);
-      expect(Scheduler).toFlushAndYield([]);
-      expect(ReactNoop.getChildren()).toEqual([span('B'), span('A')]);
-
-      Scheduler.unstable_advanceTime(500);
-      await advanceTimers(500);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('B'),
-        hiddenSpan('A'),
-        span('Loading'),
-      ]);
-
-      Scheduler.unstable_advanceTime(250);
-      await advanceTimers(250);
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-
-      act(() => {
-        expect(Scheduler).toFlushAndYield(['B']);
-      });
-      expect(ReactNoop.getChildren()).toEqual([span('B'), span('B')]);
-    });
-  });
+            return null;
+          }
 
-  describe('progressive enhancement (not supported)', () => {
-    it('mount additional state', () => {
-      let updateA;
-      let updateB;
-      // let updateC;
-
-      function App(props) {
-        const [A, _updateA] = useState(0);
-        const [B, _updateB] = useState(0);
-        updateA = _updateA;
-        updateB = _updateB;
-
-        let C;
-        if (props.loadC) {
-          useState(0);
-        } else {
-          C = '[not loaded]';
-        }
+          act(() => {
+            ReactNoop.render(<App showMore={false} />, () =>
+              Scheduler.unstable_yieldValue('Sync effect'),
+            );
+            expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
+          });
 
-        return <Text text={`A: ${A}, B: ${B}, C: ${C}`} />;
-      }
+          expect(Scheduler).toHaveYielded(['Mount A']);
+
+          act(() => {
+            ReactNoop.render(<App showMore={true} />);
+            expect(() => {
+              expect(() => {
+                expect(Scheduler).toFlushAndYield([]);
+              }).toThrow('Rendered more hooks than during the previous render');
+            }).toErrorDev([
+              'Warning: React has detected a change in the order of Hooks called by App. ' +
+                'This will lead to bugs and errors if not fixed. For more information, ' +
+                'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
+                '   Previous render            Next render\n' +
+                '   ------------------------------------------------------\n' +
+                '1. useEffect                  useEffect\n' +
+                '2. undefined                  useEffect\n' +
+                '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\n',
+            ]);
+          });
 
-      ReactNoop.render(<App loadC={false} />);
-      expect(Scheduler).toFlushAndYield(['A: 0, B: 0, C: [not loaded]']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('A: 0, B: 0, C: [not loaded]'),
-      ]);
+          // Uncomment if/when we support this again
+          // ReactNoop.flushPassiveEffects();
+          // expect(Scheduler).toHaveYielded(['Mount B']);
 
-      act(() => {
-        updateA(2);
-        updateB(3);
+          // ReactNoop.render(<App showMore={false} />);
+          // expect(Scheduler).toFlushAndThrow(
+          //   'Rendered fewer hooks than expected. This may be caused by an ' +
+          //     'accidental early return statement.',
+          // );
+        });
       });
 
-      expect(Scheduler).toHaveYielded(['A: 2, B: 3, C: [not loaded]']);
-      expect(ReactNoop.getChildren()).toEqual([
-        span('A: 2, B: 3, C: [not loaded]'),
-      ]);
-
-      ReactNoop.render(<App loadC={true} />);
-      expect(() => {
-        expect(() => {
-          expect(Scheduler).toFlushAndYield(['A: 2, B: 3, C: 0']);
-        }).toThrow('Rendered more hooks than during the previous render');
-      }).toErrorDev([
-        'Warning: React has detected a change in the order of Hooks called by App. ' +
-          'This will lead to bugs and errors if not fixed. For more information, ' +
-          'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
-          '   Previous render            Next render\n' +
-          '   ------------------------------------------------------\n' +
-          '1. useState                   useState\n' +
-          '2. useState                   useState\n' +
-          '3. undefined                  useState\n' +
-          '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\n',
-      ]);
-
-      // Uncomment if/when we support this again
-      // expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 0')]);
-
-      // updateC(4);
-      // expect(Scheduler).toFlushAndYield(['A: 2, B: 3, C: 4']);
-      // expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 4')]);
-    });
+      it('eager bailout optimization should always compare to latest rendered reducer', () => {
+        // Edge case based on a bug report
+        let setCounter;
+        function App() {
+          const [counter, _setCounter] = useState(1);
+          setCounter = _setCounter;
+          return <Component count={counter} />;
+        }
 
-    it('unmount state', () => {
-      let updateA;
-      let updateB;
-      let updateC;
-
-      function App(props) {
-        const [A, _updateA] = useState(0);
-        const [B, _updateB] = useState(0);
-        updateA = _updateA;
-        updateB = _updateB;
-
-        let C;
-        if (props.loadC) {
-          const [_C, _updateC] = useState(0);
-          C = _C;
-          updateC = _updateC;
-        } else {
-          C = '[not loaded]';
+        function Component({count}) {
+          const [state, dispatch] = useReducer(() => {
+            // This reducer closes over a value from props. If the reducer is not
+            // properly updated, the eager reducer will compare to an old value
+            // and bail out incorrectly.
+            Scheduler.unstable_yieldValue('Reducer: ' + count);
+            return count;
+          }, -1);
+          useEffect(() => {
+            Scheduler.unstable_yieldValue('Effect: ' + count);
+            dispatch();
+          }, [count]);
+          Scheduler.unstable_yieldValue('Render: ' + state);
+          return count;
         }
 
-        return <Text text={`A: ${A}, B: ${B}, C: ${C}`} />;
-      }
+        act(() => {
+          ReactNoop.render(<App />);
+          expect(Scheduler).toFlushAndYield([
+            'Render: -1',
+            'Effect: 1',
+            'Reducer: 1',
+            'Reducer: 1',
+            'Render: 1',
+          ]);
+          expect(ReactNoop).toMatchRenderedOutput('1');
+        });
 
-      ReactNoop.render(<App loadC={true} />);
-      expect(Scheduler).toFlushAndYield(['A: 0, B: 0, C: 0']);
-      expect(ReactNoop.getChildren()).toEqual([span('A: 0, B: 0, C: 0')]);
-      act(() => {
-        updateA(2);
-        updateB(3);
-        updateC(4);
+        act(() => {
+          setCounter(2);
+        });
+        expect(Scheduler).toHaveYielded([
+          'Render: 1',
+          'Effect: 2',
+          'Reducer: 2',
+          'Reducer: 2',
+          'Render: 2',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput('2');
       });
-      expect(Scheduler).toHaveYielded(['A: 2, B: 3, C: 4']);
-      expect(ReactNoop.getChildren()).toEqual([span('A: 2, B: 3, C: 4')]);
-      ReactNoop.render(<App loadC={false} />);
-      expect(Scheduler).toFlushAndThrow(
-        'Rendered fewer hooks than expected. This may be caused by an ' +
-          'accidental early return statement.',
-      );
-    });
 
-    it('unmount effects', () => {
-      function App(props) {
-        useEffect(() => {
-          Scheduler.unstable_yieldValue('Mount A');
-          return () => {
-            Scheduler.unstable_yieldValue('Unmount A');
-          };
-        }, []);
+      // Regression test. Covers a case where an internal state variable
+      // (`didReceiveUpdate`) is not reset properly.
+      it('state bail out edge case (#16359)', async () => {
+        let setCounterA;
+        let setCounterB;
 
-        if (props.showMore) {
+        function CounterA() {
+          const [counter, setCounter] = useState(0);
+          setCounterA = setCounter;
+          Scheduler.unstable_yieldValue('Render A: ' + counter);
           useEffect(() => {
-            Scheduler.unstable_yieldValue('Mount B');
-            return () => {
-              Scheduler.unstable_yieldValue('Unmount B');
-            };
-          }, []);
+            Scheduler.unstable_yieldValue('Commit A: ' + counter);
+          });
+          return counter;
         }
 
-        return null;
-      }
+        function CounterB() {
+          const [counter, setCounter] = useState(0);
+          setCounterB = setCounter;
+          Scheduler.unstable_yieldValue('Render B: ' + counter);
+          useEffect(() => {
+            Scheduler.unstable_yieldValue('Commit B: ' + counter);
+          });
+          return counter;
+        }
 
-      act(() => {
-        ReactNoop.render(<App showMore={false} />, () =>
-          Scheduler.unstable_yieldValue('Sync effect'),
-        );
-        expect(Scheduler).toFlushAndYieldThrough(['Sync effect']);
-      });
+        const root = ReactNoop.createRoot(null);
+        await ReactNoop.act(async () => {
+          root.render(
+            <>
+              <CounterA />
+              <CounterB />
+            </>,
+          );
+        });
+        expect(Scheduler).toHaveYielded([
+          'Render A: 0',
+          'Render B: 0',
+          'Commit A: 0',
+          'Commit B: 0',
+        ]);
 
-      expect(Scheduler).toHaveYielded(['Mount A']);
+        await ReactNoop.act(async () => {
+          setCounterA(1);
 
-      act(() => {
-        ReactNoop.render(<App showMore={true} />);
-        expect(() => {
-          expect(() => {
-            expect(Scheduler).toFlushAndYield([]);
-          }).toThrow('Rendered more hooks than during the previous render');
-        }).toErrorDev([
-          'Warning: React has detected a change in the order of Hooks called by App. ' +
-            'This will lead to bugs and errors if not fixed. For more information, ' +
-            'read the Rules of Hooks: https://fb.me/rules-of-hooks\n\n' +
-            '   Previous render            Next render\n' +
-            '   ------------------------------------------------------\n' +
-            '1. useEffect                  useEffect\n' +
-            '2. undefined                  useEffect\n' +
-            '   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^\n\n',
+          // In the same batch, update B twice. To trigger the condition we're
+          // testing, the first update is necessary to bypass the early
+          // bailout optimization.
+          setCounterB(1);
+          setCounterB(0);
+        });
+        expect(Scheduler).toHaveYielded([
+          'Render A: 1',
+          'Render B: 0',
+          'Commit A: 1',
+          // B should not fire an effect because the update bailed out
+          // 'Commit B: 0',
         ]);
       });
 
-      // Uncomment if/when we support this again
-      // ReactNoop.flushPassiveEffects();
-      // expect(Scheduler).toHaveYielded(['Mount B']);
+      it('should update latest rendered reducer when a preceding state receives a render phase update', () => {
+        // Similar to previous test, except using a preceding render phase update
+        // instead of new props.
+        let dispatch;
+        function App() {
+          const [step, setStep] = useState(0);
+          const [shadow, _dispatch] = useReducer(() => step, step);
+          dispatch = _dispatch;
 
-      // ReactNoop.render(<App showMore={false} />);
-      // expect(Scheduler).toFlushAndThrow(
-      //   'Rendered fewer hooks than expected. This may be caused by an ' +
-      //     'accidental early return statement.',
-      // );
-    });
-  });
+          if (step < 5) {
+            setStep(step + 1);
+          }
 
-  it('eager bailout optimization should always compare to latest rendered reducer', () => {
-    // Edge case based on a bug report
-    let setCounter;
-    function App() {
-      const [counter, _setCounter] = useState(1);
-      setCounter = _setCounter;
-      return <Component count={counter} />;
-    }
-
-    function Component({count}) {
-      const [state, dispatch] = useReducer(() => {
-        // This reducer closes over a value from props. If the reducer is not
-        // properly updated, the eager reducer will compare to an old value
-        // and bail out incorrectly.
-        Scheduler.unstable_yieldValue('Reducer: ' + count);
-        return count;
-      }, -1);
-      useEffect(() => {
-        Scheduler.unstable_yieldValue('Effect: ' + count);
-        dispatch();
-      }, [count]);
-      Scheduler.unstable_yieldValue('Render: ' + state);
-      return count;
-    }
-
-    act(() => {
-      ReactNoop.render(<App />);
-      expect(Scheduler).toFlushAndYield([
-        'Render: -1',
-        'Effect: 1',
-        'Reducer: 1',
-        'Reducer: 1',
-        'Render: 1',
-      ]);
-      expect(ReactNoop).toMatchRenderedOutput('1');
-    });
+          Scheduler.unstable_yieldValue(`Step: ${step}, Shadow: ${shadow}`);
+          return shadow;
+        }
 
-    act(() => {
-      setCounter(2);
-    });
-    expect(Scheduler).toHaveYielded([
-      'Render: 1',
-      'Effect: 2',
-      'Reducer: 2',
-      'Reducer: 2',
-      'Render: 2',
-    ]);
-    expect(ReactNoop).toMatchRenderedOutput('2');
-  });
+        ReactNoop.render(<App />);
+        expect(Scheduler).toFlushAndYield([
+          'Step: 0, Shadow: 0',
+          'Step: 1, Shadow: 0',
+          'Step: 2, Shadow: 0',
+          'Step: 3, Shadow: 0',
+          'Step: 4, Shadow: 0',
+          'Step: 5, Shadow: 0',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput('0');
 
-  // Regression test. Covers a case where an internal state variable
-  // (`didReceiveUpdate`) is not reset properly.
-  it('state bail out edge case (#16359)', async () => {
-    let setCounterA;
-    let setCounterB;
-
-    function CounterA() {
-      const [counter, setCounter] = useState(0);
-      setCounterA = setCounter;
-      Scheduler.unstable_yieldValue('Render A: ' + counter);
-      useEffect(() => {
-        Scheduler.unstable_yieldValue('Commit A: ' + counter);
-      });
-      return counter;
-    }
-
-    function CounterB() {
-      const [counter, setCounter] = useState(0);
-      setCounterB = setCounter;
-      Scheduler.unstable_yieldValue('Render B: ' + counter);
-      useEffect(() => {
-        Scheduler.unstable_yieldValue('Commit B: ' + counter);
+        act(() => dispatch());
+        expect(Scheduler).toHaveYielded(['Step: 5, Shadow: 5']);
+        expect(ReactNoop).toMatchRenderedOutput('5');
       });
-      return counter;
-    }
-
-    const root = ReactNoop.createRoot(null);
-    await ReactNoop.act(async () => {
-      root.render(
-        <>
-          <CounterA />
-          <CounterB />
-        </>,
-      );
-    });
-    expect(Scheduler).toHaveYielded([
-      'Render A: 0',
-      'Render B: 0',
-      'Commit A: 0',
-      'Commit B: 0',
-    ]);
-
-    await ReactNoop.act(async () => {
-      setCounterA(1);
-
-      // In the same batch, update B twice. To trigger the condition we're
-      // testing, the first update is necessary to bypass the early
-      // bailout optimization.
-      setCounterB(1);
-      setCounterB(0);
-    });
-    expect(Scheduler).toHaveYielded([
-      'Render A: 1',
-      'Render B: 0',
-      'Commit A: 1',
-      // B should not fire an effect because the update bailed out
-      // 'Commit B: 0',
-    ]);
-  });
 
-  it('should update latest rendered reducer when a preceding state receives a render phase update', () => {
-    // Similar to previous test, except using a preceding render phase update
-    // instead of new props.
-    let dispatch;
-    function App() {
-      const [step, setStep] = useState(0);
-      const [shadow, _dispatch] = useReducer(() => step, step);
-      dispatch = _dispatch;
-
-      if (step < 5) {
-        setStep(step + 1);
-      }
+      it('should process the rest pending updates after a render phase update', () => {
+        // Similar to previous test, except using a preceding render phase update
+        // instead of new props.
+        let updateA;
+        let updateC;
+        function App() {
+          const [a, setA] = useState(false);
+          const [b, setB] = useState(false);
+          if (a !== b) {
+            setB(a);
+          }
+          // Even though we called setB above,
+          // we should still apply the changes to C,
+          // during this render pass.
+          const [c, setC] = useState(false);
+          updateA = setA;
+          updateC = setC;
+          return `${a ? 'A' : 'a'}${b ? 'B' : 'b'}${c ? 'C' : 'c'}`;
+        }
 
-      Scheduler.unstable_yieldValue(`Step: ${step}, Shadow: ${shadow}`);
-      return shadow;
-    }
-
-    ReactNoop.render(<App />);
-    expect(Scheduler).toFlushAndYield([
-      'Step: 0, Shadow: 0',
-      'Step: 1, Shadow: 0',
-      'Step: 2, Shadow: 0',
-      'Step: 3, Shadow: 0',
-      'Step: 4, Shadow: 0',
-      'Step: 5, Shadow: 0',
-    ]);
-    expect(ReactNoop).toMatchRenderedOutput('0');
-
-    act(() => dispatch());
-    expect(Scheduler).toHaveYielded(['Step: 5, Shadow: 5']);
-    expect(ReactNoop).toMatchRenderedOutput('5');
-  });
+        act(() => ReactNoop.render(<App />));
+        expect(ReactNoop).toMatchRenderedOutput('abc');
 
-  it('should process the rest pending updates after a render phase update', () => {
-    // Similar to previous test, except using a preceding render phase update
-    // instead of new props.
-    let updateA;
-    let updateC;
-    function App() {
-      const [a, setA] = useState(false);
-      const [b, setB] = useState(false);
-      if (a !== b) {
-        setB(a);
-      }
-      // Even though we called setB above,
-      // we should still apply the changes to C,
-      // during this render pass.
-      const [c, setC] = useState(false);
-      updateA = setA;
-      updateC = setC;
-      return `${a ? 'A' : 'a'}${b ? 'B' : 'b'}${c ? 'C' : 'c'}`;
-    }
-
-    act(() => ReactNoop.render(<App />));
-    expect(ReactNoop).toMatchRenderedOutput('abc');
-
-    act(() => {
-      updateA(true);
-      // This update should not get dropped.
-      updateC(true);
+        act(() => {
+          updateA(true);
+          // This update should not get dropped.
+          updateC(true);
+        });
+        expect(ReactNoop).toMatchRenderedOutput('ABC');
+      });
     });
-    expect(ReactNoop).toMatchRenderedOutput('ABC');
   });
 });
diff --git a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
index 71dd2c8df71b0..0cca771b1df22 100644
--- a/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactSuspenseWithNoopRenderer-test.internal.js
@@ -9,1230 +9,1585 @@ let Suspense;
 let TextResource;
 let textResourceShouldFail;
 
-describe('ReactSuspenseWithNoopRenderer', () => {
-  if (!__EXPERIMENTAL__) {
-    it("empty test so Jest doesn't complain", () => {});
-    return;
-  }
-
-  beforeEach(() => {
-    jest.resetModules();
-    ReactFeatureFlags = require('shared/ReactFeatureFlags');
-    ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
-    ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
-    ReactFeatureFlags.flushSuspenseFallbacksInTests = false;
-    ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount = true;
-    React = require('react');
-    Fragment = React.Fragment;
-    ReactNoop = require('react-noop-renderer');
-    Scheduler = require('scheduler');
-    ReactCache = require('react-cache');
-    Suspense = React.Suspense;
-
-    TextResource = ReactCache.unstable_createResource(
-      ([text, ms = 0]) => {
-        return new Promise((resolve, reject) =>
-          setTimeout(() => {
-            if (textResourceShouldFail) {
-              Scheduler.unstable_yieldValue(`Promise rejected [${text}]`);
-              reject(new Error('Failed to load: ' + text));
-            } else {
-              Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
-              resolve(text);
-            }
-          }, ms),
-        );
-      },
-      ([text, ms]) => text,
-    );
-    textResourceShouldFail = false;
-  });
-
-  // function div(...children) {
-  //   children = children.map(
-  //     c => (typeof c === 'string' ? {text: c, hidden: false} : c),
-  //   );
-  //   return {type: 'div', children, prop: undefined, hidden: false};
-  // }
-
-  function span(prop) {
-    return {type: 'span', children: [], prop, hidden: false};
-  }
-
-  function hiddenSpan(prop) {
-    return {type: 'span', children: [], prop, hidden: true};
-  }
-
-  function advanceTimers(ms) {
-    // Note: This advances Jest's virtual time but not React's. Use
-    // ReactNoop.expire for that.
-    if (typeof ms !== 'number') {
-      throw new Error('Must specify ms');
-    }
-    jest.advanceTimersByTime(ms);
-    // Wait until the end of the current tick
-    // We cannot use a timer since we're faking them
-    return Promise.resolve().then(() => {});
-  }
-
-  function Text(props) {
-    Scheduler.unstable_yieldValue(props.text);
-    return <span prop={props.text} ref={props.hostRef} />;
-  }
-
-  function AsyncText(props) {
-    const text = props.text;
-    try {
-      TextResource.read([props.text, props.ms]);
-      Scheduler.unstable_yieldValue(text);
-      return <span prop={text} />;
-    } catch (promise) {
-      if (typeof promise.then === 'function') {
-        Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-      } else {
-        Scheduler.unstable_yieldValue(`Error! [${text}]`);
-      }
-      throw promise;
-    }
-  }
-
-  it('warns if the deprecated maxDuration option is used', () => {
-    function Foo() {
-      return (
-        <Suspense maxDuration={100} fallback="Loading...">
-          <div />;
-        </Suspense>
+function loadModules({
+  deferPassiveEffectCleanupDuringUnmount,
+  runAllPassiveEffectDestroysBeforeCreates,
+}) {
+  ReactFeatureFlags = require('shared/ReactFeatureFlags');
+  ReactFeatureFlags.debugRenderPhaseSideEffectsForStrictMode = false;
+  ReactFeatureFlags.replayFailedUnitOfWorkWithInvokeGuardedCallback = false;
+  ReactFeatureFlags.flushSuspenseFallbacksInTests = false;
+  ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount = deferPassiveEffectCleanupDuringUnmount;
+  ReactFeatureFlags.runAllPassiveEffectDestroysBeforeCreates = runAllPassiveEffectDestroysBeforeCreates;
+  React = require('react');
+  Fragment = React.Fragment;
+  ReactNoop = require('react-noop-renderer');
+  Scheduler = require('scheduler');
+  ReactCache = require('react-cache');
+  Suspense = React.Suspense;
+
+  TextResource = ReactCache.unstable_createResource(
+    ([text, ms = 0]) => {
+      return new Promise((resolve, reject) =>
+        setTimeout(() => {
+          if (textResourceShouldFail) {
+            Scheduler.unstable_yieldValue(`Promise rejected [${text}]`);
+            reject(new Error('Failed to load: ' + text));
+          } else {
+            Scheduler.unstable_yieldValue(`Promise resolved [${text}]`);
+            resolve(text);
+          }
+        }, ms),
       );
-    }
-
-    ReactNoop.render(<Foo />);
-
-    expect(() => Scheduler.unstable_flushAll()).toErrorDev([
-      'Warning: maxDuration has been removed from React. ' +
-        'Remove the maxDuration prop.' +
-        '\n    in Suspense (at **)' +
-        '\n    in Foo (at **)',
-    ]);
-  });
+    },
+    ([text, ms]) => text,
+  );
+  textResourceShouldFail = false;
+}
+
+[true, false].forEach(deferPassiveEffectCleanupDuringUnmount => {
+  [true, false].forEach(runAllPassiveEffectDestroysBeforeCreates => {
+    describe(`ReactSuspenseWithNoopRenderer deferPassiveEffectCleanupDuringUnmount:${deferPassiveEffectCleanupDuringUnmount} runAllPassiveEffectDestroysBeforeCreates:${runAllPassiveEffectDestroysBeforeCreates}`, () => {
+      if (!__EXPERIMENTAL__) {
+        it("empty test so Jest doesn't complain", () => {});
+        return;
+      }
 
-  it('does not restart rendering for initial render', async () => {
-    function Bar(props) {
-      Scheduler.unstable_yieldValue('Bar');
-      return props.children;
-    }
+      beforeEach(() => {
+        jest.resetModules();
 
-    function Foo() {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <>
-          <Suspense fallback={<Text text="Loading..." />}>
-            <Bar>
-              <AsyncText text="A" ms={100} />
-              <Text text="B" />
-            </Bar>
-          </Suspense>
-          <Text text="C" />
-          <Text text="D" />
-        </>
-      );
-    }
-
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYieldThrough([
-      'Foo',
-      'Bar',
-      // A suspends
-      'Suspend! [A]',
-      // But we keep rendering the siblings
-      'B',
-      'Loading...',
-      'C',
-      // We leave D incomplete.
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Flush the promise completely
-    Scheduler.unstable_advanceTime(100);
-    await advanceTimers(100);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-
-    // Even though the promise has resolved, we should now flush
-    // and commit the in progress render instead of restarting.
-    expect(Scheduler).toFlushAndYield(['D']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Loading...'),
-      span('C'),
-      span('D'),
-    ]);
-
-    // Await one micro task to attach the retry listeners.
-    await null;
-
-    // Next, we'll flush the complete content.
-    expect(Scheduler).toFlushAndYield(['Bar', 'A', 'B']);
-
-    expect(ReactNoop.getChildren()).toEqual([
-      span('A'),
-      span('B'),
-      span('C'),
-      span('D'),
-    ]);
-  });
+        loadModules({
+          deferPassiveEffectCleanupDuringUnmount,
+          runAllPassiveEffectDestroysBeforeCreates,
+        });
+      });
 
-  it('suspends rendering and continues later', async () => {
-    function Bar(props) {
-      Scheduler.unstable_yieldValue('Bar');
-      return props.children;
-    }
-
-    function Foo({renderBar}) {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          {renderBar ? (
-            <Bar>
-              <AsyncText text="A" ms={100} />
-              <Text text="B" />
-            </Bar>
-          ) : null}
-        </Suspense>
-      );
-    }
-
-    // Render empty shell.
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield(['Foo']);
-
-    // The update will suspend.
-    ReactNoop.render(<Foo renderBar={true} />);
-    expect(Scheduler).toFlushAndYield([
-      'Foo',
-      'Bar',
-      // A suspends
-      'Suspend! [A]',
-      // But we keep rendering the siblings
-      'B',
-      'Loading...',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Flush some of the time
-    await advanceTimers(50);
-    // Still nothing...
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Flush the promise completely
-    await advanceTimers(50);
-    // Renders successfully
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
-  });
+      // function div(...children) {
+      //   children = children.map(
+      //     c => (typeof c === 'string' ? {text: c, hidden: false} : c),
+      //   );
+      //   return {type: 'div', children, prop: undefined, hidden: false};
+      // }
 
-  it('suspends siblings and later recovers each independently', async () => {
-    // Render two sibling Suspense components
-    ReactNoop.render(
-      <Fragment>
-        <Suspense fallback={<Text text="Loading A..." />}>
-          <AsyncText text="A" ms={5000} />
-        </Suspense>
-        <Suspense fallback={<Text text="Loading B..." />}>
-          <AsyncText text="B" ms={6000} />
-        </Suspense>
-      </Fragment>,
-    );
-    expect(Scheduler).toFlushAndYield([
-      'Suspend! [A]',
-      'Loading A...',
-      'Suspend! [B]',
-      'Loading B...',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Loading A...'),
-      span('Loading B...'),
-    ]);
-
-    // Advance time by enough that the first Suspense's promise resolves and
-    // switches back to the normal view. The second Suspense should still
-    // show the placeholder
-    ReactNoop.expire(5000);
-    await advanceTimers(5000);
-
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYield(['A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
-
-    // Advance time by enough that the second Suspense's promise resolves
-    // and switches back to the normal view
-    ReactNoop.expire(1000);
-    await advanceTimers(1000);
-
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    expect(Scheduler).toFlushAndYield(['B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
-  });
+      function span(prop) {
+        return {type: 'span', children: [], prop, hidden: false};
+      }
 
-  it('continues rendering siblings after suspending', async () => {
-    // A shell is needed. The update cause it to suspend.
-    ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
-    expect(Scheduler).toFlushAndYield([]);
-    // B suspends. Continue rendering the remaining siblings.
-    ReactNoop.render(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <Text text="A" />
-        <AsyncText text="B" />
-        <Text text="C" />
-        <Text text="D" />
-      </Suspense>,
-    );
-    // B suspends. Continue rendering the remaining siblings.
-    expect(Scheduler).toFlushAndYield([
-      'A',
-      'Suspend! [B]',
-      'C',
-      'D',
-      'Loading...',
-    ]);
-    // Did not commit yet.
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Wait for data to resolve
-    await advanceTimers(100);
-    // Renders successfully
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    expect(Scheduler).toFlushAndYield(['A', 'B', 'C', 'D']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('A'),
-      span('B'),
-      span('C'),
-      span('D'),
-    ]);
-  });
+      function hiddenSpan(prop) {
+        return {type: 'span', children: [], prop, hidden: true};
+      }
 
-  it('retries on error', async () => {
-    class ErrorBoundary extends React.Component {
-      state = {error: null};
-      componentDidCatch(error) {
-        this.setState({error});
+      function advanceTimers(ms) {
+        // Note: This advances Jest's virtual time but not React's. Use
+        // ReactNoop.expire for that.
+        if (typeof ms !== 'number') {
+          throw new Error('Must specify ms');
+        }
+        jest.advanceTimersByTime(ms);
+        // Wait until the end of the current tick
+        // We cannot use a timer since we're faking them
+        return Promise.resolve().then(() => {});
       }
-      reset() {
-        this.setState({error: null});
+
+      function Text(props) {
+        Scheduler.unstable_yieldValue(props.text);
+        return <span prop={props.text} ref={props.hostRef} />;
       }
-      render() {
-        if (this.state.error !== null) {
-          return <Text text={'Caught error: ' + this.state.error.message} />;
+
+      function AsyncText(props) {
+        const text = props.text;
+        try {
+          TextResource.read([props.text, props.ms]);
+          Scheduler.unstable_yieldValue(text);
+          return <span prop={text} />;
+        } catch (promise) {
+          if (typeof promise.then === 'function') {
+            Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+          } else {
+            Scheduler.unstable_yieldValue(`Error! [${text}]`);
+          }
+          throw promise;
         }
-        return this.props.children;
       }
-    }
-
-    const errorBoundary = React.createRef();
-    function App({renderContent}) {
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          {renderContent ? (
-            <ErrorBoundary ref={errorBoundary}>
-              <AsyncText text="Result" ms={1000} />
-            </ErrorBoundary>
-          ) : null}
-        </Suspense>
-      );
-    }
 
-    ReactNoop.render(<App />);
-    expect(Scheduler).toFlushAndYield([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
+      it('warns if the deprecated maxDuration option is used', () => {
+        function Foo() {
+          return (
+            <Suspense maxDuration={100} fallback="Loading...">
+              <div />;
+            </Suspense>
+          );
+        }
+
+        ReactNoop.render(<Foo />);
+
+        expect(() => Scheduler.unstable_flushAll()).toErrorDev([
+          'Warning: maxDuration has been removed from React. ' +
+            'Remove the maxDuration prop.' +
+            '\n    in Suspense (at **)' +
+            '\n    in Foo (at **)',
+        ]);
+      });
+
+      it('does not restart rendering for initial render', async () => {
+        function Bar(props) {
+          Scheduler.unstable_yieldValue('Bar');
+          return props.children;
+        }
+
+        function Foo() {
+          Scheduler.unstable_yieldValue('Foo');
+          return (
+            <>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <Bar>
+                  <AsyncText text="A" ms={100} />
+                  <Text text="B" />
+                </Bar>
+              </Suspense>
+              <Text text="C" />
+              <Text text="D" />
+            </>
+          );
+        }
 
-    ReactNoop.render(<App renderContent={true} />);
-    expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
+        ReactNoop.render(<Foo />);
+        expect(Scheduler).toFlushAndYieldThrough([
+          'Foo',
+          'Bar',
+          // A suspends
+          'Suspend! [A]',
+          // But we keep rendering the siblings
+          'B',
+          'Loading...',
+          'C',
+          // We leave D incomplete.
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([]);
 
-    textResourceShouldFail = true;
-    ReactNoop.expire(1000);
-    await advanceTimers(1000);
-    textResourceShouldFail = false;
+        // Flush the promise completely
+        Scheduler.unstable_advanceTime(100);
+        await advanceTimers(100);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
 
-    expect(Scheduler).toHaveYielded(['Promise rejected [Result]']);
+        // Even though the promise has resolved, we should now flush
+        // and commit the in progress render instead of restarting.
+        expect(Scheduler).toFlushAndYield(['D']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Loading...'),
+          span('C'),
+          span('D'),
+        ]);
 
-    expect(Scheduler).toFlushAndYield([
-      'Error! [Result]',
+        // Await one micro task to attach the retry listeners.
+        await null;
 
-      // React retries one more time
-      'Error! [Result]',
+        // Next, we'll flush the complete content.
+        expect(Scheduler).toFlushAndYield(['Bar', 'A', 'B']);
 
-      // Errored again on retry. Now handle it.
-      'Caught error: Failed to load: Result',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Caught error: Failed to load: Result'),
-    ]);
-  });
+        expect(ReactNoop.getChildren()).toEqual([
+          span('A'),
+          span('B'),
+          span('C'),
+          span('D'),
+        ]);
+      });
 
-  it('retries on error after falling back to a placeholder', async () => {
-    class ErrorBoundary extends React.Component {
-      state = {error: null};
-      componentDidCatch(error) {
-        this.setState({error});
-      }
-      reset() {
-        this.setState({error: null});
-      }
-      render() {
-        if (this.state.error !== null) {
-          return <Text text={'Caught error: ' + this.state.error.message} />;
+      it('suspends rendering and continues later', async () => {
+        function Bar(props) {
+          Scheduler.unstable_yieldValue('Bar');
+          return props.children;
         }
-        return this.props.children;
-      }
-    }
-
-    const errorBoundary = React.createRef();
-    function App() {
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <ErrorBoundary ref={errorBoundary}>
-            <AsyncText text="Result" ms={3000} />
-          </ErrorBoundary>
-        </Suspense>
-      );
-    }
 
-    ReactNoop.render(<App />);
-    expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+        function Foo({renderBar}) {
+          Scheduler.unstable_yieldValue('Foo');
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              {renderBar ? (
+                <Bar>
+                  <AsyncText text="A" ms={100} />
+                  <Text text="B" />
+                </Bar>
+              ) : null}
+            </Suspense>
+          );
+        }
 
-    textResourceShouldFail = true;
-    ReactNoop.expire(3000);
-    await advanceTimers(3000);
-    textResourceShouldFail = false;
+        // Render empty shell.
+        ReactNoop.render(<Foo />);
+        expect(Scheduler).toFlushAndYield(['Foo']);
+
+        // The update will suspend.
+        ReactNoop.render(<Foo renderBar={true} />);
+        expect(Scheduler).toFlushAndYield([
+          'Foo',
+          'Bar',
+          // A suspends
+          'Suspend! [A]',
+          // But we keep rendering the siblings
+          'B',
+          'Loading...',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Flush some of the time
+        await advanceTimers(50);
+        // Still nothing...
+        expect(Scheduler).toFlushWithoutYielding();
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Flush the promise completely
+        await advanceTimers(50);
+        // Renders successfully
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYield(['Foo', 'Bar', 'A', 'B']);
+        expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+      });
 
-    expect(Scheduler).toHaveYielded(['Promise rejected [Result]']);
-    expect(Scheduler).toFlushAndYield([
-      'Error! [Result]',
+      it('suspends siblings and later recovers each independently', async () => {
+        // Render two sibling Suspense components
+        ReactNoop.render(
+          <Fragment>
+            <Suspense fallback={<Text text="Loading A..." />}>
+              <AsyncText text="A" ms={5000} />
+            </Suspense>
+            <Suspense fallback={<Text text="Loading B..." />}>
+              <AsyncText text="B" ms={6000} />
+            </Suspense>
+          </Fragment>,
+        );
+        expect(Scheduler).toFlushAndYield([
+          'Suspend! [A]',
+          'Loading A...',
+          'Suspend! [B]',
+          'Loading B...',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Loading A...'),
+          span('Loading B...'),
+        ]);
 
-      // React retries one more time
-      'Error! [Result]',
+        // Advance time by enough that the first Suspense's promise resolves and
+        // switches back to the normal view. The second Suspense should still
+        // show the placeholder
+        ReactNoop.expire(5000);
+        await advanceTimers(5000);
 
-      // Errored again on retry. Now handle it.
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYield(['A']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('A'),
+          span('Loading B...'),
+        ]);
 
-      'Caught error: Failed to load: Result',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Caught error: Failed to load: Result'),
-    ]);
-  });
+        // Advance time by enough that the second Suspense's promise resolves
+        // and switches back to the normal view
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
 
-  it('can update at a higher priority while in a suspended state', async () => {
-    function App(props) {
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <Text text={props.highPri} />
-          <AsyncText text={props.lowPri} />
-        </Suspense>
-      );
-    }
-
-    // Initial mount
-    ReactNoop.render(<App highPri="A" lowPri="1" />);
-    expect(Scheduler).toFlushAndYield(['A', 'Suspend! [1]', 'Loading...']);
-    await advanceTimers(0);
-    expect(Scheduler).toHaveYielded(['Promise resolved [1]']);
-    expect(Scheduler).toFlushAndYield(['A', '1']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('1')]);
-
-    // Update the low-pri text
-    ReactNoop.render(<App highPri="A" lowPri="2" />);
-    expect(Scheduler).toFlushAndYield([
-      'A',
-      // Suspends
-      'Suspend! [2]',
-      'Loading...',
-    ]);
-
-    // While we're still waiting for the low-pri update to complete, update the
-    // high-pri text at high priority.
-    ReactNoop.flushSync(() => {
-      ReactNoop.render(<App highPri="B" lowPri="1" />);
-    });
-    expect(Scheduler).toHaveYielded(['B', '1']);
-    expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]);
+        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+        expect(Scheduler).toFlushAndYield(['B']);
+        expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+      });
 
-    // Unblock the low-pri text and finish
-    await advanceTimers(0);
-    expect(Scheduler).toHaveYielded(['Promise resolved [2]']);
-    expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]);
-  });
+      it('continues rendering siblings after suspending', async () => {
+        // A shell is needed. The update cause it to suspend.
+        ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
+        expect(Scheduler).toFlushAndYield([]);
+        // B suspends. Continue rendering the remaining siblings.
+        ReactNoop.render(
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Text text="A" />
+            <AsyncText text="B" />
+            <Text text="C" />
+            <Text text="D" />
+          </Suspense>,
+        );
+        // B suspends. Continue rendering the remaining siblings.
+        expect(Scheduler).toFlushAndYield([
+          'A',
+          'Suspend! [B]',
+          'C',
+          'D',
+          'Loading...',
+        ]);
+        // Did not commit yet.
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Wait for data to resolve
+        await advanceTimers(100);
+        // Renders successfully
+        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+        expect(Scheduler).toFlushAndYield(['A', 'B', 'C', 'D']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('A'),
+          span('B'),
+          span('C'),
+          span('D'),
+        ]);
+      });
 
-  it('keeps working on lower priority work after being pinged', async () => {
-    // Advance the virtual time so that we're close to the edge of a bucket.
-    ReactNoop.expire(149);
+      it('retries on error', async () => {
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          componentDidCatch(error) {
+            this.setState({error});
+          }
+          reset() {
+            this.setState({error: null});
+          }
+          render() {
+            if (this.state.error !== null) {
+              return (
+                <Text text={'Caught error: ' + this.state.error.message} />
+              );
+            }
+            return this.props.children;
+          }
+        }
 
-    function App(props) {
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          {props.showA && <AsyncText text="A" />}
-          {props.showB && <Text text="B" />}
-        </Suspense>
-      );
-    }
-
-    ReactNoop.render(<App showA={false} showB={false} />);
-    expect(Scheduler).toFlushAndYield([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    ReactNoop.render(<App showA={true} showB={false} />);
-    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Advance React's virtual time by enough to fall into a new async bucket,
-    // but not enough to expire the suspense timeout.
-    ReactNoop.expire(120);
-    ReactNoop.render(<App showA={true} showB={true} />);
-    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'B', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    await advanceTimers(0);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYield(['A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
-  });
+        const errorBoundary = React.createRef();
+        function App({renderContent}) {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              {renderContent ? (
+                <ErrorBoundary ref={errorBoundary}>
+                  <AsyncText text="Result" ms={1000} />
+                </ErrorBoundary>
+              ) : null}
+            </Suspense>
+          );
+        }
 
-  it('tries rendering a lower priority pending update even if a higher priority one suspends', async () => {
-    function App(props) {
-      if (props.hide) {
-        return <Text text="(empty)" />;
-      }
-      return (
-        <Suspense fallback="Loading...">
-          <AsyncText ms={2000} text="Async" />
-        </Suspense>
-      );
-    }
+        ReactNoop.render(<App />);
+        expect(Scheduler).toFlushAndYield([]);
+        expect(ReactNoop.getChildren()).toEqual([]);
 
-    // Schedule a high pri update and a low pri update, without rendering in
-    // between.
-    ReactNoop.discreteUpdates(() => {
-      // High pri
-      ReactNoop.render(<App />);
-    });
-    // Low pri
-    ReactNoop.render(<App hide={true} />);
-
-    expect(Scheduler).toFlushAndYield([
-      // The first update suspends
-      'Suspend! [Async]',
-      // but we have another pending update that we can work on
-      '(empty)',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);
-  });
+        ReactNoop.render(<App renderContent={true} />);
+        expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
+        expect(ReactNoop.getChildren()).toEqual([]);
 
-  it('tries each subsequent level after suspending', async () => {
-    const root = ReactNoop.createRoot();
-
-    function App({step, shouldSuspend}) {
-      return (
-        <Suspense fallback="Loading...">
-          <Text text="Sibling" />
-          {shouldSuspend ? (
-            <AsyncText ms={10000} text={'Step ' + step} />
-          ) : (
-            <Text text={'Step ' + step} />
-          )}
-        </Suspense>
-      );
-    }
+        textResourceShouldFail = true;
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+        textResourceShouldFail = false;
+
+        expect(Scheduler).toHaveYielded(['Promise rejected [Result]']);
+
+        expect(Scheduler).toFlushAndYield([
+          'Error! [Result]',
 
-    function interrupt() {
-      // React has a heuristic to batch all updates that occur within the same
-      // event. This is a trick to circumvent that heuristic.
-      ReactNoop.flushSync(() => {
-        ReactNoop.renderToRootWithID(null, 'other-root');
+          // React retries one more time
+          'Error! [Result]',
+
+          // Errored again on retry. Now handle it.
+          'Caught error: Failed to load: Result',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Caught error: Failed to load: Result'),
+        ]);
       });
-    }
 
-    // Mount the Suspense boundary without suspending, so that the subsequent
-    // updates suspend with a delay.
-    await ReactNoop.act(async () => {
-      root.render(<App step={0} shouldSuspend={false} />);
-    });
-    await advanceTimers(1000);
-    expect(Scheduler).toHaveYielded(['Sibling', 'Step 0']);
-
-    // Schedule an update at several distinct expiration times
-    await ReactNoop.act(async () => {
-      root.render(<App step={1} shouldSuspend={true} />);
-      Scheduler.unstable_advanceTime(1000);
-      expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
-      interrupt();
-
-      root.render(<App step={2} shouldSuspend={true} />);
-      Scheduler.unstable_advanceTime(1000);
-      expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
-      interrupt();
-
-      root.render(<App step={3} shouldSuspend={true} />);
-      Scheduler.unstable_advanceTime(1000);
-      expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
-      interrupt();
-
-      root.render(<App step={4} shouldSuspend={false} />);
-    });
+      it('retries on error after falling back to a placeholder', async () => {
+        class ErrorBoundary extends React.Component {
+          state = {error: null};
+          componentDidCatch(error) {
+            this.setState({error});
+          }
+          reset() {
+            this.setState({error: null});
+          }
+          render() {
+            if (this.state.error !== null) {
+              return (
+                <Text text={'Caught error: ' + this.state.error.message} />
+              );
+            }
+            return this.props.children;
+          }
+        }
 
-    // Should suspend at each distinct level
-    expect(Scheduler).toHaveYielded([
-      'Sibling',
-      'Suspend! [Step 1]',
-      'Sibling',
-      'Suspend! [Step 2]',
-      'Sibling',
-      'Suspend! [Step 3]',
-      'Sibling',
-      'Step 4',
-    ]);
-  });
+        const errorBoundary = React.createRef();
+        function App() {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <ErrorBoundary ref={errorBoundary}>
+                <AsyncText text="Result" ms={3000} />
+              </ErrorBoundary>
+            </Suspense>
+          );
+        }
 
-  it('forces an expiration after an update times out', async () => {
-    ReactNoop.render(
-      <Fragment>
-        <Suspense fallback={<Text text="Loading..." />} />
-      </Fragment>,
-    );
-    expect(Scheduler).toFlushAndYield([]);
-
-    ReactNoop.render(
-      <Fragment>
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="Async" ms={20000} />
-        </Suspense>
-        <Text text="Sync" />
-      </Fragment>,
-    );
-
-    expect(Scheduler).toFlushAndYield([
-      // The async child suspends
-      'Suspend! [Async]',
-      // Render the placeholder
-      'Loading...',
-      // Continue on the sibling
-      'Sync',
-    ]);
-    // The update hasn't expired yet, so we commit nothing.
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Advance both React's virtual time and Jest's timers by enough to expire
-    // the update, but not by enough to flush the suspending promise.
-    ReactNoop.expire(10000);
-    await advanceTimers(10000);
-    // No additional rendering work is required, since we already prepared
-    // the placeholder.
-    expect(Scheduler).toHaveYielded([]);
-    // Should have committed the placeholder.
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...'), span('Sync')]);
-
-    // Once the promise resolves, we render the suspended view
-    await advanceTimers(10000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
-    expect(Scheduler).toFlushAndYield(['Async']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
-  });
+        ReactNoop.render(<App />);
+        expect(Scheduler).toFlushAndYield(['Suspend! [Result]', 'Loading...']);
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-  it('switches to an inner fallback after suspending for a while', async () => {
-    // Advance the virtual time so that we're closer to the edge of a bucket.
-    ReactNoop.expire(200);
-
-    ReactNoop.render(
-      <Fragment>
-        <Text text="Sync" />
-        <Suspense fallback={<Text text="Loading outer..." />}>
-          <AsyncText text="Outer content" ms={300} />
-          <Suspense fallback={<Text text="Loading inner..." />}>
-            <AsyncText text="Inner content" ms={1000} />
-          </Suspense>
-        </Suspense>
-      </Fragment>,
-    );
-
-    expect(Scheduler).toFlushAndYield([
-      'Sync',
-      // The async content suspends
-      'Suspend! [Outer content]',
-      'Suspend! [Inner content]',
-      'Loading inner...',
-      'Loading outer...',
-    ]);
-    // The outer loading state finishes immediately.
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Sync'),
-      span('Loading outer...'),
-    ]);
-
-    // Resolve the outer promise.
-    ReactNoop.expire(300);
-    await advanceTimers(300);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Outer content]']);
-    expect(Scheduler).toFlushAndYield([
-      'Outer content',
-      'Suspend! [Inner content]',
-      'Loading inner...',
-    ]);
-    // Don't commit the inner placeholder yet.
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Sync'),
-      span('Loading outer...'),
-    ]);
-
-    // Expire the inner timeout.
-    ReactNoop.expire(500);
-    await advanceTimers(500);
-    // Now that 750ms have elapsed since the outer placeholder timed out,
-    // we can timeout the inner placeholder.
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Sync'),
-      span('Outer content'),
-      span('Loading inner...'),
-    ]);
-
-    // Finally, flush the inner promise. We should see the complete screen.
-    ReactNoop.expire(1000);
-    await advanceTimers(1000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Inner content]']);
-    expect(Scheduler).toFlushAndYield(['Inner content']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Sync'),
-      span('Outer content'),
-      span('Inner content'),
-    ]);
-  });
+        textResourceShouldFail = true;
+        ReactNoop.expire(3000);
+        await advanceTimers(3000);
+        textResourceShouldFail = false;
 
-  it('renders an expiration boundary synchronously', async () => {
-    spyOnDev(console, 'error');
-    // Synchronously render a tree that suspends
-    ReactNoop.flushSync(() =>
-      ReactNoop.render(
-        <Fragment>
-          <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText text="Async" />
-          </Suspense>
-          <Text text="Sync" />
-        </Fragment>,
-      ),
-    );
-    expect(Scheduler).toHaveYielded([
-      // The async child suspends
-      'Suspend! [Async]',
-      // We immediately render the fallback UI
-      'Loading...',
-      // Continue on the sibling
-      'Sync',
-    ]);
-    // The tree commits synchronously
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...'), span('Sync')]);
-
-    // Once the promise resolves, we render the suspended view
-    await advanceTimers(0);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
-    expect(Scheduler).toFlushAndYield(['Async']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
-  });
+        expect(Scheduler).toHaveYielded(['Promise rejected [Result]']);
+        expect(Scheduler).toFlushAndYield([
+          'Error! [Result]',
+
+          // React retries one more time
+          'Error! [Result]',
+
+          // Errored again on retry. Now handle it.
+
+          'Caught error: Failed to load: Result',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Caught error: Failed to load: Result'),
+        ]);
+      });
 
-  it('suspending inside an expired expiration boundary will bubble to the next one', async () => {
-    ReactNoop.flushSync(() =>
-      ReactNoop.render(
-        <Fragment>
-          <Suspense fallback={<Text text="Loading (outer)..." />}>
-            <Suspense fallback={<AsyncText text="Loading (inner)..." />}>
-              <AsyncText text="Async" />
+      it('can update at a higher priority while in a suspended state', async () => {
+        function App(props) {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Text text={props.highPri} />
+              <AsyncText text={props.lowPri} />
+            </Suspense>
+          );
+        }
+
+        // Initial mount
+        ReactNoop.render(<App highPri="A" lowPri="1" />);
+        expect(Scheduler).toFlushAndYield(['A', 'Suspend! [1]', 'Loading...']);
+        await advanceTimers(0);
+        expect(Scheduler).toHaveYielded(['Promise resolved [1]']);
+        expect(Scheduler).toFlushAndYield(['A', '1']);
+        expect(ReactNoop.getChildren()).toEqual([span('A'), span('1')]);
+
+        // Update the low-pri text
+        ReactNoop.render(<App highPri="A" lowPri="2" />);
+        expect(Scheduler).toFlushAndYield([
+          'A',
+          // Suspends
+          'Suspend! [2]',
+          'Loading...',
+        ]);
+
+        // While we're still waiting for the low-pri update to complete, update the
+        // high-pri text at high priority.
+        ReactNoop.flushSync(() => {
+          ReactNoop.render(<App highPri="B" lowPri="1" />);
+        });
+        expect(Scheduler).toHaveYielded(['B', '1']);
+        expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]);
+
+        // Unblock the low-pri text and finish
+        await advanceTimers(0);
+        expect(Scheduler).toHaveYielded(['Promise resolved [2]']);
+        expect(ReactNoop.getChildren()).toEqual([span('B'), span('1')]);
+      });
+
+      it('keeps working on lower priority work after being pinged', async () => {
+        // Advance the virtual time so that we're close to the edge of a bucket.
+        ReactNoop.expire(149);
+
+        function App(props) {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              {props.showA && <AsyncText text="A" />}
+              {props.showB && <Text text="B" />}
+            </Suspense>
+          );
+        }
+
+        ReactNoop.render(<App showA={false} showB={false} />);
+        expect(Scheduler).toFlushAndYield([]);
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        ReactNoop.render(<App showA={true} showB={false} />);
+        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Advance React's virtual time by enough to fall into a new async bucket,
+        // but not enough to expire the suspense timeout.
+        ReactNoop.expire(120);
+        ReactNoop.render(<App showA={true} showB={true} />);
+        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'B', 'Loading...']);
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        await advanceTimers(0);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYield(['A', 'B']);
+        expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+      });
+
+      it('tries rendering a lower priority pending update even if a higher priority one suspends', async () => {
+        function App(props) {
+          if (props.hide) {
+            return <Text text="(empty)" />;
+          }
+          return (
+            <Suspense fallback="Loading...">
+              <AsyncText ms={2000} text="Async" />
+            </Suspense>
+          );
+        }
+
+        // Schedule a high pri update and a low pri update, without rendering in
+        // between.
+        ReactNoop.discreteUpdates(() => {
+          // High pri
+          ReactNoop.render(<App />);
+        });
+        // Low pri
+        ReactNoop.render(<App hide={true} />);
+
+        expect(Scheduler).toFlushAndYield([
+          // The first update suspends
+          'Suspend! [Async]',
+          // but we have another pending update that we can work on
+          '(empty)',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('(empty)')]);
+      });
+
+      it('tries each subsequent level after suspending', async () => {
+        const root = ReactNoop.createRoot();
+
+        function App({step, shouldSuspend}) {
+          return (
+            <Suspense fallback="Loading...">
+              <Text text="Sibling" />
+              {shouldSuspend ? (
+                <AsyncText ms={10000} text={'Step ' + step} />
+              ) : (
+                <Text text={'Step ' + step} />
+              )}
+            </Suspense>
+          );
+        }
+
+        function interrupt() {
+          // React has a heuristic to batch all updates that occur within the same
+          // event. This is a trick to circumvent that heuristic.
+          ReactNoop.flushSync(() => {
+            ReactNoop.renderToRootWithID(null, 'other-root');
+          });
+        }
+
+        // Mount the Suspense boundary without suspending, so that the subsequent
+        // updates suspend with a delay.
+        await ReactNoop.act(async () => {
+          root.render(<App step={0} shouldSuspend={false} />);
+        });
+        await advanceTimers(1000);
+        expect(Scheduler).toHaveYielded(['Sibling', 'Step 0']);
+
+        // Schedule an update at several distinct expiration times
+        await ReactNoop.act(async () => {
+          root.render(<App step={1} shouldSuspend={true} />);
+          Scheduler.unstable_advanceTime(1000);
+          expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
+          interrupt();
+
+          root.render(<App step={2} shouldSuspend={true} />);
+          Scheduler.unstable_advanceTime(1000);
+          expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
+          interrupt();
+
+          root.render(<App step={3} shouldSuspend={true} />);
+          Scheduler.unstable_advanceTime(1000);
+          expect(Scheduler).toFlushAndYieldThrough(['Sibling']);
+          interrupt();
+
+          root.render(<App step={4} shouldSuspend={false} />);
+        });
+
+        // Should suspend at each distinct level
+        expect(Scheduler).toHaveYielded([
+          'Sibling',
+          'Suspend! [Step 1]',
+          'Sibling',
+          'Suspend! [Step 2]',
+          'Sibling',
+          'Suspend! [Step 3]',
+          'Sibling',
+          'Step 4',
+        ]);
+      });
+
+      it('forces an expiration after an update times out', async () => {
+        ReactNoop.render(
+          <Fragment>
+            <Suspense fallback={<Text text="Loading..." />} />
+          </Fragment>,
+        );
+        expect(Scheduler).toFlushAndYield([]);
+
+        ReactNoop.render(
+          <Fragment>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="Async" ms={20000} />
             </Suspense>
             <Text text="Sync" />
-          </Suspense>
-        </Fragment>,
-      ),
-    );
-    expect(Scheduler).toHaveYielded([
-      'Suspend! [Async]',
-      'Suspend! [Loading (inner)...]',
-      'Sync',
-      'Loading (outer)...',
-    ]);
-    // The tree commits synchronously
-    expect(ReactNoop.getChildren()).toEqual([span('Loading (outer)...')]);
-  });
+          </Fragment>,
+        );
 
-  it('expires early by default', async () => {
-    ReactNoop.render(
-      <Fragment>
-        <Suspense fallback={<Text text="Loading..." />} />
-      </Fragment>,
-    );
-    expect(Scheduler).toFlushAndYield([]);
-
-    ReactNoop.render(
-      <Fragment>
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="Async" ms={3000} />
-        </Suspense>
-        <Text text="Sync" />
-      </Fragment>,
-    );
-
-    expect(Scheduler).toFlushAndYield([
-      // The async child suspends
-      'Suspend! [Async]',
-      'Loading...',
-      // Continue on the sibling
-      'Sync',
-    ]);
-    // The update hasn't expired yet, so we commit nothing.
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Advance both React's virtual time and Jest's timers by enough to trigger
-    // the timeout, but not by enough to flush the promise or reach the true
-    // expiration time.
-    ReactNoop.expire(2000);
-    await advanceTimers(2000);
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...'), span('Sync')]);
-
-    // Once the promise resolves, we render the suspended view
-    await advanceTimers(1000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
-    expect(Scheduler).toFlushAndYield(['Async']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
-  });
+        expect(Scheduler).toFlushAndYield([
+          // The async child suspends
+          'Suspend! [Async]',
+          // Render the placeholder
+          'Loading...',
+          // Continue on the sibling
+          'Sync',
+        ]);
+        // The update hasn't expired yet, so we commit nothing.
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Advance both React's virtual time and Jest's timers by enough to expire
+        // the update, but not by enough to flush the suspending promise.
+        ReactNoop.expire(10000);
+        await advanceTimers(10000);
+        // No additional rendering work is required, since we already prepared
+        // the placeholder.
+        expect(Scheduler).toHaveYielded([]);
+        // Should have committed the placeholder.
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Loading...'),
+          span('Sync'),
+        ]);
 
-  it('resolves successfully even if fallback render is pending', async () => {
-    ReactNoop.render(
-      <>
-        <Suspense fallback={<Text text="Loading..." />} />
-      </>,
-    );
-    expect(Scheduler).toFlushAndYield([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
-    ReactNoop.render(
-      <>
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="Async" ms={3000} />
-        </Suspense>
-      </>,
-    );
-    expect(ReactNoop.flushNextYield()).toEqual(['Suspend! [Async]']);
-    await advanceTimers(1500);
-    expect(Scheduler).toHaveYielded([]);
-    expect(ReactNoop.getChildren()).toEqual([]);
-    // Before we have a chance to flush, the promise resolves.
-    await advanceTimers(2000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
-    expect(Scheduler).toFlushAndYield([
-      // We've now pinged the boundary but we don't know if we should restart yet,
-      // because we haven't completed the suspense boundary.
-      'Loading...',
-      // Once we've completed the boundary we restarted.
-      'Async',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Async')]);
-  });
+        // Once the promise resolves, we render the suspended view
+        await advanceTimers(10000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+        expect(Scheduler).toFlushAndYield(['Async']);
+        expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
+      });
 
-  it('throws a helpful error when an update is suspends without a placeholder', () => {
-    ReactNoop.render(<AsyncText ms={1000} text="Async" />);
-    expect(Scheduler).toFlushAndThrow(
-      'AsyncText suspended while rendering, but no fallback UI was specified.',
-    );
-  });
+      it('switches to an inner fallback after suspending for a while', async () => {
+        // Advance the virtual time so that we're closer to the edge of a bucket.
+        ReactNoop.expire(200);
 
-  it('a Suspense component correctly handles more than one suspended child', async () => {
-    ReactNoop.render(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <AsyncText text="A" ms={100} />
-        <AsyncText text="B" ms={100} />
-      </Suspense>,
-    );
-    Scheduler.unstable_advanceTime(10000);
-    expect(Scheduler).toFlushExpired([
-      'Suspend! [A]',
-      'Suspend! [B]',
-      'Loading...',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-    await advanceTimers(100);
-
-    expect(Scheduler).toHaveYielded([
-      'Promise resolved [A]',
-      'Promise resolved [B]',
-    ]);
-    expect(Scheduler).toFlushAndYield(['A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
-  });
+        ReactNoop.render(
+          <Fragment>
+            <Text text="Sync" />
+            <Suspense fallback={<Text text="Loading outer..." />}>
+              <AsyncText text="Outer content" ms={300} />
+              <Suspense fallback={<Text text="Loading inner..." />}>
+                <AsyncText text="Inner content" ms={1000} />
+              </Suspense>
+            </Suspense>
+          </Fragment>,
+        );
 
-  it('can resume rendering earlier than a timeout', async () => {
-    ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
-    expect(Scheduler).toFlushAndYield([]);
-
-    ReactNoop.render(
-      <Suspense fallback={<Text text="Loading..." />}>
-        <AsyncText text="Async" ms={100} />
-      </Suspense>,
-    );
-    expect(Scheduler).toFlushAndYield(['Suspend! [Async]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Advance time by an amount slightly smaller than what's necessary to
-    // resolve the promise
-    await advanceTimers(99);
-
-    // Nothing has rendered yet
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Resolve the promise
-    await advanceTimers(1);
-    // We can now resume rendering
-    expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
-    expect(Scheduler).toFlushAndYield(['Async']);
-    expect(ReactNoop.getChildren()).toEqual([span('Async')]);
-  });
+        expect(Scheduler).toFlushAndYield([
+          'Sync',
+          // The async content suspends
+          'Suspend! [Outer content]',
+          'Suspend! [Inner content]',
+          'Loading inner...',
+          'Loading outer...',
+        ]);
+        // The outer loading state finishes immediately.
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Sync'),
+          span('Loading outer...'),
+        ]);
 
-  it('starts working on an update even if its priority falls between two suspended levels', async () => {
-    function App(props) {
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          {props.text === 'C' || props.text === 'S' ? (
-            <Text text={props.text} />
-          ) : (
-            <AsyncText text={props.text} ms={10000} />
-          )}
-        </Suspense>
-      );
-    }
-
-    // First mount without suspending. This ensures we already have content
-    // showing so that subsequent updates will suspend.
-    ReactNoop.render(<App text="S" />);
-    expect(Scheduler).toFlushAndYield(['S']);
-
-    // Schedule an update, and suspend for up to 5 seconds.
-    React.unstable_withSuspenseConfig(
-      () => ReactNoop.render(<App text="A" />),
-      {
-        timeoutMs: 5000,
-      },
-    );
-    // The update should suspend.
-    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([span('S')]);
-
-    // Advance time until right before it expires.
-    await advanceTimers(4999);
-    ReactNoop.expire(4999);
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('S')]);
-
-    // Schedule another low priority update.
-    React.unstable_withSuspenseConfig(
-      () => ReactNoop.render(<App text="B" />),
-      {
-        timeoutMs: 10000,
-      },
-    );
-    // This update should also suspend.
-    expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-    expect(ReactNoop.getChildren()).toEqual([span('S')]);
-
-    // Schedule a regular update. Its expiration time will fall between
-    // the expiration times of the previous two updates.
-    ReactNoop.render(<App text="C" />);
-    expect(Scheduler).toFlushAndYield(['C']);
-    expect(ReactNoop.getChildren()).toEqual([span('C')]);
-
-    await advanceTimers(10000);
-    // Flush the remaining work.
-    expect(Scheduler).toHaveYielded([
-      'Promise resolved [A]',
-      'Promise resolved [B]',
-    ]);
-    // Nothing else to render.
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('C')]);
-  });
+        // Resolve the outer promise.
+        ReactNoop.expire(300);
+        await advanceTimers(300);
+        expect(Scheduler).toHaveYielded(['Promise resolved [Outer content]']);
+        expect(Scheduler).toFlushAndYield([
+          'Outer content',
+          'Suspend! [Inner content]',
+          'Loading inner...',
+        ]);
+        // Don't commit the inner placeholder yet.
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Sync'),
+          span('Loading outer...'),
+        ]);
 
-  it('flushes all expired updates in a single batch', async () => {
-    class Foo extends React.Component {
-      componentDidUpdate() {
-        Scheduler.unstable_yieldValue('Commit: ' + this.props.text);
-      }
-      componentDidMount() {
-        Scheduler.unstable_yieldValue('Commit: ' + this.props.text);
-      }
-      render() {
-        return (
+        // Expire the inner timeout.
+        ReactNoop.expire(500);
+        await advanceTimers(500);
+        // Now that 750ms have elapsed since the outer placeholder timed out,
+        // we can timeout the inner placeholder.
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Sync'),
+          span('Outer content'),
+          span('Loading inner...'),
+        ]);
+
+        // Finally, flush the inner promise. We should see the complete screen.
+        ReactNoop.expire(1000);
+        await advanceTimers(1000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [Inner content]']);
+        expect(Scheduler).toFlushAndYield(['Inner content']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Sync'),
+          span('Outer content'),
+          span('Inner content'),
+        ]);
+      });
+
+      it('renders an expiration boundary synchronously', async () => {
+        spyOnDev(console, 'error');
+        // Synchronously render a tree that suspends
+        ReactNoop.flushSync(() =>
+          ReactNoop.render(
+            <Fragment>
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText text="Async" />
+              </Suspense>
+              <Text text="Sync" />
+            </Fragment>,
+          ),
+        );
+        expect(Scheduler).toHaveYielded([
+          // The async child suspends
+          'Suspend! [Async]',
+          // We immediately render the fallback UI
+          'Loading...',
+          // Continue on the sibling
+          'Sync',
+        ]);
+        // The tree commits synchronously
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Loading...'),
+          span('Sync'),
+        ]);
+
+        // Once the promise resolves, we render the suspended view
+        await advanceTimers(0);
+        expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+        expect(Scheduler).toFlushAndYield(['Async']);
+        expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
+      });
+
+      it('suspending inside an expired expiration boundary will bubble to the next one', async () => {
+        ReactNoop.flushSync(() =>
+          ReactNoop.render(
+            <Fragment>
+              <Suspense fallback={<Text text="Loading (outer)..." />}>
+                <Suspense fallback={<AsyncText text="Loading (inner)..." />}>
+                  <AsyncText text="Async" />
+                </Suspense>
+                <Text text="Sync" />
+              </Suspense>
+            </Fragment>,
+          ),
+        );
+        expect(Scheduler).toHaveYielded([
+          'Suspend! [Async]',
+          'Suspend! [Loading (inner)...]',
+          'Sync',
+          'Loading (outer)...',
+        ]);
+        // The tree commits synchronously
+        expect(ReactNoop.getChildren()).toEqual([span('Loading (outer)...')]);
+      });
+
+      it('expires early by default', async () => {
+        ReactNoop.render(
+          <Fragment>
+            <Suspense fallback={<Text text="Loading..." />} />
+          </Fragment>,
+        );
+        expect(Scheduler).toFlushAndYield([]);
+
+        ReactNoop.render(
+          <Fragment>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="Async" ms={3000} />
+            </Suspense>
+            <Text text="Sync" />
+          </Fragment>,
+        );
+
+        expect(Scheduler).toFlushAndYield([
+          // The async child suspends
+          'Suspend! [Async]',
+          'Loading...',
+          // Continue on the sibling
+          'Sync',
+        ]);
+        // The update hasn't expired yet, so we commit nothing.
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Advance both React's virtual time and Jest's timers by enough to trigger
+        // the timeout, but not by enough to flush the promise or reach the true
+        // expiration time.
+        ReactNoop.expire(2000);
+        await advanceTimers(2000);
+        expect(Scheduler).toFlushWithoutYielding();
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Loading...'),
+          span('Sync'),
+        ]);
+
+        // Once the promise resolves, we render the suspended view
+        await advanceTimers(1000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+        expect(Scheduler).toFlushAndYield(['Async']);
+        expect(ReactNoop.getChildren()).toEqual([span('Async'), span('Sync')]);
+      });
+
+      it('resolves successfully even if fallback render is pending', async () => {
+        ReactNoop.render(
+          <>
+            <Suspense fallback={<Text text="Loading..." />} />
+          </>,
+        );
+        expect(Scheduler).toFlushAndYield([]);
+        expect(ReactNoop.getChildren()).toEqual([]);
+        ReactNoop.render(
+          <>
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="Async" ms={3000} />
+            </Suspense>
+          </>,
+        );
+        expect(ReactNoop.flushNextYield()).toEqual(['Suspend! [Async]']);
+        await advanceTimers(1500);
+        expect(Scheduler).toHaveYielded([]);
+        expect(ReactNoop.getChildren()).toEqual([]);
+        // Before we have a chance to flush, the promise resolves.
+        await advanceTimers(2000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+        expect(Scheduler).toFlushAndYield([
+          // We've now pinged the boundary but we don't know if we should restart yet,
+          // because we haven't completed the suspense boundary.
+          'Loading...',
+          // Once we've completed the boundary we restarted.
+          'Async',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+      });
+
+      it('throws a helpful error when an update is suspends without a placeholder', () => {
+        ReactNoop.render(<AsyncText ms={1000} text="Async" />);
+        expect(Scheduler).toFlushAndThrow(
+          'AsyncText suspended while rendering, but no fallback UI was specified.',
+        );
+      });
+
+      it('a Suspense component correctly handles more than one suspended child', async () => {
+        ReactNoop.render(
           <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText ms={20000} text={this.props.text} />
-          </Suspense>
+            <AsyncText text="A" ms={100} />
+            <AsyncText text="B" ms={100} />
+          </Suspense>,
         );
-      }
-    }
-
-    ReactNoop.render(<Foo text="" />);
-    ReactNoop.expire(1000);
-    jest.advanceTimersByTime(1000);
-    ReactNoop.render(<Foo text="go" />);
-    ReactNoop.expire(1000);
-    jest.advanceTimersByTime(1000);
-    ReactNoop.render(<Foo text="good" />);
-    ReactNoop.expire(1000);
-    jest.advanceTimersByTime(1000);
-    ReactNoop.render(<Foo text="goodbye" />);
-
-    Scheduler.unstable_advanceTime(10000);
-    jest.advanceTimersByTime(10000);
-
-    expect(Scheduler).toFlushExpired([
-      'Suspend! [goodbye]',
-      'Loading...',
-      'Commit: goodbye',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-    Scheduler.unstable_advanceTime(20000);
-    await advanceTimers(20000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [goodbye]']);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-    expect(Scheduler).toFlushAndYield(['goodbye']);
-    expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
-  });
+        Scheduler.unstable_advanceTime(10000);
+        expect(Scheduler).toFlushExpired([
+          'Suspend! [A]',
+          'Suspend! [B]',
+          'Loading...',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-  it('a suspended update that expires', async () => {
-    // Regression test. This test used to fall into an infinite loop.
-    function ExpensiveText({text}) {
-      // This causes the update to expire.
-      Scheduler.unstable_advanceTime(10000);
-      // Then something suspends.
-      return <AsyncText text={text} ms={200000} />;
-    }
-
-    function App() {
-      return (
-        <Suspense fallback="Loading...">
-          <ExpensiveText text="A" />
-          <ExpensiveText text="B" />
-          <ExpensiveText text="C" />
-        </Suspense>
-      );
-    }
-
-    ReactNoop.render(<App />);
-    expect(Scheduler).toFlushAndYield([
-      'Suspend! [A]',
-      'Suspend! [B]',
-      'Suspend! [C]',
-    ]);
-    expect(ReactNoop).toMatchRenderedOutput('Loading...');
-
-    await advanceTimers(200000);
-    expect(Scheduler).toHaveYielded([
-      'Promise resolved [A]',
-      'Promise resolved [B]',
-      'Promise resolved [C]',
-    ]);
-
-    expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <span prop="A" />
-        <span prop="B" />
-        <span prop="C" />
-      </>,
-    );
-  });
+        await advanceTimers(100);
+
+        expect(Scheduler).toHaveYielded([
+          'Promise resolved [A]',
+          'Promise resolved [B]',
+        ]);
+        expect(Scheduler).toFlushAndYield(['A', 'B']);
+        expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+      });
 
-  describe('legacy mode mode', () => {
-    it('times out immediately', async () => {
-      function App() {
-        return (
+      it('can resume rendering earlier than a timeout', async () => {
+        ReactNoop.render(<Suspense fallback={<Text text="Loading..." />} />);
+        expect(Scheduler).toFlushAndYield([]);
+
+        ReactNoop.render(
           <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText ms={100} text="Result" />
-          </Suspense>
+            <AsyncText text="Async" ms={100} />
+          </Suspense>,
         );
-      }
+        expect(Scheduler).toFlushAndYield(['Suspend! [Async]', 'Loading...']);
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Advance time by an amount slightly smaller than what's necessary to
+        // resolve the promise
+        await advanceTimers(99);
+
+        // Nothing has rendered yet
+        expect(Scheduler).toFlushWithoutYielding();
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Resolve the promise
+        await advanceTimers(1);
+        // We can now resume rendering
+        expect(Scheduler).toHaveYielded(['Promise resolved [Async]']);
+        expect(Scheduler).toFlushAndYield(['Async']);
+        expect(ReactNoop.getChildren()).toEqual([span('Async')]);
+      });
+
+      it('starts working on an update even if its priority falls between two suspended levels', async () => {
+        function App(props) {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              {props.text === 'C' || props.text === 'S' ? (
+                <Text text={props.text} />
+              ) : (
+                <AsyncText text={props.text} ms={10000} />
+              )}
+            </Suspense>
+          );
+        }
+
+        // First mount without suspending. This ensures we already have content
+        // showing so that subsequent updates will suspend.
+        ReactNoop.render(<App text="S" />);
+        expect(Scheduler).toFlushAndYield(['S']);
+
+        // Schedule an update, and suspend for up to 5 seconds.
+        React.unstable_withSuspenseConfig(
+          () => ReactNoop.render(<App text="A" />),
+          {
+            timeoutMs: 5000,
+          },
+        );
+        // The update should suspend.
+        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+        expect(ReactNoop.getChildren()).toEqual([span('S')]);
+
+        // Advance time until right before it expires.
+        await advanceTimers(4999);
+        ReactNoop.expire(4999);
+        expect(Scheduler).toFlushWithoutYielding();
+        expect(ReactNoop.getChildren()).toEqual([span('S')]);
+
+        // Schedule another low priority update.
+        React.unstable_withSuspenseConfig(
+          () => ReactNoop.render(<App text="B" />),
+          {
+            timeoutMs: 10000,
+          },
+        );
+        // This update should also suspend.
+        expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
+        expect(ReactNoop.getChildren()).toEqual([span('S')]);
+
+        // Schedule a regular update. Its expiration time will fall between
+        // the expiration times of the previous two updates.
+        ReactNoop.render(<App text="C" />);
+        expect(Scheduler).toFlushAndYield(['C']);
+        expect(ReactNoop.getChildren()).toEqual([span('C')]);
+
+        await advanceTimers(10000);
+        // Flush the remaining work.
+        expect(Scheduler).toHaveYielded([
+          'Promise resolved [A]',
+          'Promise resolved [B]',
+        ]);
+        // Nothing else to render.
+        expect(Scheduler).toFlushWithoutYielding();
+        expect(ReactNoop.getChildren()).toEqual([span('C')]);
+      });
+
+      it('flushes all expired updates in a single batch', async () => {
+        class Foo extends React.Component {
+          componentDidUpdate() {
+            Scheduler.unstable_yieldValue('Commit: ' + this.props.text);
+          }
+          componentDidMount() {
+            Scheduler.unstable_yieldValue('Commit: ' + this.props.text);
+          }
+          render() {
+            return (
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText ms={20000} text={this.props.text} />
+              </Suspense>
+            );
+          }
+        }
+
+        ReactNoop.render(<Foo text="" />);
+        ReactNoop.expire(1000);
+        jest.advanceTimersByTime(1000);
+        ReactNoop.render(<Foo text="go" />);
+        ReactNoop.expire(1000);
+        jest.advanceTimersByTime(1000);
+        ReactNoop.render(<Foo text="good" />);
+        ReactNoop.expire(1000);
+        jest.advanceTimersByTime(1000);
+        ReactNoop.render(<Foo text="goodbye" />);
+
+        Scheduler.unstable_advanceTime(10000);
+        jest.advanceTimersByTime(10000);
+
+        expect(Scheduler).toFlushExpired([
+          'Suspend! [goodbye]',
+          'Loading...',
+          'Commit: goodbye',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+        Scheduler.unstable_advanceTime(20000);
+        await advanceTimers(20000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [goodbye]']);
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+        expect(Scheduler).toFlushAndYield(['goodbye']);
+        expect(ReactNoop.getChildren()).toEqual([span('goodbye')]);
+      });
+
+      it('a suspended update that expires', async () => {
+        // Regression test. This test used to fall into an infinite loop.
+        function ExpensiveText({text}) {
+          // This causes the update to expire.
+          Scheduler.unstable_advanceTime(10000);
+          // Then something suspends.
+          return <AsyncText text={text} ms={200000} />;
+        }
+
+        function App() {
+          return (
+            <Suspense fallback="Loading...">
+              <ExpensiveText text="A" />
+              <ExpensiveText text="B" />
+              <ExpensiveText text="C" />
+            </Suspense>
+          );
+        }
+
+        ReactNoop.render(<App />);
+        expect(Scheduler).toFlushAndYield([
+          'Suspend! [A]',
+          'Suspend! [B]',
+          'Suspend! [C]',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput('Loading...');
+
+        await advanceTimers(200000);
+        expect(Scheduler).toHaveYielded([
+          'Promise resolved [A]',
+          'Promise resolved [B]',
+          'Promise resolved [C]',
+        ]);
+
+        expect(Scheduler).toFlushAndYield(['A', 'B', 'C']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span prop="A" />
+            <span prop="B" />
+            <span prop="C" />
+          </>,
+        );
+      });
+
+      describe('legacy mode mode', () => {
+        it('times out immediately', async () => {
+          function App() {
+            return (
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText ms={100} text="Result" />
+              </Suspense>
+            );
+          }
+
+          // Times out immediately, ignoring the specified threshold.
+          ReactNoop.renderLegacySyncRoot(<App />);
+          expect(Scheduler).toHaveYielded(['Suspend! [Result]', 'Loading...']);
+          expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+          ReactNoop.expire(100);
+          await advanceTimers(100);
+
+          expect(Scheduler).toHaveYielded(['Promise resolved [Result]']);
+          expect(Scheduler).toFlushExpired(['Result']);
+          expect(ReactNoop.getChildren()).toEqual([span('Result')]);
+        });
+
+        it('times out immediately when Suspense is in legacy mode', async () => {
+          class UpdatingText extends React.Component {
+            state = {step: 1};
+            render() {
+              return <AsyncText ms={100} text={`Step: ${this.state.step}`} />;
+            }
+          }
+
+          function Spinner() {
+            return (
+              <Fragment>
+                <Text text="Loading (1)" />
+                <Text text="Loading (2)" />
+                <Text text="Loading (3)" />
+              </Fragment>
+            );
+          }
+
+          const text = React.createRef(null);
+          function App() {
+            return (
+              <Suspense fallback={<Spinner />}>
+                <UpdatingText ref={text} />
+                <Text text="Sibling" />
+              </Suspense>
+            );
+          }
+
+          // Initial mount.
+          ReactNoop.renderLegacySyncRoot(<App />);
+          await advanceTimers(100);
+          expect(Scheduler).toHaveYielded([
+            'Suspend! [Step: 1]',
+            'Sibling',
+            'Loading (1)',
+            'Loading (2)',
+            'Loading (3)',
+            'Promise resolved [Step: 1]',
+          ]);
+          expect(Scheduler).toFlushExpired(['Step: 1']);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <>
+              <span prop="Step: 1" />
+              <span prop="Sibling" />
+            </>,
+          );
+
+          // Update.
+          text.current.setState({step: 2}, () =>
+            Scheduler.unstable_yieldValue('Update did commit'),
+          );
+
+          expect(ReactNoop.flushNextYield()).toEqual([
+            'Suspend! [Step: 2]',
+            'Loading (1)',
+            'Loading (2)',
+            'Loading (3)',
+            'Update did commit',
+          ]);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <>
+              <span hidden={true} prop="Step: 1" />
+              <span hidden={true} prop="Sibling" />
+              <span prop="Loading (1)" />
+              <span prop="Loading (2)" />
+              <span prop="Loading (3)" />
+            </>,
+          );
+
+          await advanceTimers(100);
+          expect(Scheduler).toHaveYielded(['Promise resolved [Step: 2]']);
+          expect(Scheduler).toFlushExpired(['Step: 2']);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <>
+              <span prop="Step: 2" />
+              <span prop="Sibling" />
+            </>,
+          );
+        });
+
+        it('does not re-render siblings in loose mode', async () => {
+          class TextWithLifecycle extends React.Component {
+            componentDidMount() {
+              Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
+            }
+            componentDidUpdate() {
+              Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
+            }
+            render() {
+              return <Text {...this.props} />;
+            }
+          }
+
+          class AsyncTextWithLifecycle extends React.Component {
+            componentDidMount() {
+              Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
+            }
+            componentDidUpdate() {
+              Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
+            }
+            render() {
+              return <AsyncText {...this.props} />;
+            }
+          }
+
+          function App() {
+            return (
+              <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
+                <TextWithLifecycle text="A" />
+                <AsyncTextWithLifecycle ms={100} text="B" />
+                <TextWithLifecycle text="C" />
+              </Suspense>
+            );
+          }
+
+          ReactNoop.renderLegacySyncRoot(<App />, () =>
+            Scheduler.unstable_yieldValue('Commit root'),
+          );
+          expect(Scheduler).toHaveYielded([
+            'A',
+            'Suspend! [B]',
+            'C',
+
+            'Loading...',
+            'Mount [A]',
+            'Mount [B]',
+            'Mount [C]',
+            // This should be a mount, not an update.
+            'Mount [Loading...]',
+            'Commit root',
+          ]);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <>
+              <span hidden={true} prop="A" />
+              <span hidden={true} prop="C" />
+
+              <span prop="Loading..." />
+            </>,
+          );
+
+          ReactNoop.expire(1000);
+          await advanceTimers(1000);
+
+          expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+          expect(Scheduler).toFlushExpired(['B']);
+          expect(ReactNoop).toMatchRenderedOutput(
+            <>
+              <span prop="A" />
+              <span prop="B" />
+              <span prop="C" />
+            </>,
+          );
+        });
+
+        it('suspends inside constructor', async () => {
+          class AsyncTextInConstructor extends React.Component {
+            constructor(props) {
+              super(props);
+              const text = props.text;
+              Scheduler.unstable_yieldValue('constructor');
+              try {
+                TextResource.read([props.text, props.ms]);
+                this.state = {text};
+              } catch (promise) {
+                if (typeof promise.then === 'function') {
+                  Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+                } else {
+                  Scheduler.unstable_yieldValue(`Error! [${text}]`);
+                }
+                throw promise;
+              }
+            }
+            componentDidMount() {
+              Scheduler.unstable_yieldValue('componentDidMount');
+            }
+            render() {
+              Scheduler.unstable_yieldValue(this.state.text);
+              return <span prop={this.state.text} />;
+            }
+          }
+
+          ReactNoop.renderLegacySyncRoot(
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncTextInConstructor ms={100} text="Hi" />
+            </Suspense>,
+          );
+
+          expect(Scheduler).toHaveYielded([
+            'constructor',
+            'Suspend! [Hi]',
+            'Loading...',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+          await advanceTimers(1000);
+
+          expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
+          expect(Scheduler).toFlushExpired([
+            'constructor',
+            'Hi',
+            'componentDidMount',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
+        });
+
+        it('does not infinite loop if fallback contains lifecycle method', async () => {
+          class Fallback extends React.Component {
+            state = {
+              name: 'foo',
+            };
+            componentDidMount() {
+              this.setState({
+                name: 'bar',
+              });
+            }
+            render() {
+              return <Text text="Loading..." />;
+            }
+          }
+
+          class Demo extends React.Component {
+            render() {
+              return (
+                <Suspense fallback={<Fallback />}>
+                  <AsyncText text="Hi" ms={100} />
+                </Suspense>
+              );
+            }
+          }
 
-      // Times out immediately, ignoring the specified threshold.
-      ReactNoop.renderLegacySyncRoot(<App />);
-      expect(Scheduler).toHaveYielded(['Suspend! [Result]', 'Loading...']);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+          ReactNoop.renderLegacySyncRoot(<Demo />);
+
+          expect(Scheduler).toHaveYielded([
+            'Suspend! [Hi]',
+            'Loading...',
+            // Re-render due to lifecycle update
+            'Loading...',
+          ]);
+          expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+          await advanceTimers(100);
+          expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
+          expect(Scheduler).toFlushExpired(['Hi']);
+          expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
+        });
+
+        if (global.__PERSISTENT__) {
+          it('hides/unhides suspended children before layout effects fire (persistent)', async () => {
+            const {useRef, useLayoutEffect} = React;
+
+            function Parent() {
+              const child = useRef(null);
+
+              useLayoutEffect(() => {
+                Scheduler.unstable_yieldValue(
+                  ReactNoop.getPendingChildrenAsJSX(),
+                );
+              });
+
+              return (
+                <span ref={child} hidden={false}>
+                  <AsyncText ms={1000} text="Hi" />
+                </span>
+              );
+            }
 
-      ReactNoop.expire(100);
-      await advanceTimers(100);
+            function App(props) {
+              return (
+                <Suspense fallback={<Text text="Loading..." />}>
+                  <Parent />
+                </Suspense>
+              );
+            }
 
-      expect(Scheduler).toHaveYielded(['Promise resolved [Result]']);
-      expect(Scheduler).toFlushExpired(['Result']);
-      expect(ReactNoop.getChildren()).toEqual([span('Result')]);
-    });
+            ReactNoop.renderLegacySyncRoot(<App middleText="B" />);
 
-    it('times out immediately when Suspense is in legacy mode', async () => {
-      class UpdatingText extends React.Component {
-        state = {step: 1};
-        render() {
-          return <AsyncText ms={100} text={`Step: ${this.state.step}`} />;
-        }
-      }
+            expect(Scheduler).toHaveYielded([
+              'Suspend! [Hi]',
+              'Loading...',
+              // The child should have already been hidden
+              <>
+                <span hidden={true} />
+                <span prop="Loading..." />
+              </>,
+            ]);
 
-      function Spinner() {
-        return (
-          <Fragment>
-            <Text text="Loading (1)" />
-            <Text text="Loading (2)" />
-            <Text text="Loading (3)" />
-          </Fragment>
-        );
-      }
+            await advanceTimers(1000);
 
-      const text = React.createRef(null);
-      function App() {
-        return (
-          <Suspense fallback={<Spinner />}>
-            <UpdatingText ref={text} />
-            <Text text="Sibling" />
-          </Suspense>
-        );
-      }
+            expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
+            expect(Scheduler).toFlushExpired(['Hi']);
+          });
+        } else {
+          it('hides/unhides suspended children before layout effects fire (mutation)', async () => {
+            const {useRef, useLayoutEffect} = React;
+
+            function Parent() {
+              const child = useRef(null);
+
+              useLayoutEffect(() => {
+                Scheduler.unstable_yieldValue(
+                  'Child is hidden: ' + child.current.hidden,
+                );
+              });
+
+              return (
+                <span ref={child} hidden={false}>
+                  <AsyncText ms={1000} text="Hi" />
+                </span>
+              );
+            }
 
-      // Initial mount.
-      ReactNoop.renderLegacySyncRoot(<App />);
-      await advanceTimers(100);
-      expect(Scheduler).toHaveYielded([
-        'Suspend! [Step: 1]',
-        'Sibling',
-        'Loading (1)',
-        'Loading (2)',
-        'Loading (3)',
-        'Promise resolved [Step: 1]',
-      ]);
-      expect(Scheduler).toFlushExpired(['Step: 1']);
-      expect(ReactNoop).toMatchRenderedOutput(
-        <>
-          <span prop="Step: 1" />
-          <span prop="Sibling" />
-        </>,
-      );
+            function App(props) {
+              return (
+                <Suspense fallback={<Text text="Loading..." />}>
+                  <Parent />
+                </Suspense>
+              );
+            }
 
-      // Update.
-      text.current.setState({step: 2}, () =>
-        Scheduler.unstable_yieldValue('Update did commit'),
-      );
+            ReactNoop.renderLegacySyncRoot(<App middleText="B" />);
 
-      expect(ReactNoop.flushNextYield()).toEqual([
-        'Suspend! [Step: 2]',
-        'Loading (1)',
-        'Loading (2)',
-        'Loading (3)',
-        'Update did commit',
-      ]);
-      expect(ReactNoop).toMatchRenderedOutput(
-        <>
-          <span hidden={true} prop="Step: 1" />
-          <span hidden={true} prop="Sibling" />
-          <span prop="Loading (1)" />
-          <span prop="Loading (2)" />
-          <span prop="Loading (3)" />
-        </>,
-      );
+            expect(Scheduler).toHaveYielded([
+              'Suspend! [Hi]',
+              'Loading...',
+              // The child should have already been hidden
+              'Child is hidden: true',
+            ]);
 
-      await advanceTimers(100);
-      expect(Scheduler).toHaveYielded(['Promise resolved [Step: 2]']);
-      expect(Scheduler).toFlushExpired(['Step: 2']);
-      expect(ReactNoop).toMatchRenderedOutput(
-        <>
-          <span prop="Step: 2" />
-          <span prop="Sibling" />
-        </>,
-      );
-    });
+            await advanceTimers(1000);
 
-    it('does not re-render siblings in loose mode', async () => {
-      class TextWithLifecycle extends React.Component {
-        componentDidMount() {
-          Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
-        }
-        componentDidUpdate() {
-          Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
-        }
-        render() {
-          return <Text {...this.props} />;
+            expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
+            expect(Scheduler).toFlushExpired(['Hi']);
+          });
         }
-      }
 
-      class AsyncTextWithLifecycle extends React.Component {
-        componentDidMount() {
-          Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
+        it('handles errors in the return path of a component that suspends', async () => {
+          // Covers an edge case where an error is thrown inside the complete phase
+          // of a component that is in the return path of a component that suspends.
+          // The second error should also be handled (i.e. able to be captured by
+          // an error boundary.
+          class ErrorBoundary extends React.Component {
+            state = {error: null};
+            static getDerivedStateFromError(error, errorInfo) {
+              return {error};
+            }
+            render() {
+              if (this.state.error) {
+                return `Caught an error: ${this.state.error.message}`;
+              }
+              return this.props.children;
+            }
+          }
+
+          ReactNoop.renderLegacySyncRoot(
+            <ErrorBoundary>
+              <Suspense fallback="Loading...">
+                <errorInCompletePhase>
+                  <AsyncText ms={1000} text="Async" />
+                </errorInCompletePhase>
+              </Suspense>
+            </ErrorBoundary>,
+          );
+
+          expect(Scheduler).toHaveYielded(['Suspend! [Async]']);
+          expect(ReactNoop).toMatchRenderedOutput(
+            'Caught an error: Error in host config.',
+          );
+        });
+      });
+
+      it('does not call lifecycles of a suspended component', async () => {
+        class TextWithLifecycle extends React.Component {
+          componentDidMount() {
+            Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
+          }
+          componentDidUpdate() {
+            Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
+          }
+          componentWillUnmount() {
+            Scheduler.unstable_yieldValue(`Unmount [${this.props.text}]`);
+          }
+          render() {
+            return <Text {...this.props} />;
+          }
         }
-        componentDidUpdate() {
-          Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
+
+        class AsyncTextWithLifecycle extends React.Component {
+          componentDidMount() {
+            Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
+          }
+          componentDidUpdate() {
+            Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
+          }
+          componentWillUnmount() {
+            Scheduler.unstable_yieldValue(`Unmount [${this.props.text}]`);
+          }
+          render() {
+            const text = this.props.text;
+            const ms = this.props.ms;
+            try {
+              TextResource.read([text, ms]);
+              Scheduler.unstable_yieldValue(text);
+              return <span prop={text} />;
+            } catch (promise) {
+              if (typeof promise.then === 'function') {
+                Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
+              } else {
+                Scheduler.unstable_yieldValue(`Error! [${text}]`);
+              }
+              throw promise;
+            }
+          }
         }
-        render() {
-          return <AsyncText {...this.props} />;
+
+        function App() {
+          return (
+            <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
+              <TextWithLifecycle text="A" />
+              <AsyncTextWithLifecycle ms={100} text="B" />
+              <TextWithLifecycle text="C" />
+            </Suspense>
+          );
         }
-      }
 
-      function App() {
-        return (
-          <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
-            <TextWithLifecycle text="A" />
-            <AsyncTextWithLifecycle ms={100} text="B" />
-            <TextWithLifecycle text="C" />
-          </Suspense>
+        ReactNoop.renderLegacySyncRoot(<App />, () =>
+          Scheduler.unstable_yieldValue('Commit root'),
         );
-      }
+        expect(Scheduler).toHaveYielded([
+          'A',
+          'Suspend! [B]',
+          'C',
+          'Loading...',
 
-      ReactNoop.renderLegacySyncRoot(<App />, () =>
-        Scheduler.unstable_yieldValue('Commit root'),
-      );
-      expect(Scheduler).toHaveYielded([
-        'A',
-        'Suspend! [B]',
-        'C',
-
-        'Loading...',
-        'Mount [A]',
-        'Mount [B]',
-        'Mount [C]',
-        // This should be a mount, not an update.
-        'Mount [Loading...]',
-        'Commit root',
-      ]);
-      expect(ReactNoop).toMatchRenderedOutput(
-        <>
-          <span hidden={true} prop="A" />
-          <span hidden={true} prop="C" />
-
-          <span prop="Loading..." />
-        </>,
-      );
+          'Mount [A]',
+          // B's lifecycle should not fire because it suspended
+          // 'Mount [B]',
+          'Mount [C]',
+          'Mount [Loading...]',
+          'Commit root',
+        ]);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span hidden={true} prop="A" />
+            <span hidden={true} prop="C" />
+            <span prop="Loading..." />
+          </>,
+        );
+      });
 
-      ReactNoop.expire(1000);
-      await advanceTimers(1000);
-
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-      expect(Scheduler).toFlushExpired(['B']);
-      expect(ReactNoop).toMatchRenderedOutput(
-        <>
-          <span prop="A" />
-          <span prop="B" />
-          <span prop="C" />
-        </>,
-      );
-    });
+      it('does not call lifecycles of a suspended component (hooks)', async () => {
+        function TextWithLifecycle(props) {
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue(`Layout Effect [${props.text}]`);
+            return () => {
+              Scheduler.unstable_yieldValue(
+                `Destroy Layout Effect [${props.text}]`,
+              );
+            };
+          }, [props.text]);
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue(`Effect [${props.text}]`);
+            return () => {
+              Scheduler.unstable_yieldValue(`Destroy Effect [${props.text}]`);
+            };
+          }, [props.text]);
+          return <Text {...props} />;
+        }
 
-    it('suspends inside constructor', async () => {
-      class AsyncTextInConstructor extends React.Component {
-        constructor(props) {
-          super(props);
+        function AsyncTextWithLifecycle(props) {
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue(`Layout Effect [${props.text}]`);
+            return () => {
+              Scheduler.unstable_yieldValue(
+                `Destroy Layout Effect [${props.text}]`,
+              );
+            };
+          }, [props.text]);
+          React.useEffect(() => {
+            Scheduler.unstable_yieldValue(`Effect [${props.text}]`);
+            return () => {
+              Scheduler.unstable_yieldValue(`Destroy Effect [${props.text}]`);
+            };
+          }, [props.text]);
           const text = props.text;
-          Scheduler.unstable_yieldValue('constructor');
+          const ms = props.ms;
           try {
-            TextResource.read([props.text, props.ms]);
-            this.state = {text};
+            TextResource.read([text, ms]);
+            Scheduler.unstable_yieldValue(text);
+            return <span prop={text} />;
           } catch (promise) {
             if (typeof promise.then === 'function') {
               Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
@@ -1242,1648 +1597,1378 @@ describe('ReactSuspenseWithNoopRenderer', () => {
             throw promise;
           }
         }
-        componentDidMount() {
-          Scheduler.unstable_yieldValue('componentDidMount');
-        }
-        render() {
-          Scheduler.unstable_yieldValue(this.state.text);
-          return <span prop={this.state.text} />;
-        }
-      }
-
-      ReactNoop.renderLegacySyncRoot(
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncTextInConstructor ms={100} text="Hi" />
-        </Suspense>,
-      );
-
-      expect(Scheduler).toHaveYielded([
-        'constructor',
-        'Suspend! [Hi]',
-        'Loading...',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-      await advanceTimers(1000);
-
-      expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
-      expect(Scheduler).toFlushExpired([
-        'constructor',
-        'Hi',
-        'componentDidMount',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
-    });
-
-    it('does not infinite loop if fallback contains lifecycle method', async () => {
-      class Fallback extends React.Component {
-        state = {
-          name: 'foo',
-        };
-        componentDidMount() {
-          this.setState({
-            name: 'bar',
-          });
-        }
-        render() {
-          return <Text text="Loading..." />;
-        }
-      }
 
-      class Demo extends React.Component {
-        render() {
+        function App({text}) {
           return (
-            <Suspense fallback={<Fallback />}>
-              <AsyncText text="Hi" ms={100} />
+            <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
+              <TextWithLifecycle text="A" />
+              <AsyncTextWithLifecycle ms={100} text={text} />
+              <TextWithLifecycle text="C" />
             </Suspense>
           );
         }
-      }
 
-      ReactNoop.renderLegacySyncRoot(<Demo />);
-
-      expect(Scheduler).toHaveYielded([
-        'Suspend! [Hi]',
-        'Loading...',
-        // Re-render due to lifecycle update
-        'Loading...',
-      ]);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-      await advanceTimers(100);
-      expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
-      expect(Scheduler).toFlushExpired(['Hi']);
-      expect(ReactNoop.getChildren()).toEqual([span('Hi')]);
-    });
-
-    if (global.__PERSISTENT__) {
-      it('hides/unhides suspended children before layout effects fire (persistent)', async () => {
-        const {useRef, useLayoutEffect} = React;
+        ReactNoop.renderLegacySyncRoot(<App text="B" />, () =>
+          Scheduler.unstable_yieldValue('Commit root'),
+        );
+        expect(Scheduler).toHaveYielded([
+          'A',
+          'Suspend! [B]',
+          'C',
+          'Loading...',
 
-        function Parent() {
-          const child = useRef(null);
+          'Layout Effect [A]',
+          // B's effect should not fire because it suspended
+          // 'Layout Effect [B]',
+          'Layout Effect [C]',
+          'Layout Effect [Loading...]',
+          'Commit root',
+        ]);
 
-          useLayoutEffect(() => {
-            Scheduler.unstable_yieldValue(ReactNoop.getPendingChildrenAsJSX());
-          });
+        // Flush passive effects.
+        expect(Scheduler).toFlushAndYield([
+          'Effect [A]',
+          // B's effect should not fire because it suspended
+          // 'Effect [B]',
+          'Effect [C]',
+          'Effect [Loading...]',
+        ]);
 
-          return (
-            <span ref={child} hidden={false}>
-              <AsyncText ms={1000} text="Hi" />
-            </span>
-          );
-        }
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <span hidden={true} prop="A" />
+            <span hidden={true} prop="C" />
+            <span prop="Loading..." />
+          </>,
+        );
 
-        function App(props) {
-          return (
-            <Suspense fallback={<Text text="Loading..." />}>
-              <Parent />
-            </Suspense>
-          );
+        Scheduler.unstable_advanceTime(500);
+        await advanceTimers(500);
+
+        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+
+        if (
+          ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount &&
+          ReactFeatureFlags.runAllPassiveEffectDestroysBeforeCreates
+        ) {
+          expect(Scheduler).toFlushAndYield([
+            'B',
+            'Destroy Layout Effect [Loading...]',
+            'Layout Effect [B]',
+            'Destroy Effect [Loading...]',
+            'Effect [B]',
+          ]);
+        } else {
+          expect(Scheduler).toFlushAndYield([
+            'B',
+            'Destroy Layout Effect [Loading...]',
+            'Destroy Effect [Loading...]',
+            'Layout Effect [B]',
+            'Effect [B]',
+          ]);
         }
 
-        ReactNoop.renderLegacySyncRoot(<App middleText="B" />);
+        // Update
+        ReactNoop.renderLegacySyncRoot(<App text="B2" />, () =>
+          Scheduler.unstable_yieldValue('Commit root'),
+        );
 
         expect(Scheduler).toHaveYielded([
-          'Suspend! [Hi]',
+          'A',
+          'Suspend! [B2]',
+          'C',
           'Loading...',
-          // The child should have already been hidden
-          <>
-            <span hidden={true} />
-            <span prop="Loading..." />
-          </>,
+
+          // B2's effect should not fire because it suspended
+          // 'Layout Effect [B2]',
+          'Layout Effect [Loading...]',
+          'Commit root',
         ]);
 
-        await advanceTimers(1000);
+        // Flush passive effects.
+        expect(Scheduler).toFlushAndYield([
+          // B2's effect should not fire because it suspended
+          // 'Effect [B2]',
+          'Effect [Loading...]',
+        ]);
 
-        expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
-        expect(Scheduler).toFlushExpired(['Hi']);
+        Scheduler.unstable_advanceTime(500);
+        await advanceTimers(500);
+
+        expect(Scheduler).toHaveYielded(['Promise resolved [B2]']);
+
+        if (
+          ReactFeatureFlags.deferPassiveEffectCleanupDuringUnmount &&
+          ReactFeatureFlags.runAllPassiveEffectDestroysBeforeCreates
+        ) {
+          expect(Scheduler).toFlushAndYield([
+            'B2',
+            'Destroy Layout Effect [Loading...]',
+            'Destroy Layout Effect [B]',
+            'Layout Effect [B2]',
+            'Destroy Effect [Loading...]',
+            'Destroy Effect [B]',
+            'Effect [B2]',
+          ]);
+        } else {
+          expect(Scheduler).toFlushAndYield([
+            'B2',
+            'Destroy Layout Effect [Loading...]',
+            'Destroy Effect [Loading...]',
+            'Destroy Layout Effect [B]',
+            'Layout Effect [B2]',
+            'Destroy Effect [B]',
+            'Effect [B2]',
+          ]);
+        }
       });
-    } else {
-      it('hides/unhides suspended children before layout effects fire (mutation)', async () => {
-        const {useRef, useLayoutEffect} = React;
-
-        function Parent() {
-          const child = useRef(null);
-
-          useLayoutEffect(() => {
-            Scheduler.unstable_yieldValue(
-              'Child is hidden: ' + child.current.hidden,
-            );
-          });
 
+      it('suspends for longer if something took a long (CPU bound) time to render', async () => {
+        function Foo({renderContent}) {
+          Scheduler.unstable_yieldValue('Foo');
           return (
-            <span ref={child} hidden={false}>
-              <AsyncText ms={1000} text="Hi" />
-            </span>
+            <Suspense fallback={<Text text="Loading..." />}>
+              {renderContent ? <AsyncText text="A" ms={5000} /> : null}
+            </Suspense>
           );
         }
 
-        function App(props) {
+        ReactNoop.render(<Foo />);
+        expect(Scheduler).toFlushAndYield(['Foo']);
+
+        ReactNoop.render(<Foo renderContent={true} />);
+        Scheduler.unstable_advanceTime(100);
+        await advanceTimers(100);
+        // Start rendering
+        expect(Scheduler).toFlushAndYieldThrough(['Foo']);
+        // For some reason it took a long time to render Foo.
+        Scheduler.unstable_advanceTime(1250);
+        await advanceTimers(1250);
+        expect(Scheduler).toFlushAndYield([
+          // A suspends
+          'Suspend! [A]',
+          'Loading...',
+        ]);
+        // We're now suspended and we haven't shown anything yet.
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Flush some of the time
+        Scheduler.unstable_advanceTime(450);
+        await advanceTimers(450);
+        // Because we've already been waiting for so long we can
+        // wait a bit longer. Still nothing...
+        expect(Scheduler).toFlushWithoutYielding();
+        expect(ReactNoop.getChildren()).toEqual([]);
+
+        // Eventually we'll show the fallback.
+        Scheduler.unstable_advanceTime(500);
+        await advanceTimers(500);
+        // No need to rerender.
+        expect(Scheduler).toFlushWithoutYielding();
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+        // Flush the promise completely
+        Scheduler.unstable_advanceTime(4500);
+        await advanceTimers(4500);
+        // Renders successfully
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYield(['A']);
+        expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      });
+
+      it('does not suspends if a fallback has been shown for a long time', async () => {
+        function Foo() {
+          Scheduler.unstable_yieldValue('Foo');
           return (
             <Suspense fallback={<Text text="Loading..." />}>
-              <Parent />
+              <AsyncText text="A" ms={5000} />
+              <Suspense fallback={<Text text="Loading more..." />}>
+                <AsyncText text="B" ms={10000} />
+              </Suspense>
             </Suspense>
           );
         }
 
-        ReactNoop.renderLegacySyncRoot(<App middleText="B" />);
-
-        expect(Scheduler).toHaveYielded([
-          'Suspend! [Hi]',
+        ReactNoop.render(<Foo />);
+        // Start rendering
+        expect(Scheduler).toFlushAndYield([
+          'Foo',
+          // A suspends
+          'Suspend! [A]',
+          // B suspends
+          'Suspend! [B]',
+          'Loading more...',
           'Loading...',
-          // The child should have already been hidden
-          'Child is hidden: true',
         ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-        await advanceTimers(1000);
+        // Wait a long time.
+        Scheduler.unstable_advanceTime(5000);
+        await advanceTimers(5000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+
+        // Retry with the new content.
+        expect(Scheduler).toFlushAndYield([
+          'A',
+          // B still suspends
+          'Suspend! [B]',
+          'Loading more...',
+        ]);
+        // Because we've already been waiting for so long we've exceeded
+        // our threshold and we show the next level immediately.
+        expect(ReactNoop.getChildren()).toEqual([
+          span('A'),
+          span('Loading more...'),
+        ]);
 
-        expect(Scheduler).toHaveYielded(['Promise resolved [Hi]']);
-        expect(Scheduler).toFlushExpired(['Hi']);
+        // Flush the last promise completely
+        Scheduler.unstable_advanceTime(5000);
+        await advanceTimers(5000);
+        // Renders successfully
+        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+        expect(Scheduler).toFlushAndYield(['B']);
+        expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
       });
-    }
-
-    it('handles errors in the return path of a component that suspends', async () => {
-      // Covers an edge case where an error is thrown inside the complete phase
-      // of a component that is in the return path of a component that suspends.
-      // The second error should also be handled (i.e. able to be captured by
-      // an error boundary.
-      class ErrorBoundary extends React.Component {
-        state = {error: null};
-        static getDerivedStateFromError(error, errorInfo) {
-          return {error};
-        }
-        render() {
-          if (this.state.error) {
-            return `Caught an error: ${this.state.error.message}`;
-          }
-          return this.props.children;
+
+      it('does suspend if a fallback has been shown for a short time', async () => {
+        function Foo() {
+          Scheduler.unstable_yieldValue('Foo');
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text="A" ms={200} />
+              <Suspense fallback={<Text text="Loading more..." />}>
+                <AsyncText text="B" ms={450} />
+              </Suspense>
+            </Suspense>
+          );
         }
-      }
 
-      ReactNoop.renderLegacySyncRoot(
-        <ErrorBoundary>
-          <Suspense fallback="Loading...">
-            <errorInCompletePhase>
-              <AsyncText ms={1000} text="Async" />
-            </errorInCompletePhase>
-          </Suspense>
-        </ErrorBoundary>,
-      );
+        ReactNoop.render(<Foo />);
+        // Start rendering
+        expect(Scheduler).toFlushAndYield([
+          'Foo',
+          // A suspends
+          'Suspend! [A]',
+          // B suspends
+          'Suspend! [B]',
+          'Loading more...',
+          'Loading...',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-      expect(Scheduler).toHaveYielded(['Suspend! [Async]']);
-      expect(ReactNoop).toMatchRenderedOutput(
-        'Caught an error: Error in host config.',
-      );
-    });
-  });
+        // Wait a short time.
+        Scheduler.unstable_advanceTime(250);
+        await advanceTimers(250);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+
+        // Retry with the new content.
+        expect(Scheduler).toFlushAndYield([
+          'A',
+          // B still suspends
+          'Suspend! [B]',
+          'Loading more...',
+        ]);
+        // Because we've already been waiting for so long we can
+        // wait a bit longer. Still nothing...
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
 
-  it('does not call lifecycles of a suspended component', async () => {
-    class TextWithLifecycle extends React.Component {
-      componentDidMount() {
-        Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
-      }
-      componentDidUpdate() {
-        Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
-      }
-      componentWillUnmount() {
-        Scheduler.unstable_yieldValue(`Unmount [${this.props.text}]`);
-      }
-      render() {
-        return <Text {...this.props} />;
-      }
-    }
+        Scheduler.unstable_advanceTime(200);
+        await advanceTimers(200);
 
-    class AsyncTextWithLifecycle extends React.Component {
-      componentDidMount() {
-        Scheduler.unstable_yieldValue(`Mount [${this.props.text}]`);
-      }
-      componentDidUpdate() {
-        Scheduler.unstable_yieldValue(`Update [${this.props.text}]`);
-      }
-      componentWillUnmount() {
-        Scheduler.unstable_yieldValue(`Unmount [${this.props.text}]`);
-      }
-      render() {
-        const text = this.props.text;
-        const ms = this.props.ms;
-        try {
-          TextResource.read([text, ms]);
-          Scheduler.unstable_yieldValue(text);
-          return <span prop={text} />;
-        } catch (promise) {
-          if (typeof promise.then === 'function') {
-            Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-          } else {
-            Scheduler.unstable_yieldValue(`Error! [${text}]`);
-          }
-          throw promise;
-        }
-      }
-    }
-
-    function App() {
-      return (
-        <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
-          <TextWithLifecycle text="A" />
-          <AsyncTextWithLifecycle ms={100} text="B" />
-          <TextWithLifecycle text="C" />
-        </Suspense>
-      );
-    }
-
-    ReactNoop.renderLegacySyncRoot(<App />, () =>
-      Scheduler.unstable_yieldValue('Commit root'),
-    );
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'Suspend! [B]',
-      'C',
-      'Loading...',
-
-      'Mount [A]',
-      // B's lifecycle should not fire because it suspended
-      // 'Mount [B]',
-      'Mount [C]',
-      'Mount [Loading...]',
-      'Commit root',
-    ]);
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <span hidden={true} prop="A" />
-        <span hidden={true} prop="C" />
-        <span prop="Loading..." />
-      </>,
-    );
-  });
+        // Before we commit another Promise resolves.
+        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+        // We're still showing the first loading state.
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+        // Restart and render the complete content.
+        expect(Scheduler).toFlushAndYield(['A', 'B']);
+        expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+      });
 
-  it('does not call lifecycles of a suspended component (hooks)', async () => {
-    function TextWithLifecycle(props) {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue(`Layout Effect [${props.text}]`);
-        return () => {
-          Scheduler.unstable_yieldValue(
-            `Destroy Layout Effect [${props.text}]`,
-          );
-        };
-      }, [props.text]);
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue(`Effect [${props.text}]`);
-        return () => {
-          Scheduler.unstable_yieldValue(`Destroy Effect [${props.text}]`);
-        };
-      }, [props.text]);
-      return <Text {...props} />;
-    }
-
-    function AsyncTextWithLifecycle(props) {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue(`Layout Effect [${props.text}]`);
-        return () => {
-          Scheduler.unstable_yieldValue(
-            `Destroy Layout Effect [${props.text}]`,
+      it('does not suspend for very long after a higher priority update', async () => {
+        function Foo({renderContent}) {
+          Scheduler.unstable_yieldValue('Foo');
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              {renderContent ? <AsyncText text="A" ms={5000} /> : null}
+            </Suspense>
           );
-        };
-      }, [props.text]);
-      React.useEffect(() => {
-        Scheduler.unstable_yieldValue(`Effect [${props.text}]`);
-        return () => {
-          Scheduler.unstable_yieldValue(`Destroy Effect [${props.text}]`);
-        };
-      }, [props.text]);
-      const text = props.text;
-      const ms = props.ms;
-      try {
-        TextResource.read([text, ms]);
-        Scheduler.unstable_yieldValue(text);
-        return <span prop={text} />;
-      } catch (promise) {
-        if (typeof promise.then === 'function') {
-          Scheduler.unstable_yieldValue(`Suspend! [${text}]`);
-        } else {
-          Scheduler.unstable_yieldValue(`Error! [${text}]`);
         }
-        throw promise;
-      }
-    }
-
-    function App({text}) {
-      return (
-        <Suspense fallback={<TextWithLifecycle text="Loading..." />}>
-          <TextWithLifecycle text="A" />
-          <AsyncTextWithLifecycle ms={100} text={text} />
-          <TextWithLifecycle text="C" />
-        </Suspense>
-      );
-    }
-
-    ReactNoop.renderLegacySyncRoot(<App text="B" />, () =>
-      Scheduler.unstable_yieldValue('Commit root'),
-    );
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'Suspend! [B]',
-      'C',
-      'Loading...',
-
-      'Layout Effect [A]',
-      // B's effect should not fire because it suspended
-      // 'Layout Effect [B]',
-      'Layout Effect [C]',
-      'Layout Effect [Loading...]',
-      'Commit root',
-    ]);
-
-    // Flush passive effects.
-    expect(Scheduler).toFlushAndYield([
-      'Effect [A]',
-      // B's effect should not fire because it suspended
-      // 'Effect [B]',
-      'Effect [C]',
-      'Effect [Loading...]',
-    ]);
-
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <span hidden={true} prop="A" />
-        <span hidden={true} prop="C" />
-        <span prop="Loading..." />
-      </>,
-    );
-
-    Scheduler.unstable_advanceTime(500);
-    await advanceTimers(500);
-
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-
-    expect(Scheduler).toFlushAndYield([
-      'B',
-      'Destroy Layout Effect [Loading...]',
-      'Layout Effect [B]',
-      'Destroy Effect [Loading...]',
-      'Effect [B]',
-    ]);
-
-    // Update
-    ReactNoop.renderLegacySyncRoot(<App text="B2" />, () =>
-      Scheduler.unstable_yieldValue('Commit root'),
-    );
-
-    expect(Scheduler).toHaveYielded([
-      'A',
-      'Suspend! [B2]',
-      'C',
-      'Loading...',
-
-      // B2's effect should not fire because it suspended
-      // 'Layout Effect [B2]',
-      'Layout Effect [Loading...]',
-      'Commit root',
-    ]);
-
-    // Flush passive effects.
-    expect(Scheduler).toFlushAndYield([
-      // B2's effect should not fire because it suspended
-      // 'Effect [B2]',
-      'Effect [Loading...]',
-    ]);
-
-    Scheduler.unstable_advanceTime(500);
-    await advanceTimers(500);
-
-    expect(Scheduler).toHaveYielded(['Promise resolved [B2]']);
-
-    expect(Scheduler).toFlushAndYield([
-      'B2',
-      'Destroy Layout Effect [Loading...]',
-      'Destroy Layout Effect [B]',
-      'Layout Effect [B2]',
-      'Destroy Effect [Loading...]',
-      'Destroy Effect [B]',
-      'Effect [B2]',
-    ]);
-  });
 
-  it('suspends for longer if something took a long (CPU bound) time to render', async () => {
-    function Foo({renderContent}) {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          {renderContent ? <AsyncText text="A" ms={5000} /> : null}
-        </Suspense>
-      );
-    }
-
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield(['Foo']);
-
-    ReactNoop.render(<Foo renderContent={true} />);
-    Scheduler.unstable_advanceTime(100);
-    await advanceTimers(100);
-    // Start rendering
-    expect(Scheduler).toFlushAndYieldThrough(['Foo']);
-    // For some reason it took a long time to render Foo.
-    Scheduler.unstable_advanceTime(1250);
-    await advanceTimers(1250);
-    expect(Scheduler).toFlushAndYield([
-      // A suspends
-      'Suspend! [A]',
-      'Loading...',
-    ]);
-    // We're now suspended and we haven't shown anything yet.
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Flush some of the time
-    Scheduler.unstable_advanceTime(450);
-    await advanceTimers(450);
-    // Because we've already been waiting for so long we can
-    // wait a bit longer. Still nothing...
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Eventually we'll show the fallback.
-    Scheduler.unstable_advanceTime(500);
-    await advanceTimers(500);
-    // No need to rerender.
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-    // Flush the promise completely
-    Scheduler.unstable_advanceTime(4500);
-    await advanceTimers(4500);
-    // Renders successfully
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYield(['A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
-  });
+        ReactNoop.render(<Foo />);
+        expect(Scheduler).toFlushAndYield(['Foo']);
 
-  it('does not suspends if a fallback has been shown for a long time', async () => {
-    function Foo() {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="A" ms={5000} />
-          <Suspense fallback={<Text text="Loading more..." />}>
-            <AsyncText text="B" ms={10000} />
-          </Suspense>
-        </Suspense>
-      );
-    }
-
-    ReactNoop.render(<Foo />);
-    // Start rendering
-    expect(Scheduler).toFlushAndYield([
-      'Foo',
-      // A suspends
-      'Suspend! [A]',
-      // B suspends
-      'Suspend! [B]',
-      'Loading more...',
-      'Loading...',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-    // Wait a long time.
-    Scheduler.unstable_advanceTime(5000);
-    await advanceTimers(5000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-
-    // Retry with the new content.
-    expect(Scheduler).toFlushAndYield([
-      'A',
-      // B still suspends
-      'Suspend! [B]',
-      'Loading more...',
-    ]);
-    // Because we've already been waiting for so long we've exceeded
-    // our threshold and we show the next level immediately.
-    expect(ReactNoop.getChildren()).toEqual([
-      span('A'),
-      span('Loading more...'),
-    ]);
-
-    // Flush the last promise completely
-    Scheduler.unstable_advanceTime(5000);
-    await advanceTimers(5000);
-    // Renders successfully
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    expect(Scheduler).toFlushAndYield(['B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
-  });
+        ReactNoop.discreteUpdates(() =>
+          ReactNoop.render(<Foo renderContent={true} />),
+        );
+        expect(Scheduler).toFlushAndYieldThrough(['Foo']);
 
-  it('does suspend if a fallback has been shown for a short time', async () => {
-    function Foo() {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text="A" ms={200} />
-          <Suspense fallback={<Text text="Loading more..." />}>
-            <AsyncText text="B" ms={450} />
-          </Suspense>
-        </Suspense>
-      );
-    }
-
-    ReactNoop.render(<Foo />);
-    // Start rendering
-    expect(Scheduler).toFlushAndYield([
-      'Foo',
-      // A suspends
-      'Suspend! [A]',
-      // B suspends
-      'Suspend! [B]',
-      'Loading more...',
-      'Loading...',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-    // Wait a short time.
-    Scheduler.unstable_advanceTime(250);
-    await advanceTimers(250);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-
-    // Retry with the new content.
-    expect(Scheduler).toFlushAndYield([
-      'A',
-      // B still suspends
-      'Suspend! [B]',
-      'Loading more...',
-    ]);
-    // Because we've already been waiting for so long we can
-    // wait a bit longer. Still nothing...
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-    Scheduler.unstable_advanceTime(200);
-    await advanceTimers(200);
-
-    // Before we commit another Promise resolves.
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    // We're still showing the first loading state.
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-    // Restart and render the complete content.
-    expect(Scheduler).toFlushAndYield(['A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
-  });
+        // Advance some time.
+        Scheduler.unstable_advanceTime(100);
+        await advanceTimers(100);
 
-  it('does not suspend for very long after a higher priority update', async () => {
-    function Foo({renderContent}) {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          {renderContent ? <AsyncText text="A" ms={5000} /> : null}
-        </Suspense>
-      );
-    }
-
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield(['Foo']);
-
-    ReactNoop.discreteUpdates(() =>
-      ReactNoop.render(<Foo renderContent={true} />),
-    );
-    expect(Scheduler).toFlushAndYieldThrough(['Foo']);
-
-    // Advance some time.
-    Scheduler.unstable_advanceTime(100);
-    await advanceTimers(100);
-
-    expect(Scheduler).toFlushAndYield([
-      // A suspends
-      'Suspend! [A]',
-      'Loading...',
-    ]);
-
-    // We're now suspended and we haven't shown anything yet.
-    expect(ReactNoop.getChildren()).toEqual([]);
-
-    // Flush some of the time
-    Scheduler.unstable_advanceTime(500);
-    jest.advanceTimersByTime(500);
-
-    // We should have already shown the fallback.
-    // When we wrote this test, we inferred the start time of high priority
-    // updates as way earlier in the past. This test ensures that we don't
-    // use this assumption to add a very long JND.
-    expect(Scheduler).toFlushWithoutYielding();
-    expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-  });
+        expect(Scheduler).toFlushAndYield([
+          // A suspends
+          'Suspend! [A]',
+          'Loading...',
+        ]);
 
-  // TODO: flip to "warns" when this is implemented again.
-  it('does not warn when a low priority update suspends inside a high priority update for functional components', async () => {
-    let _setShow;
-    function App() {
-      let [show, setShow] = React.useState(false);
-      _setShow = setShow;
-      return (
-        <Suspense fallback="Loading...">
-          {show && <AsyncText text="A" />}
-        </Suspense>
-      );
-    }
+        // We're now suspended and we haven't shown anything yet.
+        expect(ReactNoop.getChildren()).toEqual([]);
 
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App />);
-    });
+        // Flush some of the time
+        Scheduler.unstable_advanceTime(500);
+        jest.advanceTimersByTime(500);
 
-    // TODO: assert toErrorDev() when the warning is implemented again.
-    ReactNoop.act(() => {
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => _setShow(true),
-      );
-    });
-  });
+        // We should have already shown the fallback.
+        // When we wrote this test, we inferred the start time of high priority
+        // updates as way earlier in the past. This test ensures that we don't
+        // use this assumption to add a very long JND.
+        expect(Scheduler).toFlushWithoutYielding();
+        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+      });
 
-  // TODO: flip to "warns" when this is implemented again.
-  it('does not warn when a low priority update suspends inside a high priority update for class components', async () => {
-    let show;
-    class App extends React.Component {
-      state = {show: false};
-
-      render() {
-        show = () => this.setState({show: true});
-        return (
-          <Suspense fallback="Loading...">
-            {this.state.show && <AsyncText text="A" />}
-          </Suspense>
-        );
-      }
-    }
+      // TODO: flip to "warns" when this is implemented again.
+      it('does not warn when a low priority update suspends inside a high priority update for functional components', async () => {
+        let _setShow;
+        function App() {
+          let [show, setShow] = React.useState(false);
+          _setShow = setShow;
+          return (
+            <Suspense fallback="Loading...">
+              {show && <AsyncText text="A" />}
+            </Suspense>
+          );
+        }
 
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App />);
-    });
+        await ReactNoop.act(async () => {
+          ReactNoop.render(<App />);
+        });
 
-    // TODO: assert toErrorDev() when the warning is implemented again.
-    ReactNoop.act(() => {
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => show(),
-      );
-    });
-  });
+        // TODO: assert toErrorDev() when the warning is implemented again.
+        ReactNoop.act(() => {
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_UserBlockingPriority,
+            () => _setShow(true),
+          );
+        });
+      });
 
-  it('does not warn about wrong Suspense priority if no new fallbacks are shown', async () => {
-    let showB;
-    class App extends React.Component {
-      state = {showB: false};
-
-      render() {
-        showB = () => this.setState({showB: true});
-        return (
-          <Suspense fallback="Loading...">
-            {<AsyncText text="A" />}
-            {this.state.showB && <AsyncText text="B" />}
-          </Suspense>
-        );
-      }
-    }
+      // TODO: flip to "warns" when this is implemented again.
+      it('does not warn when a low priority update suspends inside a high priority update for class components', async () => {
+        let show;
+        class App extends React.Component {
+          state = {show: false};
+
+          render() {
+            show = () => this.setState({show: true});
+            return (
+              <Suspense fallback="Loading...">
+                {this.state.show && <AsyncText text="A" />}
+              </Suspense>
+            );
+          }
+        }
 
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App />);
-    });
+        await ReactNoop.act(async () => {
+          ReactNoop.render(<App />);
+        });
 
-    expect(Scheduler).toHaveYielded(['Suspend! [A]']);
-    expect(ReactNoop).toMatchRenderedOutput('Loading...');
+        // TODO: assert toErrorDev() when the warning is implemented again.
+        ReactNoop.act(() => {
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_UserBlockingPriority,
+            () => show(),
+          );
+        });
+      });
 
-    ReactNoop.act(() => {
-      Scheduler.unstable_runWithPriority(
-        Scheduler.unstable_UserBlockingPriority,
-        () => showB(),
-      );
-    });
+      it('does not warn about wrong Suspense priority if no new fallbacks are shown', async () => {
+        let showB;
+        class App extends React.Component {
+          state = {showB: false};
+
+          render() {
+            showB = () => this.setState({showB: true});
+            return (
+              <Suspense fallback="Loading...">
+                {<AsyncText text="A" />}
+                {this.state.showB && <AsyncText text="B" />}
+              </Suspense>
+            );
+          }
+        }
 
-    expect(Scheduler).toHaveYielded(['Suspend! [A]', 'Suspend! [B]']);
-  });
+        await ReactNoop.act(async () => {
+          ReactNoop.render(<App />);
+        });
 
-  // TODO: flip to "warns" when this is implemented again.
-  it(
-    'does not warn when component that triggered user-blocking update is between Suspense boundary ' +
-      'and component that suspended',
-    async () => {
-      let _setShow;
-      function A() {
-        const [show, setShow] = React.useState(false);
-        _setShow = setShow;
-        return show && <AsyncText text="A" />;
-      }
-      function App() {
-        return (
-          <Suspense fallback="Loading...">
-            <A />
-          </Suspense>
-        );
-      }
-      await ReactNoop.act(async () => {
-        ReactNoop.render(<App />);
-      });
+        expect(Scheduler).toHaveYielded(['Suspend! [A]']);
+        expect(ReactNoop).toMatchRenderedOutput('Loading...');
 
-      // TODO: assert toErrorDev() when the warning is implemented again.
-      ReactNoop.act(() => {
-        Scheduler.unstable_runWithPriority(
-          Scheduler.unstable_UserBlockingPriority,
-          () => _setShow(true),
-        );
+        ReactNoop.act(() => {
+          Scheduler.unstable_runWithPriority(
+            Scheduler.unstable_UserBlockingPriority,
+            () => showB(),
+          );
+        });
+
+        expect(Scheduler).toHaveYielded(['Suspend! [A]', 'Suspend! [B]']);
       });
-    },
-  );
 
-  it('normal priority updates suspending do not warn for class components', async () => {
-    let show;
-    class App extends React.Component {
-      state = {show: false};
-
-      render() {
-        show = () => this.setState({show: true});
-        return (
-          <Suspense fallback="Loading...">
-            {this.state.show && <AsyncText text="A" />}
-          </Suspense>
-        );
-      }
-    }
+      // TODO: flip to "warns" when this is implemented again.
+      it(
+        'does not warn when component that triggered user-blocking update is between Suspense boundary ' +
+          'and component that suspended',
+        async () => {
+          let _setShow;
+          function A() {
+            const [show, setShow] = React.useState(false);
+            _setShow = setShow;
+            return show && <AsyncText text="A" />;
+          }
+          function App() {
+            return (
+              <Suspense fallback="Loading...">
+                <A />
+              </Suspense>
+            );
+          }
+          await ReactNoop.act(async () => {
+            ReactNoop.render(<App />);
+          });
+
+          // TODO: assert toErrorDev() when the warning is implemented again.
+          ReactNoop.act(() => {
+            Scheduler.unstable_runWithPriority(
+              Scheduler.unstable_UserBlockingPriority,
+              () => _setShow(true),
+            );
+          });
+        },
+      );
+
+      it('normal priority updates suspending do not warn for class components', async () => {
+        let show;
+        class App extends React.Component {
+          state = {show: false};
+
+          render() {
+            show = () => this.setState({show: true});
+            return (
+              <Suspense fallback="Loading...">
+                {this.state.show && <AsyncText text="A" />}
+              </Suspense>
+            );
+          }
+        }
 
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App />);
-    });
+        await ReactNoop.act(async () => {
+          ReactNoop.render(<App />);
+        });
 
-    // also make sure lowpriority is okay
-    await ReactNoop.act(async () => show(true));
+        // also make sure lowpriority is okay
+        await ReactNoop.act(async () => show(true));
 
-    expect(Scheduler).toHaveYielded(['Suspend! [A]']);
-    Scheduler.unstable_advanceTime(100);
-    await advanceTimers(100);
+        expect(Scheduler).toHaveYielded(['Suspend! [A]']);
+        Scheduler.unstable_advanceTime(100);
+        await advanceTimers(100);
 
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-  });
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+      });
 
-  it('normal priority updates suspending do not warn for functional components', async () => {
-    let _setShow;
-    function App() {
-      let [show, setShow] = React.useState(false);
-      _setShow = setShow;
-      return (
-        <Suspense fallback="Loading...">
-          {show && <AsyncText text="A" />}
-        </Suspense>
-      );
-    }
+      it('normal priority updates suspending do not warn for functional components', async () => {
+        let _setShow;
+        function App() {
+          let [show, setShow] = React.useState(false);
+          _setShow = setShow;
+          return (
+            <Suspense fallback="Loading...">
+              {show && <AsyncText text="A" />}
+            </Suspense>
+          );
+        }
 
-    await ReactNoop.act(async () => {
-      ReactNoop.render(<App />);
-    });
+        await ReactNoop.act(async () => {
+          ReactNoop.render(<App />);
+        });
 
-    // also make sure lowpriority is okay
-    await ReactNoop.act(async () => _setShow(true));
+        // also make sure lowpriority is okay
+        await ReactNoop.act(async () => _setShow(true));
 
-    expect(Scheduler).toHaveYielded(['Suspend! [A]']);
-    Scheduler.unstable_advanceTime(100);
-    await advanceTimers(100);
+        expect(Scheduler).toHaveYielded(['Suspend! [A]']);
+        Scheduler.unstable_advanceTime(100);
+        await advanceTimers(100);
 
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-  });
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+      });
 
-  it('shows the parent fallback if the inner fallback should be avoided', async () => {
-    function Foo({showC}) {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <Suspense fallback={<Text text="Initial load..." />}>
-          <Suspense
-            unstable_avoidThisFallback={true}
-            fallback={<Text text="Updating..." />}>
-            <AsyncText text="A" ms={5000} />
-            {showC ? <AsyncText text="C" ms={5000} /> : null}
-          </Suspense>
-          <Text text="B" />
-        </Suspense>
-      );
-    }
-
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield([
-      'Foo',
-      'Suspend! [A]',
-      'B',
-      'Initial load...',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([span('Initial load...')]);
-
-    // Eventually we resolve and show the data.
-    Scheduler.unstable_advanceTime(5000);
-    await advanceTimers(5000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYield(['A', 'B']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
-
-    // Update to show C
-    ReactNoop.render(<Foo showC={true} />);
-    expect(Scheduler).toFlushAndYield([
-      'Foo',
-      'A',
-      'Suspend! [C]',
-      'Updating...',
-      'B',
-    ]);
-    // Flush to skip suspended time.
-    Scheduler.unstable_advanceTime(600);
-    await advanceTimers(600);
-    // Since the optional suspense boundary is already showing its content,
-    // we have to use the inner fallback instead.
-    expect(ReactNoop.getChildren()).toEqual([
-      hiddenSpan('A'),
-      span('Updating...'),
-      span('B'),
-    ]);
-
-    // Later we load the data.
-    Scheduler.unstable_advanceTime(5000);
-    await advanceTimers(5000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [C]']);
-    expect(Scheduler).toFlushAndYield(['A', 'C']);
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('C'), span('B')]);
-  });
+      it('shows the parent fallback if the inner fallback should be avoided', async () => {
+        function Foo({showC}) {
+          Scheduler.unstable_yieldValue('Foo');
+          return (
+            <Suspense fallback={<Text text="Initial load..." />}>
+              <Suspense
+                unstable_avoidThisFallback={true}
+                fallback={<Text text="Updating..." />}>
+                <AsyncText text="A" ms={5000} />
+                {showC ? <AsyncText text="C" ms={5000} /> : null}
+              </Suspense>
+              <Text text="B" />
+            </Suspense>
+          );
+        }
 
-  it('favors showing the inner fallback for nested top level avoided fallback', async () => {
-    function Foo({showB}) {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <Suspense
-          unstable_avoidThisFallback={true}
-          fallback={<Text text="Loading A..." />}>
-          <Text text="A" />
-          <Suspense
-            unstable_avoidThisFallback={true}
-            fallback={<Text text="Loading B..." />}>
-            <AsyncText text="B" ms={5000} />
-          </Suspense>
-        </Suspense>
-      );
-    }
-
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield([
-      'Foo',
-      'A',
-      'Suspend! [B]',
-      'Loading B...',
-    ]);
-    // Flush to skip suspended time.
-    Scheduler.unstable_advanceTime(600);
-    await advanceTimers(600);
-
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
-  });
+        ReactNoop.render(<Foo />);
+        expect(Scheduler).toFlushAndYield([
+          'Foo',
+          'Suspend! [A]',
+          'B',
+          'Initial load...',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('Initial load...')]);
+
+        // Eventually we resolve and show the data.
+        Scheduler.unstable_advanceTime(5000);
+        await advanceTimers(5000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYield(['A', 'B']);
+        expect(ReactNoop.getChildren()).toEqual([span('A'), span('B')]);
+
+        // Update to show C
+        ReactNoop.render(<Foo showC={true} />);
+        expect(Scheduler).toFlushAndYield([
+          'Foo',
+          'A',
+          'Suspend! [C]',
+          'Updating...',
+          'B',
+        ]);
+        // Flush to skip suspended time.
+        Scheduler.unstable_advanceTime(600);
+        await advanceTimers(600);
+        // Since the optional suspense boundary is already showing its content,
+        // we have to use the inner fallback instead.
+        expect(ReactNoop.getChildren()).toEqual([
+          hiddenSpan('A'),
+          span('Updating...'),
+          span('B'),
+        ]);
 
-  it('keeps showing an avoided parent fallback if it is already showing', async () => {
-    function Foo({showB}) {
-      Scheduler.unstable_yieldValue('Foo');
-      return (
-        <Suspense fallback={<Text text="Initial load..." />}>
-          <Suspense
-            unstable_avoidThisFallback={true}
-            fallback={<Text text="Loading A..." />}>
-            <Text text="A" />
-            {showB ? (
+        // Later we load the data.
+        Scheduler.unstable_advanceTime(5000);
+        await advanceTimers(5000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [C]']);
+        expect(Scheduler).toFlushAndYield(['A', 'C']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('A'),
+          span('C'),
+          span('B'),
+        ]);
+      });
+
+      it('favors showing the inner fallback for nested top level avoided fallback', async () => {
+        function Foo({showB}) {
+          Scheduler.unstable_yieldValue('Foo');
+          return (
+            <Suspense
+              unstable_avoidThisFallback={true}
+              fallback={<Text text="Loading A..." />}>
+              <Text text="A" />
               <Suspense
                 unstable_avoidThisFallback={true}
                 fallback={<Text text="Loading B..." />}>
                 <AsyncText text="B" ms={5000} />
               </Suspense>
-            ) : null}
-          </Suspense>
-        </Suspense>
-      );
-    }
+            </Suspense>
+          );
+        }
+
+        ReactNoop.render(<Foo />);
+        expect(Scheduler).toFlushAndYield([
+          'Foo',
+          'A',
+          'Suspend! [B]',
+          'Loading B...',
+        ]);
+        // Flush to skip suspended time.
+        Scheduler.unstable_advanceTime(600);
+        await advanceTimers(600);
+
+        expect(ReactNoop.getChildren()).toEqual([
+          span('A'),
+          span('Loading B...'),
+        ]);
+      });
+
+      it('keeps showing an avoided parent fallback if it is already showing', async () => {
+        function Foo({showB}) {
+          Scheduler.unstable_yieldValue('Foo');
+          return (
+            <Suspense fallback={<Text text="Initial load..." />}>
+              <Suspense
+                unstable_avoidThisFallback={true}
+                fallback={<Text text="Loading A..." />}>
+                <Text text="A" />
+                {showB ? (
+                  <Suspense
+                    unstable_avoidThisFallback={true}
+                    fallback={<Text text="Loading B..." />}>
+                    <AsyncText text="B" ms={5000} />
+                  </Suspense>
+                ) : null}
+              </Suspense>
+            </Suspense>
+          );
+        }
 
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield(['Foo', 'A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+        ReactNoop.render(<Foo />);
+        expect(Scheduler).toFlushAndYield(['Foo', 'A']);
+        expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
-    ReactNoop.render(<Foo showB={true} />);
+        ReactNoop.render(<Foo showB={true} />);
 
-    expect(Scheduler).toFlushAndYield([
-      'Foo',
-      'A',
-      'Suspend! [B]',
-      'Loading B...',
-    ]);
-    // Still suspended.
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
+        expect(Scheduler).toFlushAndYield([
+          'Foo',
+          'A',
+          'Suspend! [B]',
+          'Loading B...',
+        ]);
+        // Still suspended.
+        expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
-    // Flush to skip suspended time.
-    Scheduler.unstable_advanceTime(600);
-    await advanceTimers(600);
+        // Flush to skip suspended time.
+        Scheduler.unstable_advanceTime(600);
+        await advanceTimers(600);
 
-    expect(ReactNoop.getChildren()).toEqual([span('A'), span('Loading B...')]);
-  });
+        expect(ReactNoop.getChildren()).toEqual([
+          span('A'),
+          span('Loading B...'),
+        ]);
+      });
 
-  it('commits a suspended idle pri render within a reasonable time', async () => {
-    function Foo({renderContent}) {
-      return (
-        <Fragment>
-          <Suspense fallback={<Text text="Loading A..." />}>
-            {renderContent ? <AsyncText text="A" ms={10000} /> : null}
-          </Suspense>
-        </Fragment>
-      );
-    }
+      it('commits a suspended idle pri render within a reasonable time', async () => {
+        function Foo({renderContent}) {
+          return (
+            <Fragment>
+              <Suspense fallback={<Text text="Loading A..." />}>
+                {renderContent ? <AsyncText text="A" ms={10000} /> : null}
+              </Suspense>
+            </Fragment>
+          );
+        }
 
-    ReactNoop.render(<Foo />);
-    expect(Scheduler).toFlushAndYield([]);
+        ReactNoop.render(<Foo />);
+        expect(Scheduler).toFlushAndYield([]);
 
-    ReactNoop.render(<Foo renderContent={1} />);
+        ReactNoop.render(<Foo renderContent={1} />);
 
-    // Took a long time to render. This is to ensure we get a long suspense time.
-    // Could also use something like withSuspenseConfig to simulate this.
-    Scheduler.unstable_advanceTime(1500);
-    await advanceTimers(1500);
+        // Took a long time to render. This is to ensure we get a long suspense time.
+        // Could also use something like withSuspenseConfig to simulate this.
+        Scheduler.unstable_advanceTime(1500);
+        await advanceTimers(1500);
 
-    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A...']);
-    // We're still suspended.
-    expect(ReactNoop.getChildren()).toEqual([]);
+        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading A...']);
+        // We're still suspended.
+        expect(ReactNoop.getChildren()).toEqual([]);
 
-    // Schedule an update at idle pri.
-    Scheduler.unstable_runWithPriority(Scheduler.unstable_IdlePriority, () =>
-      ReactNoop.render(<Foo renderContent={2} />),
-    );
-    // We won't even work on Idle priority.
-    expect(Scheduler).toFlushAndYield([]);
+        // Schedule an update at idle pri.
+        Scheduler.unstable_runWithPriority(
+          Scheduler.unstable_IdlePriority,
+          () => ReactNoop.render(<Foo renderContent={2} />),
+        );
+        // We won't even work on Idle priority.
+        expect(Scheduler).toFlushAndYield([]);
 
-    // We're still suspended.
-    expect(ReactNoop.getChildren()).toEqual([]);
+        // We're still suspended.
+        expect(ReactNoop.getChildren()).toEqual([]);
 
-    // Advance time a little bit.
-    Scheduler.unstable_advanceTime(150);
-    await advanceTimers(150);
+        // Advance time a little bit.
+        Scheduler.unstable_advanceTime(150);
+        await advanceTimers(150);
 
-    // We should not have committed yet because we had a long suspense time.
-    expect(ReactNoop.getChildren()).toEqual([]);
+        // We should not have committed yet because we had a long suspense time.
+        expect(ReactNoop.getChildren()).toEqual([]);
 
-    // Flush to skip suspended time.
-    Scheduler.unstable_advanceTime(600);
-    await advanceTimers(600);
+        // Flush to skip suspended time.
+        Scheduler.unstable_advanceTime(600);
+        await advanceTimers(600);
 
-    expect(ReactNoop.getChildren()).toEqual([span('Loading A...')]);
-  });
+        expect(ReactNoop.getChildren()).toEqual([span('Loading A...')]);
+      });
 
-  describe('delays transitions when there a suspense config is supplied', () => {
-    const SUSPENSE_CONFIG = {
-      timeoutMs: 2000,
-    };
+      describe('delays transitions when there a suspense config is supplied', () => {
+        const SUSPENSE_CONFIG = {
+          timeoutMs: 2000,
+        };
 
-    it('top level render', async () => {
-      function App({page}) {
-        return (
-          <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText text={page} ms={5000} />
-          </Suspense>
-        );
-      }
+        it('top level render', async () => {
+          function App({page}) {
+            return (
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText text={page} ms={5000} />
+              </Suspense>
+            );
+          }
 
-      // Initial render.
-      React.unstable_withSuspenseConfig(
-        () => ReactNoop.render(<App page="A" />),
-        SUSPENSE_CONFIG,
-      );
+          // Initial render.
+          React.unstable_withSuspenseConfig(
+            () => ReactNoop.render(<App page="A" />),
+            SUSPENSE_CONFIG,
+          );
 
-      expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-      // Only a short time is needed to unsuspend the initial loading state.
-      Scheduler.unstable_advanceTime(400);
-      await advanceTimers(400);
-      expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
-
-      // Later we load the data.
-      Scheduler.unstable_advanceTime(5000);
-      await advanceTimers(5000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-      expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
-
-      // Start transition.
-      React.unstable_withSuspenseConfig(
-        () => ReactNoop.render(<App page="B" />),
-        SUSPENSE_CONFIG,
-      );
+          expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+          // Only a short time is needed to unsuspend the initial loading state.
+          Scheduler.unstable_advanceTime(400);
+          await advanceTimers(400);
+          expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+
+          // Later we load the data.
+          Scheduler.unstable_advanceTime(5000);
+          await advanceTimers(5000);
+          expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+          expect(Scheduler).toFlushAndYield(['A']);
+          expect(ReactNoop.getChildren()).toEqual([span('A')]);
+
+          // Start transition.
+          React.unstable_withSuspenseConfig(
+            () => ReactNoop.render(<App page="B" />),
+            SUSPENSE_CONFIG,
+          );
 
-      expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-      Scheduler.unstable_advanceTime(1000);
-      await advanceTimers(1000);
-      // Even after a second, we have still not yet flushed the loading state.
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
-      Scheduler.unstable_advanceTime(1100);
-      await advanceTimers(1100);
-      // After the timeout, we do show the loading state.
-      expect(ReactNoop.getChildren()).toEqual([
-        hiddenSpan('A'),
-        span('Loading...'),
-      ]);
-      // Later we load the data.
-      Scheduler.unstable_advanceTime(3000);
-      await advanceTimers(3000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-      expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
-    });
+          expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
+          Scheduler.unstable_advanceTime(1000);
+          await advanceTimers(1000);
+          // Even after a second, we have still not yet flushed the loading state.
+          expect(ReactNoop.getChildren()).toEqual([span('A')]);
+          Scheduler.unstable_advanceTime(1100);
+          await advanceTimers(1100);
+          // After the timeout, we do show the loading state.
+          expect(ReactNoop.getChildren()).toEqual([
+            hiddenSpan('A'),
+            span('Loading...'),
+          ]);
+          // Later we load the data.
+          Scheduler.unstable_advanceTime(3000);
+          await advanceTimers(3000);
+          expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+          expect(Scheduler).toFlushAndYield(['B']);
+          expect(ReactNoop.getChildren()).toEqual([span('B')]);
+        });
+
+        it('hooks', async () => {
+          let transitionToPage;
+          function App() {
+            let [page, setPage] = React.useState('none');
+            transitionToPage = setPage;
+            if (page === 'none') {
+              return null;
+            }
+            return (
+              <Suspense fallback={<Text text="Loading..." />}>
+                <AsyncText text={page} ms={5000} />
+              </Suspense>
+            );
+          }
 
-    it('hooks', async () => {
-      let transitionToPage;
-      function App() {
-        let [page, setPage] = React.useState('none');
-        transitionToPage = setPage;
-        if (page === 'none') {
-          return null;
-        }
-        return (
-          <Suspense fallback={<Text text="Loading..." />}>
-            <AsyncText text={page} ms={5000} />
-          </Suspense>
-        );
-      }
+          ReactNoop.render(<App />);
+          expect(Scheduler).toFlushAndYield([]);
 
-      ReactNoop.render(<App />);
-      expect(Scheduler).toFlushAndYield([]);
+          // Initial render.
+          await ReactNoop.act(async () => {
+            React.unstable_withSuspenseConfig(
+              () => transitionToPage('A'),
+              SUSPENSE_CONFIG,
+            );
 
-      // Initial render.
-      await ReactNoop.act(async () => {
-        React.unstable_withSuspenseConfig(
-          () => transitionToPage('A'),
-          SUSPENSE_CONFIG,
-        );
+            expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+            // Only a short time is needed to unsuspend the initial loading state.
+            Scheduler.unstable_advanceTime(400);
+            await advanceTimers(400);
+            expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+          });
 
-        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-        // Only a short time is needed to unsuspend the initial loading state.
-        Scheduler.unstable_advanceTime(400);
-        await advanceTimers(400);
-        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+          // Later we load the data.
+          Scheduler.unstable_advanceTime(5000);
+          await advanceTimers(5000);
+          expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+          expect(Scheduler).toFlushAndYield(['A']);
+          expect(ReactNoop.getChildren()).toEqual([span('A')]);
+
+          // Start transition.
+          await ReactNoop.act(async () => {
+            React.unstable_withSuspenseConfig(
+              () => transitionToPage('B'),
+              SUSPENSE_CONFIG,
+            );
+
+            expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
+            Scheduler.unstable_advanceTime(1000);
+            await advanceTimers(1000);
+            // Even after a second, we have still not yet flushed the loading state.
+            expect(ReactNoop.getChildren()).toEqual([span('A')]);
+            Scheduler.unstable_advanceTime(1100);
+            await advanceTimers(1100);
+            // After the timeout, we do show the loading state.
+            expect(ReactNoop.getChildren()).toEqual([
+              hiddenSpan('A'),
+              span('Loading...'),
+            ]);
+          });
+          // Later we load the data.
+          Scheduler.unstable_advanceTime(3000);
+          await advanceTimers(3000);
+          expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+          expect(Scheduler).toFlushAndYield(['B']);
+          expect(ReactNoop.getChildren()).toEqual([span('B')]);
+        });
+
+        it('classes', async () => {
+          let transitionToPage;
+          class App extends React.Component {
+            state = {page: 'none'};
+            render() {
+              transitionToPage = page => this.setState({page});
+              let page = this.state.page;
+              if (page === 'none') {
+                return null;
+              }
+              return (
+                <Suspense fallback={<Text text="Loading..." />}>
+                  <AsyncText text={page} ms={5000} />
+                </Suspense>
+              );
+            }
+          }
+
+          ReactNoop.render(<App />);
+          expect(Scheduler).toFlushAndYield([]);
+
+          // Initial render.
+          await ReactNoop.act(async () => {
+            React.unstable_withSuspenseConfig(
+              () => transitionToPage('A'),
+              SUSPENSE_CONFIG,
+            );
+
+            expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+            // Only a short time is needed to unsuspend the initial loading state.
+            Scheduler.unstable_advanceTime(400);
+            await advanceTimers(400);
+            expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+          });
+
+          // Later we load the data.
+          Scheduler.unstable_advanceTime(5000);
+          await advanceTimers(5000);
+          expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+          expect(Scheduler).toFlushAndYield(['A']);
+          expect(ReactNoop.getChildren()).toEqual([span('A')]);
+
+          // Start transition.
+          await ReactNoop.act(async () => {
+            React.unstable_withSuspenseConfig(
+              () => transitionToPage('B'),
+              SUSPENSE_CONFIG,
+            );
+
+            expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
+            Scheduler.unstable_advanceTime(1000);
+            await advanceTimers(1000);
+            // Even after a second, we have still not yet flushed the loading state.
+            expect(ReactNoop.getChildren()).toEqual([span('A')]);
+            Scheduler.unstable_advanceTime(1100);
+            await advanceTimers(1100);
+            // After the timeout, we do show the loading state.
+            expect(ReactNoop.getChildren()).toEqual([
+              hiddenSpan('A'),
+              span('Loading...'),
+            ]);
+          });
+          // Later we load the data.
+          Scheduler.unstable_advanceTime(3000);
+          await advanceTimers(3000);
+          expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+          expect(Scheduler).toFlushAndYield(['B']);
+          expect(ReactNoop.getChildren()).toEqual([span('B')]);
+        });
       });
 
-      // Later we load the data.
-      Scheduler.unstable_advanceTime(5000);
-      await advanceTimers(5000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-      expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      it('disables suspense config when nothing is passed to withSuspenseConfig', async () => {
+        function App({page}) {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <AsyncText text={page} ms={2000} />
+            </Suspense>
+          );
+        }
+
+        // Initial render.
+        ReactNoop.render(<App page="A" />);
+        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+        Scheduler.unstable_advanceTime(2000);
+        await advanceTimers(2000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYield(['A']);
+        expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
-      // Start transition.
-      await ReactNoop.act(async () => {
+        // Start transition.
         React.unstable_withSuspenseConfig(
-          () => transitionToPage('B'),
-          SUSPENSE_CONFIG,
+          () => {
+            // When we schedule an inner transition without a suspense config
+            // so it should only suspend for a short time.
+            React.unstable_withSuspenseConfig(() =>
+              ReactNoop.render(<App page="B" />),
+            );
+          },
+          {timeoutMs: 2000},
         );
 
         expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-        Scheduler.unstable_advanceTime(1000);
-        await advanceTimers(1000);
-        // Even after a second, we have still not yet flushed the loading state.
+        // Suspended
         expect(ReactNoop.getChildren()).toEqual([span('A')]);
-        Scheduler.unstable_advanceTime(1100);
-        await advanceTimers(1100);
-        // After the timeout, we do show the loading state.
+        Scheduler.unstable_advanceTime(500);
+        await advanceTimers(500);
+        // Committed loading state.
         expect(ReactNoop.getChildren()).toEqual([
           hiddenSpan('A'),
           span('Loading...'),
         ]);
+
+        Scheduler.unstable_advanceTime(2000);
+        await advanceTimers(2000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+        expect(Scheduler).toFlushAndYield(['B']);
+        expect(ReactNoop.getChildren()).toEqual([span('B')]);
+
+        React.unstable_withSuspenseConfig(
+          () => {
+            // First we schedule an inner unrelated update.
+            React.unstable_withSuspenseConfig(() =>
+              ReactNoop.render(<App page="B" unrelated={true} />),
+            );
+            // Then we schedule another transition to a slow page,
+            // but at this scope we should suspend for longer.
+            Scheduler.unstable_next(() => ReactNoop.render(<App page="C" />));
+          },
+          {timeoutMs: 2000},
+        );
+        expect(Scheduler).toFlushAndYield([
+          'Suspend! [C]',
+          'Loading...',
+          'Suspend! [C]',
+          'Loading...',
+        ]);
+        expect(ReactNoop.getChildren()).toEqual([span('B')]);
+        Scheduler.unstable_advanceTime(1200);
+        await advanceTimers(1200);
+        // Even after a second, we have still not yet flushed the loading state.
+        expect(ReactNoop.getChildren()).toEqual([span('B')]);
+        Scheduler.unstable_advanceTime(1200);
+        await advanceTimers(1200);
+        // After the two second timeout we show the loading state.
+        expect(ReactNoop.getChildren()).toEqual([
+          hiddenSpan('B'),
+          span('Loading...'),
+        ]);
       });
-      // Later we load the data.
-      Scheduler.unstable_advanceTime(3000);
-      await advanceTimers(3000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-      expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
-    });
 
-    it('classes', async () => {
-      let transitionToPage;
-      class App extends React.Component {
-        state = {page: 'none'};
-        render() {
-          transitionToPage = page => this.setState({page});
-          let page = this.state.page;
-          if (page === 'none') {
-            return null;
-          }
+      it('withSuspenseConfig timeout applies when we use an updated avoided boundary', async () => {
+        function App({page}) {
           return (
             <Suspense fallback={<Text text="Loading..." />}>
-              <AsyncText text={page} ms={5000} />
+              <Text text="Hi!" />
+              <Suspense
+                fallback={<Text text={'Loading ' + page + '...'} />}
+                unstable_avoidThisFallback={true}>
+                <AsyncText text={page} ms={3000} />
+              </Suspense>
             </Suspense>
           );
         }
-      }
 
-      ReactNoop.render(<App />);
-      expect(Scheduler).toFlushAndYield([]);
+        // Initial render.
+        ReactNoop.render(<App page="A" />);
+        expect(Scheduler).toFlushAndYield([
+          'Hi!',
+          'Suspend! [A]',
+          'Loading...',
+        ]);
+        Scheduler.unstable_advanceTime(3000);
+        await advanceTimers(3000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYield(['Hi!', 'A']);
+        expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
 
-      // Initial render.
-      await ReactNoop.act(async () => {
+        // Start transition.
         React.unstable_withSuspenseConfig(
-          () => transitionToPage('A'),
-          SUSPENSE_CONFIG,
+          () => ReactNoop.render(<App page="B" />),
+          {timeoutMs: 2000},
         );
 
-        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-        // Only a short time is needed to unsuspend the initial loading state.
-        Scheduler.unstable_advanceTime(400);
-        await advanceTimers(400);
-        expect(ReactNoop.getChildren()).toEqual([span('Loading...')]);
+        expect(Scheduler).toFlushAndYield([
+          'Hi!',
+          'Suspend! [B]',
+          'Loading B...',
+        ]);
+
+        // Suspended
+        expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+        Scheduler.unstable_advanceTime(1800);
+        await advanceTimers(1800);
+        expect(Scheduler).toFlushAndYield([]);
+        // We should still be suspended here because this loading state should be avoided.
+        expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+        Scheduler.unstable_advanceTime(1500);
+        await advanceTimers(1500);
+        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
+        expect(ReactNoop.getChildren()).toEqual([
+          span('Hi!'),
+          hiddenSpan('A'),
+          span('Loading B...'),
+        ]);
       });
 
-      // Later we load the data.
-      Scheduler.unstable_advanceTime(5000);
-      await advanceTimers(5000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-      expect(Scheduler).toFlushAndYield(['A']);
-      expect(ReactNoop.getChildren()).toEqual([span('A')]);
+      it('withSuspenseConfig timeout applies when we use a newly created avoided boundary', async () => {
+        function App({page}) {
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <Text text="Hi!" />
+              {page === 'A' ? (
+                <Text text="A" />
+              ) : (
+                <Suspense
+                  fallback={<Text text={'Loading ' + page + '...'} />}
+                  unstable_avoidThisFallback={true}>
+                  <AsyncText text={page} ms={3000} />
+                </Suspense>
+              )}
+            </Suspense>
+          );
+        }
+
+        // Initial render.
+        ReactNoop.render(<App page="A" />);
+        expect(Scheduler).toFlushAndYield(['Hi!', 'A']);
+        expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
 
-      // Start transition.
-      await ReactNoop.act(async () => {
+        // Start transition.
         React.unstable_withSuspenseConfig(
-          () => transitionToPage('B'),
-          SUSPENSE_CONFIG,
+          () => ReactNoop.render(<App page="B" />),
+          {timeoutMs: 2000},
         );
 
-        expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-        Scheduler.unstable_advanceTime(1000);
-        await advanceTimers(1000);
-        // Even after a second, we have still not yet flushed the loading state.
-        expect(ReactNoop.getChildren()).toEqual([span('A')]);
-        Scheduler.unstable_advanceTime(1100);
-        await advanceTimers(1100);
-        // After the timeout, we do show the loading state.
+        expect(Scheduler).toFlushAndYield([
+          'Hi!',
+          'Suspend! [B]',
+          'Loading B...',
+        ]);
+
+        // Suspended
+        expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+        Scheduler.unstable_advanceTime(1800);
+        await advanceTimers(1800);
+        expect(Scheduler).toFlushAndYield([]);
+        // We should still be suspended here because this loading state should be avoided.
+        expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
+        Scheduler.unstable_advanceTime(1500);
+        await advanceTimers(1500);
+        expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
         expect(ReactNoop.getChildren()).toEqual([
-          hiddenSpan('A'),
-          span('Loading...'),
+          span('Hi!'),
+          span('Loading B...'),
         ]);
       });
-      // Later we load the data.
-      Scheduler.unstable_advanceTime(3000);
-      await advanceTimers(3000);
-      expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-      expect(Scheduler).toFlushAndYield(['B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
-    });
-  });
 
-  it('disables suspense config when nothing is passed to withSuspenseConfig', async () => {
-    function App({page}) {
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <AsyncText text={page} ms={2000} />
-        </Suspense>
-      );
-    }
-
-    // Initial render.
-    ReactNoop.render(<App page="A" />);
-    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    Scheduler.unstable_advanceTime(2000);
-    await advanceTimers(2000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYield(['A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
-
-    // Start transition.
-    React.unstable_withSuspenseConfig(
-      () => {
-        // When we schedule an inner transition without a suspense config
-        // so it should only suspend for a short time.
-        React.unstable_withSuspenseConfig(() =>
-          ReactNoop.render(<App page="B" />),
-        );
-      },
-      {timeoutMs: 2000},
-    );
-
-    expect(Scheduler).toFlushAndYield(['Suspend! [B]', 'Loading...']);
-    // Suspended
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
-    Scheduler.unstable_advanceTime(500);
-    await advanceTimers(500);
-    // Committed loading state.
-    expect(ReactNoop.getChildren()).toEqual([
-      hiddenSpan('A'),
-      span('Loading...'),
-    ]);
-
-    Scheduler.unstable_advanceTime(2000);
-    await advanceTimers(2000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    expect(Scheduler).toFlushAndYield(['B']);
-    expect(ReactNoop.getChildren()).toEqual([span('B')]);
-
-    React.unstable_withSuspenseConfig(
-      () => {
-        // First we schedule an inner unrelated update.
-        React.unstable_withSuspenseConfig(() =>
-          ReactNoop.render(<App page="B" unrelated={true} />),
-        );
-        // Then we schedule another transition to a slow page,
-        // but at this scope we should suspend for longer.
-        Scheduler.unstable_next(() => ReactNoop.render(<App page="C" />));
-      },
-      {timeoutMs: 2000},
-    );
-    expect(Scheduler).toFlushAndYield([
-      'Suspend! [C]',
-      'Loading...',
-      'Suspend! [C]',
-      'Loading...',
-    ]);
-    expect(ReactNoop.getChildren()).toEqual([span('B')]);
-    Scheduler.unstable_advanceTime(1200);
-    await advanceTimers(1200);
-    // Even after a second, we have still not yet flushed the loading state.
-    expect(ReactNoop.getChildren()).toEqual([span('B')]);
-    Scheduler.unstable_advanceTime(1200);
-    await advanceTimers(1200);
-    // After the two second timeout we show the loading state.
-    expect(ReactNoop.getChildren()).toEqual([
-      hiddenSpan('B'),
-      span('Loading...'),
-    ]);
-  });
+      it('supports delaying a busy spinner from disappearing', async () => {
+        function useLoadingIndicator(config) {
+          let [isLoading, setLoading] = React.useState(false);
+          let start = React.useCallback(
+            cb => {
+              setLoading(true);
+              Scheduler.unstable_next(() =>
+                React.unstable_withSuspenseConfig(() => {
+                  setLoading(false);
+                  cb();
+                }, config),
+              );
+            },
+            [setLoading, config],
+          );
+          return [isLoading, start];
+        }
 
-  it('withSuspenseConfig timeout applies when we use an updated avoided boundary', async () => {
-    function App({page}) {
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <Text text="Hi!" />
-          <Suspense
-            fallback={<Text text={'Loading ' + page + '...'} />}
-            unstable_avoidThisFallback={true}>
-            <AsyncText text={page} ms={3000} />
-          </Suspense>
-        </Suspense>
-      );
-    }
-
-    // Initial render.
-    ReactNoop.render(<App page="A" />);
-    expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [A]', 'Loading...']);
-    Scheduler.unstable_advanceTime(3000);
-    await advanceTimers(3000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYield(['Hi!', 'A']);
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-
-    // Start transition.
-    React.unstable_withSuspenseConfig(
-      () => ReactNoop.render(<App page="B" />),
-      {timeoutMs: 2000},
-    );
-
-    expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
-
-    // Suspended
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-    Scheduler.unstable_advanceTime(1800);
-    await advanceTimers(1800);
-    expect(Scheduler).toFlushAndYield([]);
-    // We should still be suspended here because this loading state should be avoided.
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-    Scheduler.unstable_advanceTime(1500);
-    await advanceTimers(1500);
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Hi!'),
-      hiddenSpan('A'),
-      span('Loading B...'),
-    ]);
-  });
+        const SUSPENSE_CONFIG = {
+          timeoutMs: 10000,
+          busyDelayMs: 500,
+          busyMinDurationMs: 400,
+        };
 
-  it('withSuspenseConfig timeout applies when we use a newly created avoided boundary', async () => {
-    function App({page}) {
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <Text text="Hi!" />
-          {page === 'A' ? (
-            <Text text="A" />
-          ) : (
-            <Suspense
-              fallback={<Text text={'Loading ' + page + '...'} />}
-              unstable_avoidThisFallback={true}>
-              <AsyncText text={page} ms={3000} />
-            </Suspense>
-          )}
-        </Suspense>
-      );
-    }
-
-    // Initial render.
-    ReactNoop.render(<App page="A" />);
-    expect(Scheduler).toFlushAndYield(['Hi!', 'A']);
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-
-    // Start transition.
-    React.unstable_withSuspenseConfig(
-      () => ReactNoop.render(<App page="B" />),
-      {timeoutMs: 2000},
-    );
-
-    expect(Scheduler).toFlushAndYield(['Hi!', 'Suspend! [B]', 'Loading B...']);
-
-    // Suspended
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-    Scheduler.unstable_advanceTime(1800);
-    await advanceTimers(1800);
-    expect(Scheduler).toFlushAndYield([]);
-    // We should still be suspended here because this loading state should be avoided.
-    expect(ReactNoop.getChildren()).toEqual([span('Hi!'), span('A')]);
-    Scheduler.unstable_advanceTime(1500);
-    await advanceTimers(1500);
-    expect(Scheduler).toHaveYielded(['Promise resolved [B]']);
-    expect(ReactNoop.getChildren()).toEqual([
-      span('Hi!'),
-      span('Loading B...'),
-    ]);
-  });
+        let transitionToPage;
 
-  it('supports delaying a busy spinner from disappearing', async () => {
-    function useLoadingIndicator(config) {
-      let [isLoading, setLoading] = React.useState(false);
-      let start = React.useCallback(
-        cb => {
-          setLoading(true);
-          Scheduler.unstable_next(() =>
-            React.unstable_withSuspenseConfig(() => {
-              setLoading(false);
-              cb();
-            }, config),
+        function App() {
+          let [page, setPage] = React.useState('A');
+          let [isLoading, startLoading] = useLoadingIndicator(SUSPENSE_CONFIG);
+          transitionToPage = nextPage => startLoading(() => setPage(nextPage));
+          return (
+            <Fragment>
+              <Text text={page} />
+              {isLoading ? <Text text="L" /> : null}
+            </Fragment>
           );
-        },
-        [setLoading, config],
-      );
-      return [isLoading, start];
-    }
-
-    const SUSPENSE_CONFIG = {
-      timeoutMs: 10000,
-      busyDelayMs: 500,
-      busyMinDurationMs: 400,
-    };
-
-    let transitionToPage;
-
-    function App() {
-      let [page, setPage] = React.useState('A');
-      let [isLoading, startLoading] = useLoadingIndicator(SUSPENSE_CONFIG);
-      transitionToPage = nextPage => startLoading(() => setPage(nextPage));
-      return (
-        <Fragment>
-          <Text text={page} />
-          {isLoading ? <Text text="L" /> : null}
-        </Fragment>
-      );
-    }
-
-    // Initial render.
-    ReactNoop.render(<App />);
-    expect(Scheduler).toFlushAndYield(['A']);
-    expect(ReactNoop.getChildren()).toEqual([span('A')]);
-
-    await ReactNoop.act(async () => {
-      transitionToPage('B');
-      // Rendering B is quick and we didn't have enough
-      // time to show the loading indicator.
-      Scheduler.unstable_advanceTime(200);
-      await advanceTimers(200);
-      expect(Scheduler).toFlushAndYield(['A', 'L', 'B']);
-      expect(ReactNoop.getChildren()).toEqual([span('B')]);
-    });
-
-    await ReactNoop.act(async () => {
-      transitionToPage('C');
-      // Rendering C is a bit slower so we've already showed
-      // the loading indicator.
-      Scheduler.unstable_advanceTime(600);
-      await advanceTimers(600);
-      expect(Scheduler).toFlushAndYield(['B', 'L', 'C']);
-      // We're technically done now but we haven't shown the
-      // loading indicator for long enough yet so we'll suspend
-      // while we keep it on the screen a bit longer.
-      expect(ReactNoop.getChildren()).toEqual([span('B'), span('L')]);
-      Scheduler.unstable_advanceTime(400);
-      await advanceTimers(400);
-      expect(ReactNoop.getChildren()).toEqual([span('C')]);
-    });
+        }
 
-    await ReactNoop.act(async () => {
-      transitionToPage('D');
-      // Rendering D is very slow so we've already showed
-      // the loading indicator.
-      Scheduler.unstable_advanceTime(1000);
-      await advanceTimers(1000);
-      expect(Scheduler).toFlushAndYield(['C', 'L', 'D']);
-      // However, since we exceeded the minimum time to show
-      // the loading indicator, we commit immediately.
-      expect(ReactNoop.getChildren()).toEqual([span('D')]);
-    });
-  });
+        // Initial render.
+        ReactNoop.render(<App />);
+        expect(Scheduler).toFlushAndYield(['A']);
+        expect(ReactNoop.getChildren()).toEqual([span('A')]);
 
-  it("suspended commit remains suspended even if there's another update at same expiration", async () => {
-    // Regression test
-    function App({text}) {
-      return (
-        <Suspense fallback="Loading...">
-          <AsyncText ms={2000} text={text} />
-        </Suspense>
-      );
-    }
+        await ReactNoop.act(async () => {
+          transitionToPage('B');
+          // Rendering B is quick and we didn't have enough
+          // time to show the loading indicator.
+          Scheduler.unstable_advanceTime(200);
+          await advanceTimers(200);
+          expect(Scheduler).toFlushAndYield(['A', 'L', 'B']);
+          expect(ReactNoop.getChildren()).toEqual([span('B')]);
+        });
+
+        await ReactNoop.act(async () => {
+          transitionToPage('C');
+          // Rendering C is a bit slower so we've already showed
+          // the loading indicator.
+          Scheduler.unstable_advanceTime(600);
+          await advanceTimers(600);
+          expect(Scheduler).toFlushAndYield(['B', 'L', 'C']);
+          // We're technically done now but we haven't shown the
+          // loading indicator for long enough yet so we'll suspend
+          // while we keep it on the screen a bit longer.
+          expect(ReactNoop.getChildren()).toEqual([span('B'), span('L')]);
+          Scheduler.unstable_advanceTime(400);
+          await advanceTimers(400);
+          expect(ReactNoop.getChildren()).toEqual([span('C')]);
+        });
+
+        await ReactNoop.act(async () => {
+          transitionToPage('D');
+          // Rendering D is very slow so we've already showed
+          // the loading indicator.
+          Scheduler.unstable_advanceTime(1000);
+          await advanceTimers(1000);
+          expect(Scheduler).toFlushAndYield(['C', 'L', 'D']);
+          // However, since we exceeded the minimum time to show
+          // the loading indicator, we commit immediately.
+          expect(ReactNoop.getChildren()).toEqual([span('D')]);
+        });
+      });
 
-    const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
-      root.render(<App text="Initial" />);
-    });
+      it("suspended commit remains suspended even if there's another update at same expiration", async () => {
+        // Regression test
+        function App({text}) {
+          return (
+            <Suspense fallback="Loading...">
+              <AsyncText ms={2000} text={text} />
+            </Suspense>
+          );
+        }
 
-    // Resolve initial render
-    await ReactNoop.act(async () => {
-      Scheduler.unstable_advanceTime(2000);
-      await advanceTimers(2000);
-    });
-    expect(Scheduler).toHaveYielded([
-      'Suspend! [Initial]',
-      'Promise resolved [Initial]',
-      'Initial',
-    ]);
-    expect(root).toMatchRenderedOutput(<span prop="Initial" />);
-
-    // Update. Since showing a fallback would hide content that's already
-    // visible, it should suspend for a bit without committing.
-    await ReactNoop.act(async () => {
-      root.render(<App text="First update" />);
-
-      expect(Scheduler).toFlushAndYield(['Suspend! [First update]']);
-      // Should not display a fallback
-      expect(root).toMatchRenderedOutput(<span prop="Initial" />);
-    });
+        const root = ReactNoop.createRoot();
+        await ReactNoop.act(async () => {
+          root.render(<App text="Initial" />);
+        });
 
-    // Update again. This should also suspend for a bit.
-    await ReactNoop.act(async () => {
-      root.render(<App text="Second update" />);
+        // Resolve initial render
+        await ReactNoop.act(async () => {
+          Scheduler.unstable_advanceTime(2000);
+          await advanceTimers(2000);
+        });
+        expect(Scheduler).toHaveYielded([
+          'Suspend! [Initial]',
+          'Promise resolved [Initial]',
+          'Initial',
+        ]);
+        expect(root).toMatchRenderedOutput(<span prop="Initial" />);
+
+        // Update. Since showing a fallback would hide content that's already
+        // visible, it should suspend for a bit without committing.
+        await ReactNoop.act(async () => {
+          root.render(<App text="First update" />);
+
+          expect(Scheduler).toFlushAndYield(['Suspend! [First update]']);
+          // Should not display a fallback
+          expect(root).toMatchRenderedOutput(<span prop="Initial" />);
+        });
+
+        // Update again. This should also suspend for a bit.
+        await ReactNoop.act(async () => {
+          root.render(<App text="Second update" />);
+
+          expect(Scheduler).toFlushAndYield(['Suspend! [Second update]']);
+          // Should not display a fallback
+          expect(root).toMatchRenderedOutput(<span prop="Initial" />);
+        });
+      });
 
-      expect(Scheduler).toFlushAndYield(['Suspend! [Second update]']);
-      // Should not display a fallback
-      expect(root).toMatchRenderedOutput(<span prop="Initial" />);
-    });
-  });
+      it('regression test: resets current "debug phase" after suspending', async () => {
+        function App() {
+          return (
+            <Suspense fallback="Loading...">
+              <Foo suspend={false} />
+            </Suspense>
+          );
+        }
 
-  it('regression test: resets current "debug phase" after suspending', async () => {
-    function App() {
-      return (
-        <Suspense fallback="Loading...">
-          <Foo suspend={false} />
-        </Suspense>
-      );
-    }
+        const thenable = {then() {}};
 
-    const thenable = {then() {}};
+        let foo;
+        class Foo extends React.Component {
+          state = {suspend: false};
+          render() {
+            foo = this;
 
-    let foo;
-    class Foo extends React.Component {
-      state = {suspend: false};
-      render() {
-        foo = this;
+            if (this.state.suspend) {
+              Scheduler.unstable_yieldValue('Suspend!');
+              throw thenable;
+            }
 
-        if (this.state.suspend) {
-          Scheduler.unstable_yieldValue('Suspend!');
-          throw thenable;
+            return <Text text="Foo" />;
+          }
         }
 
-        return <Text text="Foo" />;
-      }
-    }
+        const root = ReactNoop.createRoot();
+        await ReactNoop.act(async () => {
+          root.render(<App />);
+        });
 
-    const root = ReactNoop.createRoot();
-    await ReactNoop.act(async () => {
-      root.render(<App />);
-    });
+        expect(Scheduler).toHaveYielded(['Foo']);
 
-    expect(Scheduler).toHaveYielded(['Foo']);
+        await ReactNoop.act(async () => {
+          foo.setState({suspend: true});
 
-    await ReactNoop.act(async () => {
-      foo.setState({suspend: true});
+          // In the regression that this covers, we would neglect to reset the
+          // current debug phase after suspending (in the catch block), so React
+          // thinks we're still inside the render phase.
+          expect(Scheduler).toFlushAndYieldThrough(['Suspend!']);
 
-      // In the regression that this covers, we would neglect to reset the
-      // current debug phase after suspending (in the catch block), so React
-      // thinks we're still inside the render phase.
-      expect(Scheduler).toFlushAndYieldThrough(['Suspend!']);
+          // Then when this setState happens, React would incorrectly fire a warning
+          // about updates that happen the render phase (only fired by classes).
+          foo.setState({suspend: false});
+        });
 
-      // Then when this setState happens, React would incorrectly fire a warning
-      // about updates that happen the render phase (only fired by classes).
-      foo.setState({suspend: false});
-    });
+        expect(root).toMatchRenderedOutput(<span prop="Foo" />);
+      });
 
-    expect(root).toMatchRenderedOutput(<span prop="Foo" />);
-  });
+      it('should not render hidden content while suspended on higher pri', async () => {
+        function Offscreen() {
+          Scheduler.unstable_yieldValue('Offscreen');
+          return 'Offscreen';
+        }
+        function App({showContent}) {
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue('Commit');
+          });
+          return (
+            <>
+              <div hidden={true}>
+                <Offscreen />
+              </div>
+              <Suspense fallback={<Text text="Loading..." />}>
+                {showContent ? <AsyncText text="A" ms={2000} /> : null}
+              </Suspense>
+            </>
+          );
+        }
+
+        // Initial render.
+        ReactNoop.render(<App showContent={false} />);
+        expect(Scheduler).toFlushAndYieldThrough(['Commit']);
+        expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
+
+        // Start transition.
+        React.unstable_withSuspenseConfig(
+          () => {
+            ReactNoop.render(<App showContent={true} />);
+          },
+          {timeoutMs: 2000},
+        );
 
-  it('should not render hidden content while suspended on higher pri', async () => {
-    function Offscreen() {
-      Scheduler.unstable_yieldValue('Offscreen');
-      return 'Offscreen';
-    }
-    function App({showContent}) {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('Commit');
+        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+        Scheduler.unstable_advanceTime(2000);
+        await advanceTimers(2000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <div hidden={true} />
+            <span prop="A" />
+          </>,
+        );
+        expect(Scheduler).toFlushAndYield(['Offscreen']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <div hidden={true}>Offscreen</div>
+            <span prop="A" />
+          </>,
+        );
       });
-      return (
-        <>
-          <div hidden={true}>
-            <Offscreen />
-          </div>
-          <Suspense fallback={<Text text="Loading..." />}>
-            {showContent ? <AsyncText text="A" ms={2000} /> : null}
-          </Suspense>
-        </>
-      );
-    }
-
-    // Initial render.
-    ReactNoop.render(<App showContent={false} />);
-    expect(Scheduler).toFlushAndYieldThrough(['Commit']);
-    expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
-
-    // Start transition.
-    React.unstable_withSuspenseConfig(
-      () => {
-        ReactNoop.render(<App showContent={true} />);
-      },
-      {timeoutMs: 2000},
-    );
-
-    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    Scheduler.unstable_advanceTime(2000);
-    await advanceTimers(2000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <div hidden={true} />
-        <span prop="A" />
-      </>,
-    );
-    expect(Scheduler).toFlushAndYield(['Offscreen']);
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <div hidden={true}>Offscreen</div>
-        <span prop="A" />
-      </>,
-    );
-  });
 
-  it('should be able to unblock higher pri content before suspended hidden', async () => {
-    function Offscreen() {
-      Scheduler.unstable_yieldValue('Offscreen');
-      return 'Offscreen';
-    }
-    function App({showContent}) {
-      React.useLayoutEffect(() => {
-        Scheduler.unstable_yieldValue('Commit');
+      it('should be able to unblock higher pri content before suspended hidden', async () => {
+        function Offscreen() {
+          Scheduler.unstable_yieldValue('Offscreen');
+          return 'Offscreen';
+        }
+        function App({showContent}) {
+          React.useLayoutEffect(() => {
+            Scheduler.unstable_yieldValue('Commit');
+          });
+          return (
+            <Suspense fallback={<Text text="Loading..." />}>
+              <div hidden={true}>
+                <AsyncText text="A" ms={2000} />
+                <Offscreen />
+              </div>
+              {showContent ? <AsyncText text="A" ms={2000} /> : null}
+            </Suspense>
+          );
+        }
+
+        // Initial render.
+        ReactNoop.render(<App showContent={false} />);
+        expect(Scheduler).toFlushAndYieldThrough(['Commit']);
+        expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
+
+        // Partially render through the hidden content.
+        expect(Scheduler).toFlushAndYieldThrough(['Suspend! [A]']);
+
+        // Start transition.
+        React.unstable_withSuspenseConfig(
+          () => {
+            ReactNoop.render(<App showContent={true} />);
+          },
+          {timeoutMs: 5000},
+        );
+
+        expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
+        Scheduler.unstable_advanceTime(2000);
+        await advanceTimers(2000);
+        expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
+        expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <div hidden={true} />
+            <span prop="A" />
+          </>,
+        );
+        expect(Scheduler).toFlushAndYield(['A', 'Offscreen']);
+        expect(ReactNoop).toMatchRenderedOutput(
+          <>
+            <div hidden={true}>
+              <span prop="A" />
+              Offscreen
+            </div>
+            <span prop="A" />
+          </>,
+        );
       });
-      return (
-        <Suspense fallback={<Text text="Loading..." />}>
-          <div hidden={true}>
-            <AsyncText text="A" ms={2000} />
-            <Offscreen />
-          </div>
-          {showContent ? <AsyncText text="A" ms={2000} /> : null}
-        </Suspense>
-      );
-    }
-
-    // Initial render.
-    ReactNoop.render(<App showContent={false} />);
-    expect(Scheduler).toFlushAndYieldThrough(['Commit']);
-    expect(ReactNoop).toMatchRenderedOutput(<div hidden={true} />);
-
-    // Partially render through the hidden content.
-    expect(Scheduler).toFlushAndYieldThrough(['Suspend! [A]']);
-
-    // Start transition.
-    React.unstable_withSuspenseConfig(
-      () => {
-        ReactNoop.render(<App showContent={true} />);
-      },
-      {timeoutMs: 5000},
-    );
-
-    expect(Scheduler).toFlushAndYield(['Suspend! [A]', 'Loading...']);
-    Scheduler.unstable_advanceTime(2000);
-    await advanceTimers(2000);
-    expect(Scheduler).toHaveYielded(['Promise resolved [A]']);
-    expect(Scheduler).toFlushAndYieldThrough(['A', 'Commit']);
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <div hidden={true} />
-        <span prop="A" />
-      </>,
-    );
-    expect(Scheduler).toFlushAndYield(['A', 'Offscreen']);
-    expect(ReactNoop).toMatchRenderedOutput(
-      <>
-        <div hidden={true}>
-          <span prop="A" />
-          Offscreen
-        </div>
-        <span prop="A" />
-      </>,
-    );
+    });
   });
 });
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index 0dd89f7674a5b..e69fee083ab55 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -91,10 +91,19 @@ export const enableTrustedTypesIntegration = false;
 // Flag to turn event.target and event.currentTarget in ReactNative from a reactTag to a component instance
 export const enableNativeTargetAsInstance = false;
 
+// Controls sequence of passive effect destroy and create functions.
+// If this flag is off, destroy and create functions may be interleaved.
+// When the falg is on, all destroy functions will be run (for all fibers)
+// before any create functions are run, similar to how layout effects work.
+// This flag provides a killswitch if that proves to break existing code somehow.
+export const runAllPassiveEffectDestroysBeforeCreates = false;
+
 // Controls behavior of deferred effect destroy functions during unmount.
 // Previously these functions were run during commit (along with layout effects).
 // Ideally we should delay these until after commit for performance reasons.
 // This flag provides a killswitch if that proves to break existing code somehow.
+//
+// WARNING This flag only has an affect if used with runAllPassiveEffectDestroysBeforeCreates.
 export const deferPassiveEffectCleanupDuringUnmount = false;
 
 export const isTestEnvironment = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index aad18e8e78b35..e0d5f0d111a95 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -53,6 +53,7 @@ export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
+export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 
 // Only used in www builds.
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index f25f6d5ff6174..a323c6b5ce27c 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -48,6 +48,7 @@ export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
+export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 
 // Only used in www builds.
diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js
index 0a20f79fd9e4d..c1360b4164c89 100644
--- a/packages/shared/forks/ReactFeatureFlags.persistent.js
+++ b/packages/shared/forks/ReactFeatureFlags.persistent.js
@@ -48,6 +48,7 @@ export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
+export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 
 // Only used in www builds.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 15e7314dfe70c..b377ec18daf54 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -48,6 +48,7 @@ export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
+export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true; // this should probably *never* change
 
 // Only used in www builds.
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 924aece014e8e..289aa51578689 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -48,6 +48,7 @@ export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
+export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true; // this should probably *never* change
 
 // Only used in www builds.
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 64af39fb501ea..d3ffdb18c4c22 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -48,6 +48,7 @@ export const disableUnstableRenderSubtreeIntoContainer = false;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
+export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true;
 
 // Only used in www builds.
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index 74394efdab883..c098e56b4166f 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -13,9 +13,10 @@ import typeof * as ExportsType from './ReactFeatureFlags.www';
 // Re-export dynamic flags from the www version.
 export const {
   debugRenderPhaseSideEffectsForStrictMode,
+  deferPassiveEffectCleanupDuringUnmount,
   disableInputAttributeSyncing,
   enableTrustedTypesIntegration,
-  deferPassiveEffectCleanupDuringUnmount,
+  runAllPassiveEffectDestroysBeforeCreates,
   warnAboutShorthandPropertyCollision,
   disableSchedulerTimeoutBasedOnReactExpirationTime,
 } = require('ReactFeatureFlags');

From 14afeb1033e25942e63787750388972916f20a39 Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Tue, 18 Feb 2020 14:49:57 -0800
Subject: [PATCH 11/24] Added missing feature flag

---
 packages/shared/forks/ReactFeatureFlags.testing.www.js | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 1bc7b9f078850..052f4e9d647cd 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -48,6 +48,7 @@ export const disableUnstableRenderSubtreeIntoContainer = __EXPERIMENTAL__;
 export const warnUnstableRenderSubtreeIntoContainer = false;
 export const disableUnstableCreatePortal = __EXPERIMENTAL__;
 export const deferPassiveEffectCleanupDuringUnmount = false;
+export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true;
 
 // Only used in www builds.

From 4d9f8500651c5d1e19d8ec9a2359d5476a53814b Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Tue, 18 Feb 2020 15:55:38 -0800
Subject: [PATCH 12/24] Re-throw errors thrown by the renderer at the root in
 the complete phase (#18029)

* Re-throw errors thrown by the renderer at the root

React treats errors thrown at the root as a fatal because there's no
parent component that can capture it. (This is distinct from an
"uncaught error" that isn't wrapped in an error boundary, because in
that case we can fall back to deleting the whole tree -- not great, but
at least the error is contained to a single root, and React is left in a
consistent state.)

It turns out we didn't have a test case for this path. The only way it
can happen is if the renderer's host config throws. We had similar test
cases for host components, but none for the host root.

This adds a new test case and fixes a bug where React would keep
retrying the root because the `workInProgress` pointer was not advanced
to the next fiber. (Which in this case is `null`, since it's the root.)

We could consider in the future trying to gracefully exit from certain
types of root errors without leaving React in an inconsistent state. For
example, we should be able to gracefully exit from errors thrown in the
begin phase. For now, I'm treating it like an internal invariant and
immediately exiting.

* Add comment
---
 packages/react-noop-renderer/src/createReactNoop.js  |  7 +++++++
 packages/react-reconciler/src/ReactFiberWorkLoop.js  |  7 +++++++
 .../ReactIncrementalErrorHandling-test.internal.js   | 12 ++++++++++++
 3 files changed, 26 insertions(+)

diff --git a/packages/react-noop-renderer/src/createReactNoop.js b/packages/react-noop-renderer/src/createReactNoop.js
index 87f72814ac96a..9987343b90f3b 100644
--- a/packages/react-noop-renderer/src/createReactNoop.js
+++ b/packages/react-noop-renderer/src/createReactNoop.js
@@ -533,6 +533,13 @@ function createReactNoop(reconciler: Function, useMutation: boolean) {
           newChildren: Array<Instance | TextInstance>,
         ): void {
           container.pendingChildren = newChildren;
+          if (
+            newChildren.length === 1 &&
+            newChildren[0].text === 'Error when completing root'
+          ) {
+            // Trigger an error for testing purposes
+            throw Error('Error when completing root');
+          }
         },
 
         replaceContainerChildren(
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 116bb2e99cf60..02d1bec97ff8b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -1285,6 +1285,13 @@ function handleError(root, thrownValue) {
         // boundary.
         workInProgressRootExitStatus = RootFatalErrored;
         workInProgressRootFatalError = thrownValue;
+        // Set `workInProgress` to null. This represents advancing to the next
+        // sibling, or the parent if there are no siblings. But since the root
+        // has no siblings nor a parent, we set it to null. Usually this is
+        // handled by `completeUnitOfWork` or `unwindWork`, but since we're
+        // interntionally not calling those, we need set it here.
+        // TODO: Consider calling `unwindWork` to pop the contexts.
+        workInProgress = null;
         return null;
       }
 
diff --git a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
index bcb74b6ea07f8..6bea104b78db5 100644
--- a/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactIncrementalErrorHandling-test.internal.js
@@ -1658,4 +1658,16 @@ describe('ReactIncrementalErrorHandling', () => {
         'Please update the following components: Provider',
     ]);
   });
+
+  if (global.__PERSISTENT__) {
+    it('regression test: should fatal if error is thrown at the root', () => {
+      const root = ReactNoop.createRoot();
+      root.render('Error when completing root');
+      expect(Scheduler).toFlushAndThrow('Error when completing root');
+
+      const blockingRoot = ReactNoop.createBlockingRoot();
+      blockingRoot.render('Error when completing root');
+      expect(Scheduler).toFlushAndThrow('Error when completing root');
+    });
+  }
 });

From 4912ba31e3dcc8d08f5b16ae38b38d74da85ea21 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 19 Feb 2020 14:36:39 +0000
Subject: [PATCH 13/24] Add modern event system flag + rename legacy plugin
 module (#18073)

---
 .../ReactBrowserEventEmitter-test.internal.js    | 16 ++++++++--------
 .../react-dom/src/client/ReactDOMComponent.js    |  4 ++--
 ...inSystem.js => DOMLegacyEventPluginSystem.js} |  2 +-
 .../src/events/ReactDOMEventListener.js          |  2 +-
 .../src/events/ReactDOMEventReplaying.js         |  2 +-
 .../react-dom/src/events/SelectEventPlugin.js    |  2 +-
 packages/shared/ReactFeatureFlags.js             |  3 +++
 .../shared/forks/ReactFeatureFlags.native-fb.js  |  1 +
 .../shared/forks/ReactFeatureFlags.native-oss.js |  1 +
 .../shared/forks/ReactFeatureFlags.persistent.js |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js     |  1 +
 .../forks/ReactFeatureFlags.test-renderer.www.js |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js    |  1 +
 .../forks/ReactFeatureFlags.testing.www.js       |  1 +
 packages/shared/forks/ReactFeatureFlags.www.js   |  2 ++
 15 files changed, 26 insertions(+), 14 deletions(-)
 rename packages/react-dom/src/events/{DOMEventPluginSystem.js => DOMLegacyEventPluginSystem.js} (99%)

diff --git a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
index 0b377d16eceaf..64099b4b8fed4 100644
--- a/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
+++ b/packages/react-dom/src/__tests__/ReactBrowserEventEmitter-test.internal.js
@@ -14,7 +14,7 @@ let EventPluginRegistry;
 let React;
 let ReactDOM;
 let ReactDOMComponentTree;
-let DOMEventPluginSystem;
+let listenToEvent;
 let ReactDOMEventListener;
 let ReactTestUtils;
 
@@ -54,8 +54,7 @@ function registerSimpleTestHandler() {
 }
 
 // We should probably remove this file at some point, it's just full of
-// internal API usage. ReactBrowserEventEmitter was refactored out in
-// #18056 too. The majority of this code lives in DOMEventPluginSystem.
+// internal API usage.
 describe('ReactBrowserEventEmitter', () => {
   beforeEach(() => {
     jest.resetModules();
@@ -66,7 +65,8 @@ describe('ReactBrowserEventEmitter', () => {
     React = require('react');
     ReactDOM = require('react-dom');
     ReactDOMComponentTree = require('../client/ReactDOMComponentTree');
-    DOMEventPluginSystem = require('../events/DOMEventPluginSystem');
+    listenToEvent = require('../events/DOMLegacyEventPluginSystem')
+      .legacyListenToEvent;
     ReactDOMEventListener = require('../events/ReactDOMEventListener');
     ReactTestUtils = require('react-dom/test-utils');
 
@@ -350,15 +350,15 @@ describe('ReactBrowserEventEmitter', () => {
 
   it('should listen to events only once', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
-    DOMEventPluginSystem.listenToEvent(ON_CLICK_KEY, document);
-    DOMEventPluginSystem.listenToEvent(ON_CLICK_KEY, document);
+    listenToEvent(ON_CLICK_KEY, document);
+    listenToEvent(ON_CLICK_KEY, document);
     expect(EventTarget.prototype.addEventListener).toHaveBeenCalledTimes(1);
   });
 
   it('should work with event plugins without dependencies', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
 
-    DOMEventPluginSystem.listenToEvent(ON_CLICK_KEY, document);
+    listenToEvent(ON_CLICK_KEY, document);
 
     expect(EventTarget.prototype.addEventListener.calls.argsFor(0)[0]).toBe(
       'click',
@@ -368,7 +368,7 @@ describe('ReactBrowserEventEmitter', () => {
   it('should work with event plugins with dependencies', () => {
     spyOnDevAndProd(EventTarget.prototype, 'addEventListener');
 
-    DOMEventPluginSystem.listenToEvent(ON_CHANGE_KEY, document);
+    listenToEvent(ON_CHANGE_KEY, document);
 
     const setEventListeners = [];
     const listenCalls = EventTarget.prototype.addEventListener.calls.allArgs();
diff --git a/packages/react-dom/src/client/ReactDOMComponent.js b/packages/react-dom/src/client/ReactDOMComponent.js
index aa01964f9bf42..854137dec6fa6 100644
--- a/packages/react-dom/src/client/ReactDOMComponent.js
+++ b/packages/react-dom/src/client/ReactDOMComponent.js
@@ -87,7 +87,7 @@ import {
   enableDeprecatedFlareAPI,
   enableTrustedTypesIntegration,
 } from 'shared/ReactFeatureFlags';
-import {listenToEvent} from '../events/DOMEventPluginSystem';
+import {legacyListenToEvent} from '../events/DOMLegacyEventPluginSystem';
 
 let didWarnInvalidHydration = false;
 let didWarnShadyDOM = false;
@@ -272,7 +272,7 @@ function ensureListeningTo(
   const doc = isDocumentOrFragment
     ? rootContainerElement
     : rootContainerElement.ownerDocument;
-  listenToEvent(registrationName, doc);
+  legacyListenToEvent(registrationName, doc);
 }
 
 function getOwnerDocumentFromRootContainer(
diff --git a/packages/react-dom/src/events/DOMEventPluginSystem.js b/packages/react-dom/src/events/DOMLegacyEventPluginSystem.js
similarity index 99%
rename from packages/react-dom/src/events/DOMEventPluginSystem.js
rename to packages/react-dom/src/events/DOMLegacyEventPluginSystem.js
index ad8b38f794ff6..064dd2ee1f532 100644
--- a/packages/react-dom/src/events/DOMEventPluginSystem.js
+++ b/packages/react-dom/src/events/DOMLegacyEventPluginSystem.js
@@ -307,7 +307,7 @@ export function dispatchEventForPluginEventSystem(
  * @param {string} registrationName Name of listener (e.g. `onClick`).
  * @param {object} mountAt Container where to mount the listener
  */
-export function listenToEvent(
+export function legacyListenToEvent(
   registrationName: string,
   mountAt: Document | Element | Node,
 ): void {
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index e119fafa48eec..dfeb91508a369 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -60,7 +60,7 @@ import {
   DiscreteEvent,
 } from 'shared/ReactTypes';
 import {getEventPriorityForPluginSystem} from './DOMEventProperties';
-import {dispatchEventForPluginEventSystem} from './DOMEventPluginSystem';
+import {dispatchEventForPluginEventSystem} from './DOMLegacyEventPluginSystem';
 
 const {
   unstable_UserBlockingPriority: UserBlockingPriority,
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 36a78b5d0fcf7..90a671666e055 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -117,7 +117,7 @@ import {
   TOP_BLUR,
 } from './DOMTopLevelEventTypes';
 import {IS_REPLAYED} from 'legacy-events/EventSystemFlags';
-import {listenToTopLevelEvent} from './DOMEventPluginSystem';
+import {listenToTopLevelEvent} from './DOMLegacyEventPluginSystem';
 
 type QueuedReplayableEvent = {|
   blockedOn: null | Container | SuspenseInstance,
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index 2c3da14bbe18a..d1ab609abde6f 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -26,7 +26,7 @@ import getActiveElement from '../client/getActiveElement';
 import {getNodeFromInstance} from '../client/ReactDOMComponentTree';
 import {hasSelectionCapabilities} from '../client/ReactInputSelection';
 import {DOCUMENT_NODE} from '../shared/HTMLNodeType';
-import {isListeningToAllDependencies} from './DOMEventPluginSystem';
+import {isListeningToAllDependencies} from './DOMLegacyEventPluginSystem';
 
 const skipSelectionChangeEvent =
   canUseDOM && 'documentMode' in document && document.documentMode <= 11;
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index e69fee083ab55..abe712ed685e4 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -139,3 +139,6 @@ export const warnUnstableRenderSubtreeIntoContainer = false;
 
 // Disables ReactDOM.unstable_createPortal
 export const disableUnstableCreatePortal = false;
+
+// Modern event system where events get registered at roots
+export const enableModernEventSystem = false;
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index e0d5f0d111a95..ccbc3bc85f7fc 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -55,6 +55,7 @@ export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
+export const enableModernEventSystem = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index a323c6b5ce27c..c1f2ad0d43dac 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -50,6 +50,7 @@ export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
+export const enableModernEventSystem = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js
index c1360b4164c89..3cd7a4c13b757 100644
--- a/packages/shared/forks/ReactFeatureFlags.persistent.js
+++ b/packages/shared/forks/ReactFeatureFlags.persistent.js
@@ -50,6 +50,7 @@ export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
+export const enableModernEventSystem = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index b377ec18daf54..00176945bc98a 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -50,6 +50,7 @@ export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true; // this should probably *never* change
+export const enableModernEventSystem = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 289aa51578689..08b934bd589a2 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -50,6 +50,7 @@ export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true; // this should probably *never* change
+export const enableModernEventSystem = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index d3ffdb18c4c22..4cf22fa4c42de 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -50,6 +50,7 @@ export const disableUnstableCreatePortal = false;
 export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true;
+export const enableModernEventSystem = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index 052f4e9d647cd..db02d804dadc1 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -50,6 +50,7 @@ export const disableUnstableCreatePortal = __EXPERIMENTAL__;
 export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true;
+export const enableModernEventSystem = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index c098e56b4166f..ca181c34c0175 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -112,6 +112,8 @@ export const disableUnstableCreatePortal = __EXPERIMENTAL__;
 
 export const isTestEnvironment = false;
 
+export const enableModernEventSystem = false;
+
 // Flow magic to verify the exports of this file match the original version.
 // eslint-disable-next-line no-unused-vars
 type Check<_X, Y: _X, X: Y = _X> = null;

From a8643e905e39f041cda80b498dc06018b27f6554 Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@gmail.com>
Date: Wed, 19 Feb 2020 17:14:53 +0000
Subject: [PATCH 14/24] add no-restricted-globals to eslint config (#18076)

Our current lint config assumes a browser environment, which means it won't warn you if you use a variable like `name` without declaring it earlier. This imports the same list as the one used by create-react-app, and enables it against our codebase.
---
 .eslintrc.js | 3 +++
 package.json | 1 +
 yarn.lock    | 5 +++++
 3 files changed, 9 insertions(+)

diff --git a/.eslintrc.js b/.eslintrc.js
index 74b87ab13a679..b10d30525c198 100644
--- a/.eslintrc.js
+++ b/.eslintrc.js
@@ -5,6 +5,8 @@ const {
   esNextPaths,
 } = require('./scripts/shared/pathsByLanguageVersion');
 
+const restrictedGlobals = require('confusing-browser-globals');
+
 const OFF = 0;
 const ERROR = 2;
 
@@ -45,6 +47,7 @@ module.exports = {
     'no-bitwise': OFF,
     'no-inner-declarations': [ERROR, 'functions'],
     'no-multi-spaces': ERROR,
+    'no-restricted-globals': [ERROR].concat(restrictedGlobals),
     'no-restricted-syntax': [ERROR, 'WithStatement'],
     'no-shadow': ERROR,
     'no-unused-expressions': ERROR,
diff --git a/package.json b/package.json
index 89d8426a8ef1f..07ebb1cc5411e 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "chalk": "^3.0.0",
     "cli-table": "^0.3.1",
     "coffee-script": "^1.12.7",
+    "confusing-browser-globals": "^1.0.9",
     "core-js": "^3.6.4",
     "coveralls": "^3.0.9",
     "create-react-class": "^15.6.3",
diff --git a/yarn.lock b/yarn.lock
index 1456c34cc4e42..f9466e1a369f5 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3871,6 +3871,11 @@ configstore@^4.0.0:
     write-file-atomic "^2.0.0"
     xdg-basedir "^3.0.0"
 
+confusing-browser-globals@^1.0.9:
+  version "1.0.9"
+  resolved "https://registry.yarnpkg.com/confusing-browser-globals/-/confusing-browser-globals-1.0.9.tgz#72bc13b483c0276801681871d4898516f8f54fdd"
+  integrity sha512-KbS1Y0jMtyPgIxjO7ZzMAuUpAKMt1SzCL9fsrKsX6b0zJPTaT0SiSPmewwVZg9UAO83HVIlEhZF84LIjZ0lmAw==
+
 connect-history-api-fallback@^1.6.0:
   version "1.6.0"
   resolved "https://registry.yarnpkg.com/connect-history-api-fallback/-/connect-history-api-fallback-1.6.0.tgz#8b32089359308d111115d81cad3fceab888f97bc"

From 2512c309e34f0207d29c19392d144edab719f347 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 19 Feb 2020 17:25:41 +0000
Subject: [PATCH 15/24] Remove Flare bundles from build (#18077)

---
 scripts/rollup/bundles.js | 49 ---------------------------------------
 1 file changed, 49 deletions(-)

diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index fd262e49f401d..bcec44c02ceee 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -633,21 +633,6 @@ const bundles = [
     externals: ['react'],
   },
 
-  {
-    bundleTypes: [
-      UMD_DEV,
-      UMD_PROD,
-      NODE_DEV,
-      NODE_PROD,
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-    ],
-    moduleType: NON_FIBER_RENDERER,
-    entry: 'react-interactions/events/input',
-    global: 'ReactEventsInput',
-    externals: ['react'],
-  },
-
   {
     bundleTypes: [
       UMD_DEV,
@@ -663,25 +648,6 @@ const bundles = [
     externals: ['react'],
   },
 
-  {
-    bundleTypes: [
-      UMD_DEV,
-      UMD_PROD,
-      NODE_DEV,
-      NODE_PROD,
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-    ],
-    moduleType: NON_FIBER_RENDERER,
-    entry: 'react-interactions/events/press',
-    global: 'ReactEventsPress',
-    externals: [
-      'react',
-      'react-interactions/events/tap',
-      'react-interactions/events/keyboard',
-    ],
-  },
-
   {
     bundleTypes: [
       UMD_DEV,
@@ -696,21 +662,6 @@ const bundles = [
     global: 'ReactEventsPressLegacy',
     externals: ['react'],
   },
-
-  {
-    bundleTypes: [
-      UMD_DEV,
-      UMD_PROD,
-      NODE_DEV,
-      NODE_PROD,
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-    ],
-    moduleType: NON_FIBER_RENDERER,
-    entry: 'react-interactions/events/tap',
-    global: 'ReactEventsTap',
-    externals: ['react'],
-  },
 ];
 
 const fbBundleExternalsMap = {

From 44e5f5e6451cf192af5dee3aa1f3a87119fc231e Mon Sep 17 00:00:00 2001
From: Moji Izadmehr <m.eezadmehr@gmail.com>
Date: Wed, 19 Feb 2020 18:44:31 +0100
Subject: [PATCH 16/24] Add fiber summary tooltip to devtools profiling
 (#18048)

* Add tooltip component

* Separate logic of ProfilerWhatChanged to a component

* Add hovered Fiber info tooltip component

* Add flame graph chart tooltip

* Add commit ranked list tooltip

* Fix flow issues

* Minor improvement in filter

* Fix flickering issue

* Resolved issues on useCallbacks and mouse event listeners

* Fix lints

* Remove unnecessary useCallback
---
 .../views/Components/ProfilerWhatChanged.css  |  30 ++++
 .../views/Components/ProfilerWhatChanged.js   | 138 ++++++++++++++++++
 .../src/devtools/views/Components/Tooltip.css |  24 +++
 .../src/devtools/views/Components/Tooltip.js  | 106 ++++++++++++++
 .../src/devtools/views/Profiler/ChartNode.js  |   7 +-
 .../views/Profiler/CommitFlamegraph.js        |  52 +++++--
 .../Profiler/CommitFlamegraphListItem.js      |  14 ++
 .../devtools/views/Profiler/CommitRanked.js   |  38 +++--
 .../views/Profiler/CommitRankedListItem.js    |  23 ++-
 .../views/Profiler/HoveredFiberInfo.css       |  38 +++++
 .../views/Profiler/HoveredFiberInfo.js        |  77 ++++++++++
 .../Profiler/SidebarSelectedFiberInfo.css     |  21 +--
 .../Profiler/SidebarSelectedFiberInfo.js      | 135 +----------------
 13 files changed, 527 insertions(+), 176 deletions(-)
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/Tooltip.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
 create mode 100644 packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js

diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css b/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css
new file mode 100644
index 0000000000000..1e0dd8e597015
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css
@@ -0,0 +1,30 @@
+.Component {
+  margin-bottom: 1rem;
+}
+
+.Item {
+  margin-top: 0.25rem;
+}
+
+.Key {
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-small);
+  line-height: 1;
+}
+
+.Key:first-of-type::before {
+  content: ' (';
+}
+
+.Key::after {
+  content: ', ';
+}
+
+.Key:last-of-type::after {
+  content: ')';
+}
+
+.Label {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js
new file mode 100644
index 0000000000000..75846da1d11e6
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js
@@ -0,0 +1,138 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {useContext} from 'react';
+import {ProfilerContext} from '../Profiler/ProfilerContext';
+import {StoreContext} from '../context';
+
+import styles from './ProfilerWhatChanged.css';
+
+type ProfilerWhatChangedProps = {|
+  fiberID: number,
+|};
+
+export default function ProfilerWhatChanged({
+  fiberID,
+}: ProfilerWhatChangedProps) {
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
+
+  // TRICKY
+  // Handle edge case where no commit is selected because of a min-duration filter update.
+  // If the commit index is null, suspending for data below would throw an error.
+  // TODO (ProfilerContext) This check should not be necessary.
+  if (selectedCommitIndex === null) {
+    return null;
+  }
+
+  const {changeDescriptions} = profilerStore.getCommitData(
+    ((rootID: any): number),
+    selectedCommitIndex,
+  );
+
+  if (changeDescriptions === null) {
+    return null;
+  }
+
+  const changeDescription = changeDescriptions.get(fiberID);
+  if (changeDescription == null) {
+    return null;
+  }
+
+  if (changeDescription.isFirstMount) {
+    return (
+      <div className={styles.Component}>
+        <label className={styles.Label}>Why did this render?</label>
+        <div className={styles.Item}>
+          This is the first time the component rendered.
+        </div>
+      </div>
+    );
+  }
+
+  const changes = [];
+
+  if (changeDescription.context === true) {
+    changes.push(
+      <div key="context" className={styles.Item}>
+        • Context changed
+      </div>,
+    );
+  } else if (
+    typeof changeDescription.context === 'object' &&
+    changeDescription.context !== null &&
+    changeDescription.context.length !== 0
+  ) {
+    changes.push(
+      <div key="context" className={styles.Item}>
+        • Context changed:
+        {changeDescription.context.map(key => (
+          <span key={key} className={styles.Key}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (changeDescription.didHooksChange) {
+    changes.push(
+      <div key="hooks" className={styles.Item}>
+        • Hooks changed
+      </div>,
+    );
+  }
+
+  if (
+    changeDescription.props !== null &&
+    changeDescription.props.length !== 0
+  ) {
+    changes.push(
+      <div key="props" className={styles.Item}>
+        • Props changed:
+        {changeDescription.props.map(key => (
+          <span key={key} className={styles.Key}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (
+    changeDescription.state !== null &&
+    changeDescription.state.length !== 0
+  ) {
+    changes.push(
+      <div key="state" className={styles.Item}>
+        • State changed:
+        {changeDescription.state.map(key => (
+          <span key={key} className={styles.Key}>
+            {key}
+          </span>
+        ))}
+      </div>,
+    );
+  }
+
+  if (changes.length === 0) {
+    changes.push(
+      <div key="nothing" className={styles.Item}>
+        The parent component rendered.
+      </div>,
+    );
+  }
+
+  return (
+    <div className={styles.Component}>
+      <label className={styles.Label}>Why did this render?</label>
+      {changes}
+    </div>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.css
new file mode 100644
index 0000000000000..2d2bbaf34ea38
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.css
@@ -0,0 +1,24 @@
+.Tooltip {
+  position: absolute;
+  pointer-events: none;
+  border: none;
+  border-radius: 0.25rem;
+  padding: 0.25rem 0.5rem;
+  font-family: var(--font-family-sans);
+  font-size: 12px;
+  background-color: var(--color-tooltip-background);
+  color: var(--color-tooltip-text);
+  opacity: 1;
+  /* Make sure this is above the DevTools, which are above the Overlay */
+  z-index: 10000002;
+}
+
+.Tooltip.hidden {
+  opacity: 0;
+}
+
+
+.Container {
+  width: -moz-max-content;
+  width: -webkit-max-content;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js
new file mode 100644
index 0000000000000..5be379ee668da
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js
@@ -0,0 +1,106 @@
+/** @flow */
+
+import React, {useRef} from 'react';
+
+import styles from './Tooltip.css';
+
+const initialTooltipState = {height: 0, mouseX: 0, mouseY: 0, width: 0};
+
+export default function Tooltip({children, label}: any) {
+  const containerRef = useRef(null);
+  const tooltipRef = useRef(null);
+
+  // update the position of the tooltip based on current mouse position
+  const updateTooltipPosition = (event: SyntheticMouseEvent<*>) => {
+    const element = tooltipRef.current;
+    if (element != null) {
+      // first find the mouse position
+      const mousePosition = getMousePosition(containerRef.current, event);
+      // use the mouse position to find the position of tooltip
+      const {left, top} = getTooltipPosition(element, mousePosition);
+      // update tooltip position
+      element.style.left = left;
+      element.style.top = top;
+    }
+  };
+
+  const onMouseMove = (event: SyntheticMouseEvent<*>) => {
+    updateTooltipPosition(event);
+  };
+
+  const tooltipClassName = label === null ? styles.hidden : '';
+
+  return (
+    <div
+      className={styles.Container}
+      onMouseMove={onMouseMove}
+      ref={containerRef}>
+      <div ref={tooltipRef} className={`${styles.Tooltip} ${tooltipClassName}`}>
+        {label}
+      </div>
+      {children}
+    </div>
+  );
+}
+
+// Method used to find the position of the tooltip based on current mouse position
+function getTooltipPosition(element, mousePosition) {
+  const {height, mouseX, mouseY, width} = mousePosition;
+  const TOOLTIP_OFFSET_X = 5;
+  const TOOLTIP_OFFSET_Y = 15;
+  let top = 0;
+  let left = 0;
+
+  // Let's check the vertical position.
+  if (mouseY + TOOLTIP_OFFSET_Y + element.offsetHeight >= height) {
+    // The tooltip doesn't fit below the mouse cursor (which is our
+    // default strategy). Therefore we try to position it either above the
+    // mouse cursor or finally aligned with the window's top edge.
+    if (mouseY - TOOLTIP_OFFSET_Y - element.offsetHeight > 0) {
+      // We position the tooltip above the mouse cursor if it fits there.
+      top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET_Y}px`;
+    } else {
+      // Otherwise we align the tooltip with the window's top edge.
+      top = '0px';
+    }
+  } else {
+    top = `${mouseY + TOOLTIP_OFFSET_Y}px`;
+  }
+
+  // Now let's check the horizontal position.
+  if (mouseX + TOOLTIP_OFFSET_X + element.offsetWidth >= width) {
+    // The tooltip doesn't fit at the right of the mouse cursor (which is
+    // our default strategy). Therefore we try to position it either at the
+    // left of the mouse cursor or finally aligned with the window's left
+    // edge.
+    if (mouseX - TOOLTIP_OFFSET_X - element.offsetWidth > 0) {
+      // We position the tooltip at the left of the mouse cursor if it fits
+      // there.
+      left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET_X}px`;
+    } else {
+      // Otherwise, align the tooltip with the window's left edge.
+      left = '0px';
+    }
+  } else {
+    left = `${mouseX + TOOLTIP_OFFSET_X * 2}px`;
+  }
+
+  return {left, top};
+}
+
+// method used to find the current mouse position inside the container
+function getMousePosition(
+  relativeContainer,
+  mouseEvent: SyntheticMouseEvent<*>,
+) {
+  if (relativeContainer !== null) {
+    const {height, top, width} = relativeContainer.getBoundingClientRect();
+
+    const mouseX = mouseEvent.clientX;
+    const mouseY = mouseEvent.clientY - top;
+
+    return {height, mouseX, mouseY, width};
+  } else {
+    return initialTooltipState;
+  }
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
index 4a85d18fe8478..3f7c7b4a1f732 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/ChartNode.js
@@ -18,6 +18,8 @@ type Props = {|
   label: string,
   onClick: (event: SyntheticMouseEvent<*>) => mixed,
   onDoubleClick?: (event: SyntheticMouseEvent<*>) => mixed,
+  onMouseEnter: (event: SyntheticMouseEvent<*>) => mixed,
+  onMouseLeave: (event: SyntheticMouseEvent<*>) => mixed,
   placeLabelAboveNode?: boolean,
   textStyle?: Object,
   width: number,
@@ -33,6 +35,8 @@ export default function ChartNode({
   isDimmed = false,
   label,
   onClick,
+  onMouseEnter,
+  onMouseLeave,
   onDoubleClick,
   textStyle,
   width,
@@ -41,12 +45,13 @@ export default function ChartNode({
 }: Props) {
   return (
     <g className={styles.Group} transform={`translate(${x},${y})`}>
-      <title>{label}</title>
       <rect
         width={width}
         height={height}
         fill={color}
         onClick={onClick}
+        onMouseEnter={onMouseEnter}
+        onMouseLeave={onMouseLeave}
         onDoubleClick={onDoubleClick}
         className={styles.Rect}
         style={{
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
index f58d18d5c5c8f..e4daf92bf7662 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -7,23 +7,33 @@
  * @flow
  */
 
-import React, {forwardRef, useCallback, useContext, useMemo} from 'react';
+import React, {
+  forwardRef,
+  useCallback,
+  useContext,
+  useMemo,
+  useState,
+} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {FixedSizeList} from 'react-window';
 import {ProfilerContext} from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitFlamegraphListItem from './CommitFlamegraphListItem';
+import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
+import Tooltip from '../Components/Tooltip';
 
 import styles from './CommitFlamegraph.css';
 
+import type {TooltipFiberData} from './HoveredFiberInfo';
 import type {ChartData, ChartNode} from './FlamegraphChartBuilder';
 import type {CommitTree} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
+  hoverFiber: (fiberData: TooltipFiberData | null) => void,
   scaleX: (value: number, fallbackValue: number) => number,
   selectedChartNode: ChartNode | null,
   selectedChartNodeIndex: number,
@@ -91,6 +101,7 @@ type Props = {|
 |};
 
 function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
+  const [hoveredFiberData, hoverFiber] = useState<number | null>(null);
   const {lineHeight} = useContext(SettingsContext);
   const {selectFiber, selectedFiberID} = useContext(ProfilerContext);
 
@@ -118,6 +129,7 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
   const itemData = useMemo<ItemData>(
     () => ({
       chartData,
+      hoverFiber,
       scaleX: scale(
         0,
         selectedChartNode !== null
@@ -131,19 +143,37 @@ function CommitFlamegraph({chartData, commitTree, height, width}: Props) {
       selectFiber,
       width,
     }),
-    [chartData, selectedChartNode, selectedChartNodeIndex, selectFiber, width],
+    [
+      chartData,
+      hoverFiber,
+      selectedChartNode,
+      selectedChartNodeIndex,
+      selectFiber,
+      width,
+    ],
+  );
+
+  // Tooltip used to show summary of fiber info on hover
+  const tooltipLabel = useMemo(
+    () =>
+      hoveredFiberData !== null ? (
+        <HoveredFiberInfo fiberData={hoveredFiberData} />
+      ) : null,
+    [hoveredFiberData],
   );
 
   return (
-    <FixedSizeList
-      height={height}
-      innerElementType={InnerElementType}
-      itemCount={chartData.depth}
-      itemData={itemData}
-      itemSize={lineHeight}
-      width={width}>
-      {CommitFlamegraphListItem}
-    </FixedSizeList>
+    <Tooltip label={tooltipLabel}>
+      <FixedSizeList
+        height={height}
+        innerElementType={InnerElementType}
+        itemCount={chartData.depth}
+        itemData={itemData}
+        itemSize={lineHeight}
+        width={width}>
+        {CommitFlamegraphListItem}
+      </FixedSizeList>
+    </Tooltip>
   );
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
index 66d2db36962c4..bf511d879326e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraphListItem.js
@@ -14,6 +14,7 @@ import {getGradientColor} from './utils';
 import ChartNode from './ChartNode';
 import {SettingsContext} from '../Settings/SettingsContext';
 
+import type {ChartNode as ChartNodeType} from './FlamegraphChartBuilder';
 import type {ItemData} from './CommitFlamegraph';
 
 type Props = {
@@ -26,6 +27,7 @@ type Props = {
 function CommitFlamegraphListItem({data, index, style}: Props) {
   const {
     chartData,
+    hoverFiber,
     scaleX,
     selectedChartNode,
     selectedChartNodeIndex,
@@ -35,6 +37,7 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
   const {renderPathNodes, maxSelfDuration, rows} = chartData;
 
   const {lineHeight} = useContext(SettingsContext);
+
   const handleClick = useCallback(
     (event: SyntheticMouseEvent<*>, id: number, name: string) => {
       event.stopPropagation();
@@ -43,6 +46,15 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
     [selectFiber],
   );
 
+  const handleMouseEnter = (nodeData: ChartNodeType) => {
+    const {id, name} = nodeData;
+    hoverFiber({id, name});
+  };
+
+  const handleMouseLeave = () => {
+    hoverFiber(null);
+  };
+
   // List items are absolutely positioned using the CSS "top" attribute.
   // The "left" value will always be 0.
   // Since height is fixed, and width is based on the node's duration,
@@ -104,6 +116,8 @@ function CommitFlamegraphListItem({data, index, style}: Props) {
             key={id}
             label={label}
             onClick={event => handleClick(event, id, name)}
+            onMouseEnter={() => handleMouseEnter(chartNode)}
+            onMouseLeave={handleMouseLeave}
             textStyle={{color: textColor}}
             width={nodeWidth}
             x={nodeOffset - selectedNodeOffset}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
index f230f67359920..89bd0d8e82198 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -7,23 +7,27 @@
  * @flow
  */
 
-import React, {useCallback, useContext, useMemo} from 'react';
+import React, {useCallback, useContext, useMemo, useState} from 'react';
 import AutoSizer from 'react-virtualized-auto-sizer';
 import {FixedSizeList} from 'react-window';
 import {ProfilerContext} from './ProfilerContext';
 import NoCommitData from './NoCommitData';
 import CommitRankedListItem from './CommitRankedListItem';
+import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
+import Tooltip from '../Components/Tooltip';
 
 import styles from './CommitRanked.css';
 
+import type {TooltipFiberData} from './HoveredFiberInfo';
 import type {ChartData} from './RankedChartBuilder';
 import type {CommitTree} from './types';
 
 export type ItemData = {|
   chartData: ChartData,
+  hoverFiber: (fiberData: TooltipFiberData | null) => void,
   scaleX: (value: number, fallbackValue: number) => number,
   selectedFiberID: number | null,
   selectedFiberIndex: number,
@@ -89,6 +93,7 @@ type Props = {|
 |};
 
 function CommitRanked({chartData, commitTree, height, width}: Props) {
+  const [hoveredFiberData, hoverFiber] = useState<number | null>(null);
   const {lineHeight} = useContext(SettingsContext);
   const {selectedFiberID, selectFiber} = useContext(ProfilerContext);
 
@@ -100,6 +105,7 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
   const itemData = useMemo<ItemData>(
     () => ({
       chartData,
+      hoverFiber,
       scaleX: scale(0, chartData.nodes[selectedFiberIndex].value, 0, width),
       selectedFiberID,
       selectedFiberIndex,
@@ -109,16 +115,28 @@ function CommitRanked({chartData, commitTree, height, width}: Props) {
     [chartData, selectedFiberID, selectedFiberIndex, selectFiber, width],
   );
 
+  // Tooltip used to show summary of fiber info on hover
+  const tooltipLabel = useMemo(
+    () =>
+      hoveredFiberData !== null ? (
+        <HoveredFiberInfo fiberData={hoveredFiberData} />
+      ) : null,
+    [hoveredFiberData],
+  );
+
   return (
-    <FixedSizeList
-      height={height}
-      innerElementType="svg"
-      itemCount={chartData.nodes.length}
-      itemData={itemData}
-      itemSize={lineHeight}
-      width={width}>
-      {CommitRankedListItem}
-    </FixedSizeList>
+    <Tooltip label={tooltipLabel}>
+      <FixedSizeList
+        height={height}
+        innerElementType="svg"
+        itemCount={chartData.nodes.length}
+        itemData={itemData}
+        itemSize={lineHeight}
+        width={width}>
+        {CommitRankedListItem}
+      </FixedSizeList>
+      >
+    </Tooltip>
   );
 }
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
index 8c46e7de2730b..80f6dbade6e29 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRankedListItem.js
@@ -24,7 +24,14 @@ type Props = {
 };
 
 function CommitRankedListItem({data, index, style}: Props) {
-  const {chartData, scaleX, selectedFiberIndex, selectFiber, width} = data;
+  const {
+    chartData,
+    hoverFiber,
+    scaleX,
+    selectedFiberIndex,
+    selectFiber,
+    width,
+  } = data;
 
   const node = chartData.nodes[index];
 
@@ -33,11 +40,21 @@ function CommitRankedListItem({data, index, style}: Props) {
   const handleClick = useCallback(
     event => {
       event.stopPropagation();
-      selectFiber(node.id, node.name);
+      const {id, name} = node;
+      selectFiber(id, name);
     },
     [node, selectFiber],
   );
 
+  const handleMouseEnter = () => {
+    const {id, name} = node;
+    hoverFiber({id, name});
+  };
+
+  const handleMouseLeave = () => {
+    hoverFiber(null);
+  };
+
   // List items are absolutely positioned using the CSS "top" attribute.
   // The "left" value will always be 0.
   // Since height is fixed, and width is based on the node's duration,
@@ -52,6 +69,8 @@ function CommitRankedListItem({data, index, style}: Props) {
       key={node.id}
       label={node.label}
       onClick={handleClick}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleMouseLeave}
       width={Math.max(minBarWidth, scaleX(node.value, width))}
       x={0}
       y={top}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
new file mode 100644
index 0000000000000..14afb8d719e05
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
@@ -0,0 +1,38 @@
+.Toolbar {
+  height: 2.25rem;
+  padding: 0 0.5rem;
+  flex: 0 0 auto;
+  display: flex;
+  align-items: center;
+  border-bottom: 1px solid var(--color-border);
+}
+
+.Content {
+  padding: 0.5rem;
+  user-select: none;
+  overflow-y: auto;
+}
+
+.Component {
+  flex: 1;
+  font-weight: bold;
+  font-family: var(--font-family-monospace);
+  font-size: var(--font-size-monospace-normal);
+  white-space: nowrap;
+  overflow-x: hidden;
+  text-overflow: ellipsis;
+}
+
+.Label {
+  font-weight: bold;
+  margin-bottom: 0.5rem;
+}
+
+.CurrentCommit {
+  display: block;
+  width: 100%;
+  text-align: left;
+  background: none;
+  border: none;
+  padding: 0.25rem 0.5rem;
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
new file mode 100644
index 0000000000000..d6b102cd5f2de
--- /dev/null
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -0,0 +1,77 @@
+/**
+ * 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.
+ *
+ * @flow
+ */
+
+import React, {Fragment, useContext} from 'react';
+import {ProfilerContext} from './ProfilerContext';
+import {formatDuration, formatTime} from './utils';
+import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
+import {StoreContext} from '../context';
+
+import styles from './HoveredFiberInfo.css';
+
+import type {ChartNode} from './FlamegraphChartBuilder';
+
+export type TooltipFiberData = {|
+  id: number,
+  name: string,
+|};
+
+export type Props = {
+  fiberData: ChartNode,
+};
+
+export default function HoveredFiberInfo({fiberData}: Props) {
+  const {profilerStore} = useContext(StoreContext);
+  const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
+
+  const {id, name} = fiberData;
+  const {profilingCache} = profilerStore;
+
+  const commitIndices = profilingCache.getFiberCommits({
+    fiberID: ((id: any): number),
+    rootID: ((rootID: any): number),
+  });
+
+  let renderDurationInfo;
+  let i = 0;
+  for (i = 0; i < commitIndices.length; i++) {
+    const commitIndex = commitIndices[i];
+    if (selectedCommitIndex === commitIndex) {
+      const {duration, timestamp} = profilerStore.getCommitData(
+        ((rootID: any): number),
+        commitIndex,
+      );
+
+      renderDurationInfo = (
+        <Fragment>
+          <label className={styles.Label}>Rendered at:</label>
+          <div key={commitIndex} className={styles.CurrentCommit}>
+            {formatTime(timestamp)}s for {formatDuration(duration)}ms
+          </div>
+        </Fragment>
+      );
+
+      break;
+    }
+  }
+
+  return (
+    <Fragment>
+      <div className={styles.Toolbar}>
+        <div className={styles.Component}>{name}</div>
+      </div>
+      <div className={styles.Content}>
+        <ProfilerWhatChanged fiberID={((id: any): number)} />
+        {renderDurationInfo || (
+          <div>Did not render during this profiling session.</div>
+        )}
+      </div>
+    </Fragment>
+  );
+}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
index 2ea9526d9653a..de19c10391653 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.css
@@ -42,6 +42,7 @@
   padding: 0.25rem 0.5rem;
   color: var(--color-text);
 }
+
 .Commit:focus,
 .Commit:hover {
   outline: none;
@@ -52,25 +53,7 @@
   background-color: var(--color-background-selected);
   color: var(--color-text-selected);
 }
+
 .CurrentCommit:focus {
   outline: none;
 }
-
-.WhatChangedItem {
-  margin-top: 0.25rem;
-}
-
-.WhatChangedKey {
-  font-family: var(--font-family-monospace);
-  font-size: var(--font-size-monospace-small);
-  line-height: 1;
-}
-.WhatChangedKey:first-of-type::before {
-  content: ' (';
-}
-.WhatChangedKey::after {
-  content: ', ';
-}
-.WhatChangedKey:last-of-type::after {
-  content: ')';
-}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 595d0e0e17439..0cef165762a1e 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -8,7 +8,7 @@
  */
 
 import React, {Fragment, useContext} from 'react';
-import ProfilerStore from 'react-devtools-shared/src/devtools/ProfilerStore';
+import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
 import {ProfilerContext} from './ProfilerContext';
 import {formatDuration, formatTime} from './utils';
 import {StoreContext} from '../context';
@@ -75,12 +75,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         </Button>
       </div>
       <div className={styles.Content}>
-        <WhatChanged
-          commitIndex={((selectedCommitIndex: any): number)}
-          fiberID={((selectedFiberID: any): number)}
-          profilerStore={profilerStore}
-          rootID={((rootID: any): number)}
-        />
+        <ProfilerWhatChanged fiberID={((selectedFiberID: any): number)} />
         {listItems.length > 0 && (
           <Fragment>
             <label className={styles.Label}>Rendered at</label>: {listItems}
@@ -93,129 +88,3 @@ export default function SidebarSelectedFiberInfo(_: Props) {
     </Fragment>
   );
 }
-
-type WhatChangedProps = {|
-  commitIndex: number | null,
-  fiberID: number,
-  profilerStore: ProfilerStore,
-  rootID: number,
-|};
-
-function WhatChanged({
-  commitIndex,
-  fiberID,
-  profilerStore,
-  rootID,
-}: WhatChangedProps) {
-  // TRICKY
-  // Handle edge case where no commit is selected because of a min-duration filter update.
-  // If the commit index is null, suspending for data below would throw an error.
-  // TODO (ProfilerContext) This check should not be necessary.
-  if (commitIndex === null) {
-    return null;
-  }
-
-  const {changeDescriptions} = profilerStore.getCommitData(
-    ((rootID: any): number),
-    commitIndex,
-  );
-  if (changeDescriptions === null) {
-    return null;
-  }
-
-  const changeDescription = changeDescriptions.get(fiberID);
-  if (changeDescription == null) {
-    return null;
-  }
-
-  if (changeDescription.isFirstMount) {
-    return (
-      <div className={styles.WhatChanged}>
-        <label className={styles.Label}>Why did this render?</label>
-        <div className={styles.WhatChangedItem}>
-          This is the first time the component rendered.
-        </div>
-      </div>
-    );
-  }
-
-  const changes = [];
-
-  if (changeDescription.context === true) {
-    changes.push(
-      <div key="context" className={styles.WhatChangedItem}>
-        • Context changed
-      </div>,
-    );
-  } else if (
-    typeof changeDescription.context === 'object' &&
-    changeDescription.context !== null &&
-    changeDescription.context.length !== 0
-  ) {
-    changes.push(
-      <div key="context" className={styles.WhatChangedItem}>
-        • Context changed:
-        {changeDescription.context.map(key => (
-          <span key={key} className={styles.WhatChangedKey}>
-            {key}
-          </span>
-        ))}
-      </div>,
-    );
-  }
-
-  if (changeDescription.didHooksChange) {
-    changes.push(
-      <div key="hooks" className={styles.WhatChangedItem}>
-        • Hooks changed
-      </div>,
-    );
-  }
-
-  if (
-    changeDescription.props !== null &&
-    changeDescription.props.length !== 0
-  ) {
-    changes.push(
-      <div key="props" className={styles.WhatChangedItem}>
-        • Props changed:
-        {changeDescription.props.map(key => (
-          <span key={key} className={styles.WhatChangedKey}>
-            {key}
-          </span>
-        ))}
-      </div>,
-    );
-  }
-
-  if (
-    changeDescription.state !== null &&
-    changeDescription.state.length !== 0
-  ) {
-    changes.push(
-      <div key="state" className={styles.WhatChangedItem}>
-        • State changed:
-        {changeDescription.state.map(key => (
-          <span key={key} className={styles.WhatChangedKey}>
-            {key}
-          </span>
-        ))}
-      </div>,
-    );
-  }
-
-  if (changes.length === 0) {
-    changes.push(
-      <div key="nothing" className={styles.WhatChangedItem}>
-        The parent component rendered.
-      </div>,
-    );
-  }
-
-  return (
-    <div className={styles.WhatChanged}>
-      <label className={styles.Label}>Why did this render?</label>
-      {changes}
-    </div>
-  );
-}

From a12dd52a4a5f19d990694810db86cc30e98308ae Mon Sep 17 00:00:00 2001
From: Dan Abramov <dan.abramov@gmail.com>
Date: Wed, 19 Feb 2020 17:59:42 +0000
Subject: [PATCH 17/24] Don't build some packages for WWW (#18078)

---
 scripts/rollup/bundles.js | 24 +++++-------------------
 1 file changed, 5 insertions(+), 19 deletions(-)

diff --git a/scripts/rollup/bundles.js b/scripts/rollup/bundles.js
index bcec44c02ceee..42bcf3653ea86 100644
--- a/scripts/rollup/bundles.js
+++ b/scripts/rollup/bundles.js
@@ -131,14 +131,7 @@ const bundles = [
 
   /* React DOM internals required for react-native-web (e.g., to shim native events from react-dom) */
   {
-    bundleTypes: [
-      UMD_DEV,
-      UMD_PROD,
-      NODE_DEV,
-      NODE_PROD,
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-    ],
+    bundleTypes: [UMD_DEV, UMD_PROD, NODE_DEV, NODE_PROD],
     moduleType: RENDERER_UTILS,
     entry: 'react-dom/unstable-native-dependencies',
     global: 'ReactDOMUnstableNativeDependencies',
@@ -188,7 +181,7 @@ const bundles = [
     externals: ['react', 'react-dom/server'],
   },
   {
-    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-dom/unstable-fizz.node',
     global: 'ReactDOMFizzServer',
@@ -204,7 +197,7 @@ const bundles = [
     externals: ['react', 'react-dom/server'],
   },
   {
-    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: RENDERER,
     entry: 'react-flight-dom-webpack/server.node',
     global: 'ReactFlightDOMServer',
@@ -213,14 +206,7 @@ const bundles = [
 
   /******* React DOM Flight Client Webpack *******/
   {
-    bundleTypes: [
-      NODE_DEV,
-      NODE_PROD,
-      UMD_DEV,
-      UMD_PROD,
-      FB_WWW_DEV,
-      FB_WWW_PROD,
-    ],
+    bundleTypes: [NODE_DEV, NODE_PROD, UMD_DEV, UMD_PROD],
     moduleType: RENDERER,
     entry: 'react-flight-dom-webpack',
     global: 'ReactFlightDOMClient',
@@ -535,7 +521,7 @@ const bundles = [
 
   /******* Jest React (experimental) *******/
   {
-    bundleTypes: [NODE_DEV, NODE_PROD, FB_WWW_DEV, FB_WWW_PROD],
+    bundleTypes: [NODE_DEV, NODE_PROD],
     moduleType: ISOMORPHIC,
     entry: 'jest-react',
     global: 'JestReact',

From 1000f6135efba4f8d8ebffedeb7b472f532a8475 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 19 Feb 2020 18:00:57 +0000
Subject: [PATCH 18/24] Add container to event listener signature (#18075)

---
 .../legacy-events/ReactGenericBatching.js     |  8 +--
 .../src/events/ReactDOMEventListener.js       | 53 ++++++++++++++++---
 .../src/events/ReactDOMEventReplaying.js      | 15 ++++++
 .../src/test-utils/ReactTestUtils.js          |  2 +-
 .../src/ReactFiberWorkLoop.js                 |  5 +-
 5 files changed, 68 insertions(+), 15 deletions(-)

diff --git a/packages/legacy-events/ReactGenericBatching.js b/packages/legacy-events/ReactGenericBatching.js
index e5f536ee15c8f..f3c8d4d768fbf 100644
--- a/packages/legacy-events/ReactGenericBatching.js
+++ b/packages/legacy-events/ReactGenericBatching.js
@@ -23,8 +23,8 @@ import {invokeGuardedCallbackAndCatchFirstError} from 'shared/ReactErrorUtils';
 let batchedUpdatesImpl = function(fn, bookkeeping) {
   return fn(bookkeeping);
 };
-let discreteUpdatesImpl = function(fn, a, b, c) {
-  return fn(a, b, c);
+let discreteUpdatesImpl = function(fn, a, b, c, d) {
+  return fn(a, b, c, d);
 };
 let flushDiscreteUpdatesImpl = function() {};
 let batchedEventUpdatesImpl = batchedUpdatesImpl;
@@ -89,11 +89,11 @@ export function executeUserEventHandler(fn: any => void, value: any): void {
   }
 }
 
-export function discreteUpdates(fn, a, b, c) {
+export function discreteUpdates(fn, a, b, c, d) {
   const prevIsInsideEventHandler = isInsideEventHandler;
   isInsideEventHandler = true;
   try {
-    return discreteUpdatesImpl(fn, a, b, c);
+    return discreteUpdatesImpl(fn, a, b, c, d);
   } finally {
     isInsideEventHandler = prevIsInsideEventHandler;
     if (!isInsideEventHandler) {
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index dfeb91508a369..ac01507da4845 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -119,6 +119,7 @@ export function addResponderEventSystemEvent(
     null,
     ((topLevelType: any): DOMTopLevelEventType),
     eventFlags,
+    document,
   );
   if (passiveBrowserEventsSupported) {
     addEventCaptureListenerWithPassiveFlag(
@@ -149,7 +150,7 @@ export function removeActiveResponderEventSystemEvent(
 }
 
 function trapEventForPluginEventSystem(
-  element: Document | Element | Node,
+  container: Document | Element | Node,
   topLevelType: DOMTopLevelEventType,
   capture: boolean,
 ): void {
@@ -160,6 +161,7 @@ function trapEventForPluginEventSystem(
         null,
         topLevelType,
         PLUGIN_EVENT_SYSTEM,
+        container,
       );
       break;
     case UserBlockingEvent:
@@ -167,41 +169,66 @@ function trapEventForPluginEventSystem(
         null,
         topLevelType,
         PLUGIN_EVENT_SYSTEM,
+        container,
       );
       break;
     case ContinuousEvent:
     default:
-      listener = dispatchEvent.bind(null, topLevelType, PLUGIN_EVENT_SYSTEM);
+      listener = dispatchEvent.bind(
+        null,
+        topLevelType,
+        PLUGIN_EVENT_SYSTEM,
+        container,
+      );
       break;
   }
 
   const rawEventName = getRawEventName(topLevelType);
   if (capture) {
-    addEventCaptureListener(element, rawEventName, listener);
+    addEventCaptureListener(container, rawEventName, listener);
   } else {
-    addEventBubbleListener(element, rawEventName, listener);
+    addEventBubbleListener(container, rawEventName, listener);
   }
 }
 
-function dispatchDiscreteEvent(topLevelType, eventSystemFlags, nativeEvent) {
+function dispatchDiscreteEvent(
+  topLevelType,
+  eventSystemFlags,
+  container,
+  nativeEvent,
+) {
   flushDiscreteUpdatesIfNeeded(nativeEvent.timeStamp);
-  discreteUpdates(dispatchEvent, topLevelType, eventSystemFlags, nativeEvent);
+  discreteUpdates(
+    dispatchEvent,
+    topLevelType,
+    eventSystemFlags,
+    container,
+    nativeEvent,
+  );
 }
 
 function dispatchUserBlockingUpdate(
   topLevelType,
   eventSystemFlags,
+  container,
   nativeEvent,
 ) {
   runWithPriority(
     UserBlockingPriority,
-    dispatchEvent.bind(null, topLevelType, eventSystemFlags, nativeEvent),
+    dispatchEvent.bind(
+      null,
+      topLevelType,
+      eventSystemFlags,
+      container,
+      nativeEvent,
+    ),
   );
 }
 
 export function dispatchEvent(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
+  container: Document | Element | Node,
   nativeEvent: AnyNativeEvent,
 ): void {
   if (!_enabled) {
@@ -216,6 +243,7 @@ export function dispatchEvent(
       topLevelType,
       eventSystemFlags,
       nativeEvent,
+      container,
     );
     return;
   }
@@ -224,6 +252,7 @@ export function dispatchEvent(
     topLevelType,
     eventSystemFlags,
     nativeEvent,
+    container,
   );
 
   if (blockedOn === null) {
@@ -234,7 +263,13 @@ export function dispatchEvent(
 
   if (isReplayableDiscreteEvent(topLevelType)) {
     // This this to be replayed later once the target is available.
-    queueDiscreteEvent(blockedOn, topLevelType, eventSystemFlags, nativeEvent);
+    queueDiscreteEvent(
+      blockedOn,
+      topLevelType,
+      eventSystemFlags,
+      nativeEvent,
+      container,
+    );
     return;
   }
 
@@ -244,6 +279,7 @@ export function dispatchEvent(
       topLevelType,
       eventSystemFlags,
       nativeEvent,
+      container,
     )
   ) {
     return;
@@ -289,6 +325,7 @@ export function attemptToDispatchEvent(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
+  container: Document | Element | Node,
 ): null | Container | SuspenseInstance {
   // TODO: Warn if _enabled is false.
 
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index 90a671666e055..be5f05f08ecc9 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -124,6 +124,7 @@ type QueuedReplayableEvent = {|
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
+  container: Document | Element | Node,
 |};
 
 let hasScheduledReplayAttempt = false;
@@ -252,12 +253,14 @@ function createQueuedReplayableEvent(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
+  container: Document | Element | Node,
 ): QueuedReplayableEvent {
   return {
     blockedOn,
     topLevelType,
     eventSystemFlags: eventSystemFlags | IS_REPLAYED,
     nativeEvent,
+    container,
   };
 }
 
@@ -266,12 +269,14 @@ export function queueDiscreteEvent(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
+  container: Document | Element | Node,
 ): void {
   const queuedEvent = createQueuedReplayableEvent(
     blockedOn,
     topLevelType,
     eventSystemFlags,
     nativeEvent,
+    container,
   );
   queuedDiscreteEvents.push(queuedEvent);
   if (enableSelectiveHydration) {
@@ -339,6 +344,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
+  container: Document | Element | Node,
 ): QueuedReplayableEvent {
   if (
     existingQueuedEvent === null ||
@@ -349,6 +355,7 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
       topLevelType,
       eventSystemFlags,
       nativeEvent,
+      container,
     );
     if (blockedOn !== null) {
       let fiber = getInstanceFromNode(blockedOn);
@@ -372,6 +379,7 @@ export function queueIfContinuousEvent(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
+  container: Document | Element | Node,
 ): boolean {
   // These set relatedTarget to null because the replayed event will be treated as if we
   // moved from outside the window (no target) onto the target once it hydrates.
@@ -385,6 +393,7 @@ export function queueIfContinuousEvent(
         topLevelType,
         eventSystemFlags,
         focusEvent,
+        container,
       );
       return true;
     }
@@ -396,6 +405,7 @@ export function queueIfContinuousEvent(
         topLevelType,
         eventSystemFlags,
         dragEvent,
+        container,
       );
       return true;
     }
@@ -407,6 +417,7 @@ export function queueIfContinuousEvent(
         topLevelType,
         eventSystemFlags,
         mouseEvent,
+        container,
       );
       return true;
     }
@@ -421,6 +432,7 @@ export function queueIfContinuousEvent(
           topLevelType,
           eventSystemFlags,
           pointerEvent,
+          container,
         ),
       );
       return true;
@@ -436,6 +448,7 @@ export function queueIfContinuousEvent(
           topLevelType,
           eventSystemFlags,
           pointerEvent,
+          container,
         ),
       );
       return true;
@@ -512,6 +525,7 @@ function attemptReplayContinuousQueuedEvent(
     queuedEvent.topLevelType,
     queuedEvent.eventSystemFlags,
     queuedEvent.nativeEvent,
+    queuedEvent.container,
   );
   if (nextBlockedOn !== null) {
     // We're still blocked. Try again later.
@@ -554,6 +568,7 @@ function replayUnblockedEvents() {
       nextDiscreteEvent.topLevelType,
       nextDiscreteEvent.eventSystemFlags,
       nextDiscreteEvent.nativeEvent,
+      nextDiscreteEvent.container,
     );
     if (nextBlockedOn !== null) {
       // We're still blocked. Try again later.
diff --git a/packages/react-dom/src/test-utils/ReactTestUtils.js b/packages/react-dom/src/test-utils/ReactTestUtils.js
index 23e99cd15ae47..18e4c50ee2ebb 100644
--- a/packages/react-dom/src/test-utils/ReactTestUtils.js
+++ b/packages/react-dom/src/test-utils/ReactTestUtils.js
@@ -62,7 +62,7 @@ let hasWarnedAboutDeprecatedMockComponent = false;
  */
 function simulateNativeEventOnNode(topLevelType, node, fakeNativeEvent) {
   fakeNativeEvent.target = node;
-  dispatchEvent(topLevelType, PLUGIN_EVENT_SYSTEM, fakeNativeEvent);
+  dispatchEvent(topLevelType, PLUGIN_EVENT_SYSTEM, document, fakeNativeEvent);
 }
 
 /**
diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index 02d1bec97ff8b..e2f71c7a4cb1b 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -1160,17 +1160,18 @@ export function batchedEventUpdates<A, R>(fn: A => R, a: A): R {
   }
 }
 
-export function discreteUpdates<A, B, C, R>(
+export function discreteUpdates<A, B, C, D, R>(
   fn: (A, B, C) => R,
   a: A,
   b: B,
   c: C,
+  d: D,
 ): R {
   const prevExecutionContext = executionContext;
   executionContext |= DiscreteEventContext;
   try {
     // Should this
-    return runWithPriority(UserBlockingPriority, fn.bind(null, a, b, c));
+    return runWithPriority(UserBlockingPriority, fn.bind(null, a, b, c, d));
   } finally {
     executionContext = prevExecutionContext;
     if (executionContext === NoContext) {

From b6c94d636cb33a265671b864b97870da38d97207 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Wed, 19 Feb 2020 18:32:18 +0000
Subject: [PATCH 19/24] Add guard around FocusWithin responder root events
 (#18080)

---
 packages/react-interactions/events/src/dom/Focus.js | 13 ++++++++++---
 1 file changed, 10 insertions(+), 3 deletions(-)

diff --git a/packages/react-interactions/events/src/dom/Focus.js b/packages/react-interactions/events/src/dom/Focus.js
index d97723dfe6201..f4f5e4a0fedc3 100644
--- a/packages/react-interactions/events/src/dom/Focus.js
+++ b/packages/react-interactions/events/src/dom/Focus.js
@@ -36,7 +36,7 @@ type FocusState = {
   isFocused: boolean,
   isFocusVisible: boolean,
   pointerType: PointerType,
-  ...
+  addedRootEvents?: boolean,
 };
 
 type FocusProps = {
@@ -416,6 +416,7 @@ const focusResponderImpl = {
       isFocused: false,
       isFocusVisible: false,
       pointerType: '',
+      addedRootEvents: false,
     };
   },
   onMount() {
@@ -622,7 +623,10 @@ const focusWithinResponderImpl = {
             onBeforeBlurWithin,
             DiscreteEvent,
           );
-          context.addRootEventTypes(rootEventTypes);
+          if (!state.addedRootEvents) {
+            state.addedRootEvents = true;
+            context.addRootEventTypes(rootEventTypes);
+          }
         } else {
           // We want to propagate to next focusWithin responder
           // if this responder doesn't handle beforeblur
@@ -660,7 +664,10 @@ const focusWithinResponderImpl = {
       if (detachedTarget !== null && detachedTarget === event.target) {
         dispatchBlurWithinEvents(context, event, props, state);
         state.detachedTarget = null;
-        context.removeRootEventTypes(rootEventTypes);
+        if (state.addedRootEvents) {
+          state.addedRootEvents = false;
+          context.removeRootEventTypes(rootEventTypes);
+        }
       }
     }
   },

From 7e770dae93e1a934b905d8678c7ce368ed86ef0b Mon Sep 17 00:00:00 2001
From: Brian Vaughn <bvaughn@fb.com>
Date: Wed, 19 Feb 2020 10:58:45 -0800
Subject: [PATCH 20/24] Profiler tooltip tweaks (#18082)

* Moved Profiler views into Profiler folder

* Tweaked Profiler tooltip CSS styles

* Tweaked Tooltip positioning code
---
 .../views/Profiler/CommitFlamegraph.js        |  2 +-
 .../devtools/views/Profiler/CommitRanked.js   |  2 +-
 .../views/Profiler/HoveredFiberInfo.css       |  8 ++--
 .../views/Profiler/HoveredFiberInfo.js        |  4 +-
 .../Profiler/SidebarSelectedFiberInfo.js      |  4 +-
 .../{Components => Profiler}/Tooltip.css      |  0
 .../views/{Components => Profiler}/Tooltip.js | 48 +++++++++----------
 .../WhatChanged.css}                          |  3 +-
 .../WhatChanged.js}                           |  8 ++--
 9 files changed, 35 insertions(+), 44 deletions(-)
 rename packages/react-devtools-shared/src/devtools/views/{Components => Profiler}/Tooltip.css (100%)
 rename packages/react-devtools-shared/src/devtools/views/{Components => Profiler}/Tooltip.js (56%)
 rename packages/react-devtools-shared/src/devtools/views/{Components/ProfilerWhatChanged.css => Profiler/WhatChanged.css} (93%)
 rename packages/react-devtools-shared/src/devtools/views/{Components/ProfilerWhatChanged.js => Profiler/WhatChanged.js} (94%)

diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
index e4daf92bf7662..d7a894914db37 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitFlamegraph.js
@@ -23,7 +23,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
-import Tooltip from '../Components/Tooltip';
+import Tooltip from './Tooltip';
 
 import styles from './CommitFlamegraph.css';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
index 89bd0d8e82198..878f245c62f61 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/CommitRanked.js
@@ -17,7 +17,7 @@ import HoveredFiberInfo from './HoveredFiberInfo';
 import {scale} from './utils';
 import {StoreContext} from '../context';
 import {SettingsContext} from '../Settings/SettingsContext';
-import Tooltip from '../Components/Tooltip';
+import Tooltip from './Tooltip';
 
 import styles from './CommitRanked.css';
 
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
index 14afb8d719e05..d50e36935f20c 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.css
@@ -1,6 +1,6 @@
 .Toolbar {
-  height: 2.25rem;
-  padding: 0 0.5rem;
+  padding: 0.25rem 0;
+  margin-bottom: 0.25rem;
   flex: 0 0 auto;
   display: flex;
   align-items: center;
@@ -8,7 +8,6 @@
 }
 
 .Content {
-  padding: 0.5rem;
   user-select: none;
   overflow-y: auto;
 }
@@ -25,14 +24,13 @@
 
 .Label {
   font-weight: bold;
-  margin-bottom: 0.5rem;
 }
 
 .CurrentCommit {
+  margin-top: 0.25rem;
   display: block;
   width: 100%;
   text-align: left;
   background: none;
   border: none;
-  padding: 0.25rem 0.5rem;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
index d6b102cd5f2de..c6e33a28ce02b 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/HoveredFiberInfo.js
@@ -10,7 +10,7 @@
 import React, {Fragment, useContext} from 'react';
 import {ProfilerContext} from './ProfilerContext';
 import {formatDuration, formatTime} from './utils';
-import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
+import WhatChanged from './WhatChanged';
 import {StoreContext} from '../context';
 
 import styles from './HoveredFiberInfo.css';
@@ -67,7 +67,7 @@ export default function HoveredFiberInfo({fiberData}: Props) {
         <div className={styles.Component}>{name}</div>
       </div>
       <div className={styles.Content}>
-        <ProfilerWhatChanged fiberID={((id: any): number)} />
+        <WhatChanged fiberID={((id: any): number)} />
         {renderDurationInfo || (
           <div>Did not render during this profiling session.</div>
         )}
diff --git a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
index 0cef165762a1e..71bba3f41249f 100644
--- a/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/SidebarSelectedFiberInfo.js
@@ -8,7 +8,7 @@
  */
 
 import React, {Fragment, useContext} from 'react';
-import ProfilerWhatChanged from '../Components/ProfilerWhatChanged';
+import WhatChanged from './WhatChanged';
 import {ProfilerContext} from './ProfilerContext';
 import {formatDuration, formatTime} from './utils';
 import {StoreContext} from '../context';
@@ -75,7 +75,7 @@ export default function SidebarSelectedFiberInfo(_: Props) {
         </Button>
       </div>
       <div className={styles.Content}>
-        <ProfilerWhatChanged fiberID={((selectedFiberID: any): number)} />
+        <WhatChanged fiberID={((selectedFiberID: any): number)} />
         {listItems.length > 0 && (
           <Fragment>
             <label className={styles.Label}>Rendered at</label>: {listItems}
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.css b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css
similarity index 100%
rename from packages/react-devtools-shared/src/devtools/views/Components/Tooltip.css
rename to packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.css
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
similarity index 56%
rename from packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js
rename to packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
index 5be379ee668da..87caa444a09ac 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/Tooltip.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/Tooltip.js
@@ -43,46 +43,32 @@ export default function Tooltip({children, label}: any) {
   );
 }
 
+const TOOLTIP_OFFSET = 5;
+
 // Method used to find the position of the tooltip based on current mouse position
 function getTooltipPosition(element, mousePosition) {
   const {height, mouseX, mouseY, width} = mousePosition;
-  const TOOLTIP_OFFSET_X = 5;
-  const TOOLTIP_OFFSET_Y = 15;
   let top = 0;
   let left = 0;
 
-  // Let's check the vertical position.
-  if (mouseY + TOOLTIP_OFFSET_Y + element.offsetHeight >= height) {
-    // The tooltip doesn't fit below the mouse cursor (which is our
-    // default strategy). Therefore we try to position it either above the
-    // mouse cursor or finally aligned with the window's top edge.
-    if (mouseY - TOOLTIP_OFFSET_Y - element.offsetHeight > 0) {
-      // We position the tooltip above the mouse cursor if it fits there.
-      top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET_Y}px`;
+  if (mouseY + TOOLTIP_OFFSET + element.offsetHeight >= height) {
+    if (mouseY - TOOLTIP_OFFSET - element.offsetHeight > 0) {
+      top = `${mouseY - element.offsetHeight - TOOLTIP_OFFSET}px`;
     } else {
-      // Otherwise we align the tooltip with the window's top edge.
       top = '0px';
     }
   } else {
-    top = `${mouseY + TOOLTIP_OFFSET_Y}px`;
+    top = `${mouseY + TOOLTIP_OFFSET}px`;
   }
 
-  // Now let's check the horizontal position.
-  if (mouseX + TOOLTIP_OFFSET_X + element.offsetWidth >= width) {
-    // The tooltip doesn't fit at the right of the mouse cursor (which is
-    // our default strategy). Therefore we try to position it either at the
-    // left of the mouse cursor or finally aligned with the window's left
-    // edge.
-    if (mouseX - TOOLTIP_OFFSET_X - element.offsetWidth > 0) {
-      // We position the tooltip at the left of the mouse cursor if it fits
-      // there.
-      left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET_X}px`;
+  if (mouseX + TOOLTIP_OFFSET + element.offsetWidth >= width) {
+    if (mouseX - TOOLTIP_OFFSET - element.offsetWidth > 0) {
+      left = `${mouseX - element.offsetWidth - TOOLTIP_OFFSET}px`;
     } else {
-      // Otherwise, align the tooltip with the window's left edge.
       left = '0px';
     }
   } else {
-    left = `${mouseX + TOOLTIP_OFFSET_X * 2}px`;
+    left = `${mouseX + TOOLTIP_OFFSET * 2}px`;
   }
 
   return {left, top};
@@ -94,9 +80,19 @@ function getMousePosition(
   mouseEvent: SyntheticMouseEvent<*>,
 ) {
   if (relativeContainer !== null) {
-    const {height, top, width} = relativeContainer.getBoundingClientRect();
+    // Positon within the nearest position:relative container.
+    let targetContainer = relativeContainer;
+    while (targetContainer.parentElement != null) {
+      if (targetContainer.style.position === 'relative') {
+        break;
+      } else {
+        targetContainer = targetContainer.parentElement;
+      }
+    }
+
+    const {height, left, top, width} = targetContainer.getBoundingClientRect();
 
-    const mouseX = mouseEvent.clientX;
+    const mouseX = mouseEvent.clientX - left;
     const mouseY = mouseEvent.clientY - top;
 
     return {height, mouseX, mouseY, width};
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css
similarity index 93%
rename from packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css
rename to packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css
index 1e0dd8e597015..246dbfe9bac17 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.css
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.css
@@ -1,5 +1,5 @@
 .Component {
-  margin-bottom: 1rem;
+  margin-bottom: 0.5rem;
 }
 
 .Item {
@@ -26,5 +26,4 @@
 
 .Label {
   font-weight: bold;
-  margin-bottom: 0.5rem;
 }
diff --git a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
similarity index 94%
rename from packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js
rename to packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
index 75846da1d11e6..54ca15e19b81a 100644
--- a/packages/react-devtools-shared/src/devtools/views/Components/ProfilerWhatChanged.js
+++ b/packages/react-devtools-shared/src/devtools/views/Profiler/WhatChanged.js
@@ -11,15 +11,13 @@ import React, {useContext} from 'react';
 import {ProfilerContext} from '../Profiler/ProfilerContext';
 import {StoreContext} from '../context';
 
-import styles from './ProfilerWhatChanged.css';
+import styles from './WhatChanged.css';
 
-type ProfilerWhatChangedProps = {|
+type Props = {|
   fiberID: number,
 |};
 
-export default function ProfilerWhatChanged({
-  fiberID,
-}: ProfilerWhatChangedProps) {
+export default function WhatChanged({fiberID}: Props) {
   const {profilerStore} = useContext(StoreContext);
   const {rootID, selectedCommitIndex} = useContext(ProfilerContext);
 

From 085d02133e9e3b24ae548d89e4003899bf85022c Mon Sep 17 00:00:00 2001
From: Eli White <github@eli-white.com>
Date: Wed, 19 Feb 2020 11:33:40 -0800
Subject: [PATCH 21/24] [Native] Migrate focus/blur to call TextInputState with
 the host component (#18068)

---
 .../src/ReactFabricHostConfig.js              |  4 +-
 .../src/ReactNativeFiberHostComponent.js      |  4 +-
 .../Libraries/ReactPrivate/TextInputState.js  |  5 ++-
 .../__tests__/ReactFabric-test.internal.js    | 37 +++++++++++++++++++
 .../ReactNativeMount-test.internal.js         | 37 +++++++++++++++++++
 5 files changed, 82 insertions(+), 5 deletions(-)

diff --git a/packages/react-native-renderer/src/ReactFabricHostConfig.js b/packages/react-native-renderer/src/ReactFabricHostConfig.js
index 959860bcf2cbb..6e371f9ff8cd0 100644
--- a/packages/react-native-renderer/src/ReactFabricHostConfig.js
+++ b/packages/react-native-renderer/src/ReactFabricHostConfig.js
@@ -104,11 +104,11 @@ class ReactFabricHostComponent {
   }
 
   blur() {
-    TextInputState.blurTextInput(this._nativeTag);
+    TextInputState.blurTextInput(this);
   }
 
   focus() {
-    TextInputState.focusTextInput(this._nativeTag);
+    TextInputState.focusTextInput(this);
   }
 
   measure(callback: MeasureOnSuccessCallback) {
diff --git a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
index ba316e010c7a5..c4c74462a4d7e 100644
--- a/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
+++ b/packages/react-native-renderer/src/ReactNativeFiberHostComponent.js
@@ -40,11 +40,11 @@ class ReactNativeFiberHostComponent {
   }
 
   blur() {
-    TextInputState.blurTextInput(this._nativeTag);
+    TextInputState.blurTextInput(this);
   }
 
   focus() {
-    TextInputState.focusTextInput(this._nativeTag);
+    TextInputState.focusTextInput(this);
   }
 
   measure(callback: MeasureOnSuccessCallback) {
diff --git a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js
index cc97ef5b1852a..cad828edaea7e 100644
--- a/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js
+++ b/packages/react-native-renderer/src/__mocks__/react-native/Libraries/ReactPrivate/TextInputState.js
@@ -10,6 +10,9 @@
 // Mock of the Native Hooks
 // TODO: Should this move into the components themselves? E.g. focusable
 
-const TextInputState = {};
+const TextInputState = {
+  blurTextInput: jest.fn(),
+  focusTextInput: jest.fn(),
+};
 
 module.exports = TextInputState;
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 0929b80e36b56..2143957d19e5b 100644
--- a/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactFabric-test.internal.js
@@ -16,6 +16,7 @@ let ReactFeatureFlags;
 let createReactNativeComponentClass;
 let UIManager;
 let StrictMode;
+let TextInputState;
 
 const SET_NATIVE_PROPS_NOT_SUPPORTED_MESSAGE =
   'Warning: setNativeProps is not currently supported in Fabric';
@@ -42,6 +43,8 @@ describe('ReactFabric', () => {
       .UIManager;
     createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
       .ReactNativeViewConfigRegistry.register;
+    TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+      .TextInputState;
   });
 
   it('should be able to create and render a native component', () => {
@@ -991,4 +994,38 @@ describe('ReactFabric', () => {
     ]);
     expect(match).toBe(child._nativeTag);
   });
+
+  it('blur on host component calls TextInputState', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let viewRef = React.createRef();
+    ReactFabric.render(<View ref={viewRef} />, 11);
+
+    expect(TextInputState.blurTextInput).not.toBeCalled();
+
+    viewRef.current.blur();
+
+    expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);
+    expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
+  });
+
+  it('focus on host component calls TextInputState', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let viewRef = React.createRef();
+    ReactFabric.render(<View ref={viewRef} />, 11);
+
+    expect(TextInputState.focusTextInput).not.toBeCalled();
+
+    viewRef.current.focus();
+
+    expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
+    expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
+  });
 });
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 395cac0c20d8c..75b2ce286c148 100644
--- a/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
+++ b/packages/react-native-renderer/src/__tests__/ReactNativeMount-test.internal.js
@@ -15,6 +15,7 @@ let StrictMode;
 let ReactNative;
 let createReactNativeComponentClass;
 let UIManager;
+let TextInputState;
 
 const DISPATCH_COMMAND_REQUIRES_HOST_COMPONENT =
   "Warning: dispatchCommand was called with a ref that isn't a " +
@@ -31,6 +32,8 @@ describe('ReactNative', () => {
       .UIManager;
     createReactNativeComponentClass = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
       .ReactNativeViewConfigRegistry.register;
+    TextInputState = require('react-native/Libraries/ReactPrivate/ReactNativePrivateInterface')
+      .TextInputState;
   });
 
   it('should be able to create and render a native component', () => {
@@ -594,4 +597,38 @@ describe('ReactNative', () => {
     ]);
     expect(match).toBe(child._nativeTag);
   });
+
+  it('blur on host component calls TextInputState', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let viewRef = React.createRef();
+    ReactNative.render(<View ref={viewRef} />, 11);
+
+    expect(TextInputState.blurTextInput).not.toBeCalled();
+
+    viewRef.current.blur();
+
+    expect(TextInputState.blurTextInput).toHaveBeenCalledTimes(1);
+    expect(TextInputState.blurTextInput).toHaveBeenCalledWith(viewRef.current);
+  });
+
+  it('focus on host component calls TextInputState', () => {
+    const View = createReactNativeComponentClass('RCTView', () => ({
+      validAttributes: {foo: true},
+      uiViewClassName: 'RCTView',
+    }));
+
+    let viewRef = React.createRef();
+    ReactNative.render(<View ref={viewRef} />, 11);
+
+    expect(TextInputState.focusTextInput).not.toBeCalled();
+
+    viewRef.current.focus();
+
+    expect(TextInputState.focusTextInput).toHaveBeenCalledTimes(1);
+    expect(TextInputState.focusTextInput).toHaveBeenCalledWith(viewRef.current);
+  });
 });

From ea6ed3dbbd32515e2d4d9783c358beceeadd4b1d Mon Sep 17 00:00:00 2001
From: Andrew Clark <git@andrewclark.io>
Date: Wed, 19 Feb 2020 12:43:14 -0800
Subject: [PATCH 22/24] Warn for update on different component in render
 (#17099)

This warning already exists for class components, but not for functions.

It does not apply to render phase updates to the same component, which
have special semantics that we do support.
---
 .../src/ReactFiberWorkLoop.js                 | 52 ++++++++++++-------
 .../src/__tests__/ReactHooks-test.internal.js | 31 +++++++----
 ...eactHooksWithNoopRenderer-test.internal.js | 44 ++++++++++++++++
 3 files changed, 98 insertions(+), 29 deletions(-)

diff --git a/packages/react-reconciler/src/ReactFiberWorkLoop.js b/packages/react-reconciler/src/ReactFiberWorkLoop.js
index e2f71c7a4cb1b..31946efd199bd 100644
--- a/packages/react-reconciler/src/ReactFiberWorkLoop.js
+++ b/packages/react-reconciler/src/ReactFiberWorkLoop.js
@@ -380,7 +380,7 @@ export function scheduleUpdateOnFiber(
   expirationTime: ExpirationTime,
 ) {
   checkForNestedUpdates();
-  warnAboutInvalidUpdatesOnClassComponentsInDEV(fiber);
+  warnAboutRenderPhaseUpdatesInDEV(fiber);
 
   const root = markUpdateTimeFromFiberToRoot(fiber, expirationTime);
   if (root === null) {
@@ -2781,30 +2781,44 @@ if (__DEV__ && replayFailedUnitOfWorkWithInvokeGuardedCallback) {
 
 let didWarnAboutUpdateInRender = false;
 let didWarnAboutUpdateInGetChildContext = false;
-function warnAboutInvalidUpdatesOnClassComponentsInDEV(fiber) {
+function warnAboutRenderPhaseUpdatesInDEV(fiber) {
   if (__DEV__) {
-    if (fiber.tag === ClassComponent) {
-      switch (ReactCurrentDebugFiberPhaseInDEV) {
-        case 'getChildContext':
-          if (didWarnAboutUpdateInGetChildContext) {
-            return;
-          }
+    if ((executionContext & RenderContext) !== NoContext) {
+      switch (fiber.tag) {
+        case FunctionComponent:
+        case ForwardRef:
+        case SimpleMemoComponent: {
           console.error(
-            'setState(...): Cannot call setState() inside getChildContext()',
+            'Cannot update a component from inside the function body of a ' +
+              'different component.',
           );
-          didWarnAboutUpdateInGetChildContext = true;
           break;
-        case 'render':
-          if (didWarnAboutUpdateInRender) {
-            return;
+        }
+        case ClassComponent: {
+          switch (ReactCurrentDebugFiberPhaseInDEV) {
+            case 'getChildContext':
+              if (didWarnAboutUpdateInGetChildContext) {
+                return;
+              }
+              console.error(
+                'setState(...): Cannot call setState() inside getChildContext()',
+              );
+              didWarnAboutUpdateInGetChildContext = true;
+              break;
+            case 'render':
+              if (didWarnAboutUpdateInRender) {
+                return;
+              }
+              console.error(
+                'Cannot update during an existing state transition (such as ' +
+                  'within `render`). Render methods should be a pure ' +
+                  'function of props and state.',
+              );
+              didWarnAboutUpdateInRender = true;
+              break;
           }
-          console.error(
-            'Cannot update during an existing state transition (such as ' +
-              'within `render`). Render methods should be a pure function of ' +
-              'props and state.',
-          );
-          didWarnAboutUpdateInRender = true;
           break;
+        }
       }
     }
   }
diff --git a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
index 2ebf8d16a85e3..f9073f1bf7018 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooks-test.internal.js
@@ -1085,7 +1085,10 @@ describe('ReactHooks', () => {
           <Cls />
         </>,
       ),
-    ).toErrorDev(['Context can only be read while React is rendering']);
+    ).toErrorDev([
+      'Context can only be read while React is rendering',
+      'Cannot update a component from inside the function body of a different component.',
+    ]);
   });
 
   it('warns when calling hooks inside useReducer', () => {
@@ -1749,8 +1752,9 @@ describe('ReactHooks', () => {
   });
 
   // Regression test for #14674
-  it('does not swallow original error when updating another component in render phase', () => {
+  it('does not swallow original error when updating another component in render phase', async () => {
     let {useState} = React;
+    spyOnDev(console, 'error');
 
     let _setState;
     function A() {
@@ -1760,22 +1764,29 @@ describe('ReactHooks', () => {
     }
 
     function B() {
-      act(() =>
-        _setState(() => {
-          throw new Error('Hello');
-        }),
-      );
+      _setState(() => {
+        throw new Error('Hello');
+      });
       return null;
     }
 
-    expect(() =>
+    await act(async () => {
       ReactTestRenderer.create(
         <>
           <A />
           <B />
         </>,
-      ),
-    ).toThrow('Hello');
+      );
+      expect(() => Scheduler.unstable_flushAll()).toThrow('Hello');
+    });
+
+    if (__DEV__) {
+      expect(console.error).toHaveBeenCalledTimes(2);
+      expect(console.error.calls.argsFor(0)[0]).toContain(
+        'Warning: Cannot update a component from inside the function body ' +
+          'of a different component.%s',
+      );
+    }
   });
 
   // Regression test for https://github.com/facebook/react/issues/15057
diff --git a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
index 6e50579addd31..325d5ea7e7e00 100644
--- a/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
+++ b/packages/react-reconciler/src/__tests__/ReactHooksWithNoopRenderer-test.internal.js
@@ -420,6 +420,50 @@ function loadModules({
           ]);
         });
 
+        it('warns about render phase update on a different component', async () => {
+          let setStep;
+          function Foo() {
+            const [step, _setStep] = useState(0);
+            setStep = _setStep;
+            return <Text text={`Foo [${step}]`} />;
+          }
+
+          function Bar({triggerUpdate}) {
+            if (triggerUpdate) {
+              setStep(1);
+            }
+            return <Text text="Bar" />;
+          }
+
+          const root = ReactNoop.createRoot();
+
+          await ReactNoop.act(async () => {
+            root.render(
+              <>
+                <Foo />
+                <Bar />
+              </>,
+            );
+          });
+          expect(Scheduler).toHaveYielded(['Foo [0]', 'Bar']);
+
+          // Bar will update Foo during its render phase. React should warn.
+          await ReactNoop.act(async () => {
+            root.render(
+              <>
+                <Foo />
+                <Bar triggerUpdate={true} />
+              </>,
+            );
+            expect(() =>
+              expect(Scheduler).toFlushAndYield(['Foo [0]', 'Bar', 'Foo [1]']),
+            ).toErrorDev([
+              'Cannot update a component from inside the function body of a ' +
+                'different component.',
+            ]);
+          });
+        });
+
         it('keeps restarting until there are no more new updates', () => {
           function Counter({row: newRow}) {
             let [count, setCount] = useState(0);

From 3f85d53ca6f2af8a711daae6322e6bdda862f660 Mon Sep 17 00:00:00 2001
From: Dominic Gannaway <trueadm@users.noreply.github.com>
Date: Thu, 20 Feb 2020 00:46:03 +0000
Subject: [PATCH 23/24] Further pre-requisite changes to plugin event system
 (#18083)

---
 packages/legacy-events/PluginModuleType.js    |  2 +-
 .../legacy-events/ReactSyntheticEventType.js  |  2 +-
 packages/react-dom/src/client/ReactDOMRoot.js |  2 +-
 .../src/events/DOMLegacyEventPluginSystem.js  |  8 ++--
 .../src/events/ReactDOMEventListener.js       | 20 ++++-----
 .../src/events/ReactDOMEventReplaying.js      | 44 ++++++++++---------
 .../react-dom/src/events/SelectEventPlugin.js |  9 +++-
 7 files changed, 48 insertions(+), 39 deletions(-)

diff --git a/packages/legacy-events/PluginModuleType.js b/packages/legacy-events/PluginModuleType.js
index 04ec9e67357e5..df353f2f3cc6b 100644
--- a/packages/legacy-events/PluginModuleType.js
+++ b/packages/legacy-events/PluginModuleType.js
@@ -29,7 +29,7 @@ export type PluginModule<NativeEvent> = {
     nativeTarget: NativeEvent,
     nativeEventTarget: null | EventTarget,
     eventSystemFlags: EventSystemFlags,
+    container?: Document | Element | Node,
   ) => ?ReactSyntheticEvent,
   tapMoveThreshold?: number,
-  ...
 };
diff --git a/packages/legacy-events/ReactSyntheticEventType.js b/packages/legacy-events/ReactSyntheticEventType.js
index 922d49d5c30f8..51929b8da2b6c 100644
--- a/packages/legacy-events/ReactSyntheticEventType.js
+++ b/packages/legacy-events/ReactSyntheticEventType.js
@@ -31,4 +31,4 @@ export type ReactSyntheticEvent = {|
     nativeEventTarget: EventTarget,
   ) => ReactSyntheticEvent,
   isPersistent: () => boolean,
-|} & SyntheticEvent<>;
+|};
diff --git a/packages/react-dom/src/client/ReactDOMRoot.js b/packages/react-dom/src/client/ReactDOMRoot.js
index f9282e919c0dd..da256457e0fb7 100644
--- a/packages/react-dom/src/client/ReactDOMRoot.js
+++ b/packages/react-dom/src/client/ReactDOMRoot.js
@@ -123,7 +123,7 @@ function createRootImpl(
       container.nodeType === DOCUMENT_NODE
         ? container
         : container.ownerDocument;
-    eagerlyTrapReplayableEvents(doc);
+    eagerlyTrapReplayableEvents(container, doc);
   }
   return root;
 }
diff --git a/packages/react-dom/src/events/DOMLegacyEventPluginSystem.js b/packages/react-dom/src/events/DOMLegacyEventPluginSystem.js
index 064dd2ee1f532..2897d3b42fef6 100644
--- a/packages/react-dom/src/events/DOMLegacyEventPluginSystem.js
+++ b/packages/react-dom/src/events/DOMLegacyEventPluginSystem.js
@@ -264,7 +264,7 @@ function handleTopLevel(bookKeeping: BookKeepingInstance) {
   }
 }
 
-export function dispatchEventForPluginEventSystem(
+export function dispatchEventForLegacyPluginEventSystem(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
   nativeEvent: AnyNativeEvent,
@@ -311,16 +311,16 @@ export function legacyListenToEvent(
   registrationName: string,
   mountAt: Document | Element | Node,
 ): void {
-  const listeningSet = getListenerMapForElement(mountAt);
+  const listenerMap = getListenerMapForElement(mountAt);
   const dependencies = registrationNameDependencies[registrationName];
 
   for (let i = 0; i < dependencies.length; i++) {
     const dependency = dependencies[i];
-    listenToTopLevelEvent(dependency, mountAt, listeningSet);
+    legacyListenToTopLevelEvent(dependency, mountAt, listenerMap);
   }
 }
 
-export function listenToTopLevelEvent(
+export function legacyListenToTopLevelEvent(
   topLevelType: DOMTopLevelEventType,
   mountAt: Document | Element | Node,
   listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
diff --git a/packages/react-dom/src/events/ReactDOMEventListener.js b/packages/react-dom/src/events/ReactDOMEventListener.js
index ac01507da4845..c63dc0ee648dd 100644
--- a/packages/react-dom/src/events/ReactDOMEventListener.js
+++ b/packages/react-dom/src/events/ReactDOMEventListener.js
@@ -60,7 +60,7 @@ import {
   DiscreteEvent,
 } from 'shared/ReactTypes';
 import {getEventPriorityForPluginSystem} from './DOMEventProperties';
-import {dispatchEventForPluginEventSystem} from './DOMLegacyEventPluginSystem';
+import {dispatchEventForLegacyPluginEventSystem} from './DOMLegacyEventPluginSystem';
 
 const {
   unstable_UserBlockingPriority: UserBlockingPriority,
@@ -242,8 +242,8 @@ export function dispatchEvent(
       null, // Flags that we're not actually blocked on anything as far as we know.
       topLevelType,
       eventSystemFlags,
-      nativeEvent,
       container,
+      nativeEvent,
     );
     return;
   }
@@ -251,8 +251,8 @@ export function dispatchEvent(
   const blockedOn = attemptToDispatchEvent(
     topLevelType,
     eventSystemFlags,
-    nativeEvent,
     container,
+    nativeEvent,
   );
 
   if (blockedOn === null) {
@@ -267,8 +267,8 @@ export function dispatchEvent(
       blockedOn,
       topLevelType,
       eventSystemFlags,
-      nativeEvent,
       container,
+      nativeEvent,
     );
     return;
   }
@@ -278,8 +278,8 @@ export function dispatchEvent(
       blockedOn,
       topLevelType,
       eventSystemFlags,
-      nativeEvent,
       container,
+      nativeEvent,
     )
   ) {
     return;
@@ -293,7 +293,7 @@ export function dispatchEvent(
   // in case the event system needs to trace it.
   if (enableDeprecatedFlareAPI) {
     if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {
-      dispatchEventForPluginEventSystem(
+      dispatchEventForLegacyPluginEventSystem(
         topLevelType,
         eventSystemFlags,
         nativeEvent,
@@ -311,7 +311,7 @@ export function dispatchEvent(
       );
     }
   } else {
-    dispatchEventForPluginEventSystem(
+    dispatchEventForLegacyPluginEventSystem(
       topLevelType,
       eventSystemFlags,
       nativeEvent,
@@ -324,8 +324,8 @@ export function dispatchEvent(
 export function attemptToDispatchEvent(
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
-  nativeEvent: AnyNativeEvent,
   container: Document | Element | Node,
+  nativeEvent: AnyNativeEvent,
 ): null | Container | SuspenseInstance {
   // TODO: Warn if _enabled is false.
 
@@ -372,7 +372,7 @@ export function attemptToDispatchEvent(
 
   if (enableDeprecatedFlareAPI) {
     if (eventSystemFlags & PLUGIN_EVENT_SYSTEM) {
-      dispatchEventForPluginEventSystem(
+      dispatchEventForLegacyPluginEventSystem(
         topLevelType,
         eventSystemFlags,
         nativeEvent,
@@ -390,7 +390,7 @@ export function attemptToDispatchEvent(
       );
     }
   } else {
-    dispatchEventForPluginEventSystem(
+    dispatchEventForLegacyPluginEventSystem(
       topLevelType,
       eventSystemFlags,
       nativeEvent,
diff --git a/packages/react-dom/src/events/ReactDOMEventReplaying.js b/packages/react-dom/src/events/ReactDOMEventReplaying.js
index be5f05f08ecc9..48ff7a5b00190 100644
--- a/packages/react-dom/src/events/ReactDOMEventReplaying.js
+++ b/packages/react-dom/src/events/ReactDOMEventReplaying.js
@@ -12,6 +12,7 @@ import type {Container, SuspenseInstance} from '../client/ReactDOMHostConfig';
 import type {DOMTopLevelEventType} from 'legacy-events/TopLevelEventTypes';
 import type {EventSystemFlags} from 'legacy-events/EventSystemFlags';
 import type {FiberRoot} from 'react-reconciler/src/ReactFiberRoot';
+import type {DOMContainer} from '../client/ReactDOM';
 
 import {
   enableDeprecatedFlareAPI,
@@ -117,7 +118,7 @@ import {
   TOP_BLUR,
 } from './DOMTopLevelEventTypes';
 import {IS_REPLAYED} from 'legacy-events/EventSystemFlags';
-import {listenToTopLevelEvent} from './DOMLegacyEventPluginSystem';
+import {legacyListenToTopLevelEvent} from './DOMLegacyEventPluginSystem';
 
 type QueuedReplayableEvent = {|
   blockedOn: null | Container | SuspenseInstance,
@@ -211,12 +212,12 @@ export function isReplayableDiscreteEvent(
   return discreteReplayableEvents.indexOf(eventType) > -1;
 }
 
-function trapReplayableEvent(
+function trapReplayableEventForDocument(
   topLevelType: DOMTopLevelEventType,
   document: Document,
   listenerMap: Map<DOMTopLevelEventType | string, null | (any => void)>,
 ) {
-  listenToTopLevelEvent(topLevelType, document, listenerMap);
+  legacyListenToTopLevelEvent(topLevelType, document, listenerMap);
   if (enableDeprecatedFlareAPI) {
     // Trap events for the responder system.
     const topLevelTypeString = unsafeCastDOMTopLevelTypeToString(topLevelType);
@@ -236,15 +237,18 @@ function trapReplayableEvent(
   }
 }
 
-export function eagerlyTrapReplayableEvents(document: Document) {
-  const listenerMap = getListenerMapForElement(document);
+export function eagerlyTrapReplayableEvents(
+  container: DOMContainer,
+  document: Document,
+) {
+  const listenerMapForDoc = getListenerMapForElement(document);
   // Discrete
   discreteReplayableEvents.forEach(topLevelType => {
-    trapReplayableEvent(topLevelType, document, listenerMap);
+    trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);
   });
   // Continuous
   continuousReplayableEvents.forEach(topLevelType => {
-    trapReplayableEvent(topLevelType, document, listenerMap);
+    trapReplayableEventForDocument(topLevelType, document, listenerMapForDoc);
   });
 }
 
@@ -252,8 +256,8 @@ function createQueuedReplayableEvent(
   blockedOn: null | Container | SuspenseInstance,
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
-  nativeEvent: AnyNativeEvent,
   container: Document | Element | Node,
+  nativeEvent: AnyNativeEvent,
 ): QueuedReplayableEvent {
   return {
     blockedOn,
@@ -268,15 +272,15 @@ export function queueDiscreteEvent(
   blockedOn: null | Container | SuspenseInstance,
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
-  nativeEvent: AnyNativeEvent,
   container: Document | Element | Node,
+  nativeEvent: AnyNativeEvent,
 ): void {
   const queuedEvent = createQueuedReplayableEvent(
     blockedOn,
     topLevelType,
     eventSystemFlags,
-    nativeEvent,
     container,
+    nativeEvent,
   );
   queuedDiscreteEvents.push(queuedEvent);
   if (enableSelectiveHydration) {
@@ -343,8 +347,8 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
   blockedOn: null | Container | SuspenseInstance,
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
-  nativeEvent: AnyNativeEvent,
   container: Document | Element | Node,
+  nativeEvent: AnyNativeEvent,
 ): QueuedReplayableEvent {
   if (
     existingQueuedEvent === null ||
@@ -354,8 +358,8 @@ function accumulateOrCreateContinuousQueuedReplayableEvent(
       blockedOn,
       topLevelType,
       eventSystemFlags,
-      nativeEvent,
       container,
+      nativeEvent,
     );
     if (blockedOn !== null) {
       let fiber = getInstanceFromNode(blockedOn);
@@ -378,8 +382,8 @@ export function queueIfContinuousEvent(
   blockedOn: null | Container | SuspenseInstance,
   topLevelType: DOMTopLevelEventType,
   eventSystemFlags: EventSystemFlags,
-  nativeEvent: AnyNativeEvent,
   container: Document | Element | Node,
+  nativeEvent: AnyNativeEvent,
 ): boolean {
   // These set relatedTarget to null because the replayed event will be treated as if we
   // moved from outside the window (no target) onto the target once it hydrates.
@@ -392,8 +396,8 @@ export function queueIfContinuousEvent(
         blockedOn,
         topLevelType,
         eventSystemFlags,
-        focusEvent,
         container,
+        focusEvent,
       );
       return true;
     }
@@ -404,8 +408,8 @@ export function queueIfContinuousEvent(
         blockedOn,
         topLevelType,
         eventSystemFlags,
-        dragEvent,
         container,
+        dragEvent,
       );
       return true;
     }
@@ -416,8 +420,8 @@ export function queueIfContinuousEvent(
         blockedOn,
         topLevelType,
         eventSystemFlags,
-        mouseEvent,
         container,
+        mouseEvent,
       );
       return true;
     }
@@ -431,8 +435,8 @@ export function queueIfContinuousEvent(
           blockedOn,
           topLevelType,
           eventSystemFlags,
-          pointerEvent,
           container,
+          pointerEvent,
         ),
       );
       return true;
@@ -447,8 +451,8 @@ export function queueIfContinuousEvent(
           blockedOn,
           topLevelType,
           eventSystemFlags,
-          pointerEvent,
           container,
+          pointerEvent,
         ),
       );
       return true;
@@ -524,8 +528,8 @@ function attemptReplayContinuousQueuedEvent(
   let nextBlockedOn = attemptToDispatchEvent(
     queuedEvent.topLevelType,
     queuedEvent.eventSystemFlags,
-    queuedEvent.nativeEvent,
     queuedEvent.container,
+    queuedEvent.nativeEvent,
   );
   if (nextBlockedOn !== null) {
     // We're still blocked. Try again later.
@@ -567,8 +571,8 @@ function replayUnblockedEvents() {
     let nextBlockedOn = attemptToDispatchEvent(
       nextDiscreteEvent.topLevelType,
       nextDiscreteEvent.eventSystemFlags,
-      nextDiscreteEvent.nativeEvent,
       nextDiscreteEvent.container,
+      nextDiscreteEvent.nativeEvent,
     );
     if (nextBlockedOn !== null) {
       // We're still blocked. Try again later.
diff --git a/packages/react-dom/src/events/SelectEventPlugin.js b/packages/react-dom/src/events/SelectEventPlugin.js
index d1ab609abde6f..a370b225f28d2 100644
--- a/packages/react-dom/src/events/SelectEventPlugin.js
+++ b/packages/react-dom/src/events/SelectEventPlugin.js
@@ -166,11 +166,16 @@ const SelectEventPlugin = {
     nativeEvent,
     nativeEventTarget,
     eventSystemFlags,
+    container,
   ) {
-    const doc = getEventTargetDocument(nativeEventTarget);
+    const containerOrDoc =
+      container || getEventTargetDocument(nativeEventTarget);
     // Track whether all listeners exists for this plugin. If none exist, we do
     // not extract events. See #3639.
-    if (!doc || !isListeningToAllDependencies('onSelect', doc)) {
+    if (
+      !containerOrDoc ||
+      !isListeningToAllDependencies('onSelect', containerOrDoc)
+    ) {
       return null;
     }
 

From b789060dca314f052d856cab509569cf41020cd5 Mon Sep 17 00:00:00 2001
From: Sunil Pai <threepointone@gmail.com>
Date: Thu, 20 Feb 2020 11:30:04 +0000
Subject: [PATCH 24/24] Feature Flag for React.jsx` "spreading a key to jsx"
 warning (#18074)

Adds a feature flag for when React.jsx warns you about spreading a key into jsx. It's false for all builds, except as a dynamic flag for fb/www.

I also included the component name in the warning.
---
 packages/react/src/ReactElementValidator.js    | 18 +++++++++++-------
 .../__tests__/ReactElementJSX-test.internal.js |  3 ++-
 packages/shared/ReactFeatureFlags.js           |  8 ++++++++
 .../forks/ReactFeatureFlags.native-fb.js       |  1 +
 .../forks/ReactFeatureFlags.native-oss.js      |  1 +
 .../forks/ReactFeatureFlags.persistent.js      |  1 +
 .../forks/ReactFeatureFlags.test-renderer.js   |  1 +
 .../ReactFeatureFlags.test-renderer.www.js     |  1 +
 .../shared/forks/ReactFeatureFlags.testing.js  |  1 +
 .../forks/ReactFeatureFlags.testing.www.js     |  1 +
 packages/shared/forks/ReactFeatureFlags.www.js |  1 +
 11 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/react/src/ReactElementValidator.js b/packages/react/src/ReactElementValidator.js
index fa00f30d47d91..2fead4c017576 100644
--- a/packages/react/src/ReactElementValidator.js
+++ b/packages/react/src/ReactElementValidator.js
@@ -21,6 +21,7 @@ import {
   REACT_FRAGMENT_TYPE,
   REACT_ELEMENT_TYPE,
 } from 'shared/ReactSymbols';
+import {warnAboutSpreadingKeyToJSX} from 'shared/ReactFeatureFlags';
 import checkPropTypes from 'prop-types/checkPropTypes';
 
 import ReactCurrentOwner from './ReactCurrentOwner';
@@ -365,13 +366,16 @@ export function jsxWithValidation(
     }
   }
 
-  if (hasOwnProperty.call(props, 'key')) {
-    if (__DEV__) {
-      console.error(
-        'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
-          'Explicitly pass a key after spreading props in your JSX call. ' +
-          'E.g. <ComponentName {...props} key={key} />',
-      );
+  if (__DEV__) {
+    if (warnAboutSpreadingKeyToJSX) {
+      if (hasOwnProperty.call(props, 'key')) {
+        console.error(
+          'React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
+            'Explicitly pass a key after spreading props in your JSX call. ' +
+            'E.g. <%s {...props} key={key} />',
+          getComponentName(type) || 'ComponentName',
+        );
+      }
     }
   }
 
diff --git a/packages/react/src/__tests__/ReactElementJSX-test.internal.js b/packages/react/src/__tests__/ReactElementJSX-test.internal.js
index fce448208c0dc..cb45ed714b78f 100644
--- a/packages/react/src/__tests__/ReactElementJSX-test.internal.js
+++ b/packages/react/src/__tests__/ReactElementJSX-test.internal.js
@@ -32,6 +32,7 @@ describe('ReactElement.jsx', () => {
 
     ReactFeatureFlags = require('shared/ReactFeatureFlags');
     ReactFeatureFlags.enableJSXTransformAPI = true;
+    ReactFeatureFlags.warnAboutSpreadingKeyToJSX = true;
 
     React = require('react');
     ReactDOM = require('react-dom');
@@ -371,7 +372,7 @@ describe('ReactElement.jsx', () => {
     expect(() => ReactDOM.render(React.jsx(Parent, {}), container)).toErrorDev(
       'Warning: React.jsx: Spreading a key to JSX is a deprecated pattern. ' +
         'Explicitly pass a key after spreading props in your JSX call. ' +
-        'E.g. <ComponentName {...props} key={key} />',
+        'E.g. <Child {...props} key={key} />',
     );
   });
 
diff --git a/packages/shared/ReactFeatureFlags.js b/packages/shared/ReactFeatureFlags.js
index abe712ed685e4..383bbe3c248c0 100644
--- a/packages/shared/ReactFeatureFlags.js
+++ b/packages/shared/ReactFeatureFlags.js
@@ -48,6 +48,8 @@ export const disableJavaScriptURLs = false;
 // Control this behavior with a flag to support 16.6 minor releases in the meanwhile.
 export const exposeConcurrentModeAPIs = __EXPERIMENTAL__;
 
+// Warns when a combination of updates on a dom can cause a style declaration
+// that clashes with a previous one https://github.com/facebook/react/pull/14181
 export const warnAboutShorthandPropertyCollision = true;
 
 // Experimental React Flare event system and event components support.
@@ -106,8 +108,14 @@ export const runAllPassiveEffectDestroysBeforeCreates = false;
 // WARNING This flag only has an affect if used with runAllPassiveEffectDestroysBeforeCreates.
 export const deferPassiveEffectCleanupDuringUnmount = false;
 
+// Use this flag to generate "testing" builds, that include APIs like act()
+// and extra warnings/errors
 export const isTestEnvironment = false;
 
+// Enables a warning when trying to spread a 'key' to an element;
+// a deprecated pattern we want to get rid of in the future
+export const warnAboutSpreadingKeyToJSX = false;
+
 // --------------------------
 // Future APIs to be deprecated
 // --------------------------
diff --git a/packages/shared/forks/ReactFeatureFlags.native-fb.js b/packages/shared/forks/ReactFeatureFlags.native-fb.js
index ccbc3bc85f7fc..44fa3a158fd54 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-fb.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-fb.js
@@ -56,6 +56,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.native-oss.js b/packages/shared/forks/ReactFeatureFlags.native-oss.js
index c1f2ad0d43dac..a637eb75d0c2f 100644
--- a/packages/shared/forks/ReactFeatureFlags.native-oss.js
+++ b/packages/shared/forks/ReactFeatureFlags.native-oss.js
@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.persistent.js b/packages/shared/forks/ReactFeatureFlags.persistent.js
index 3cd7a4c13b757..17a66058dc8da 100644
--- a/packages/shared/forks/ReactFeatureFlags.persistent.js
+++ b/packages/shared/forks/ReactFeatureFlags.persistent.js
@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = false;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
index 00176945bc98a..05375f1f04223 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.js
@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true; // this should probably *never* change
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
index 08b934bd589a2..423947d8b6eb9 100644
--- a/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.test-renderer.www.js
@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true; // this should probably *never* change
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.js b/packages/shared/forks/ReactFeatureFlags.testing.js
index 4cf22fa4c42de..f19cecb601e02 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.js
@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.testing.www.js b/packages/shared/forks/ReactFeatureFlags.testing.www.js
index db02d804dadc1..d82f90c473875 100644
--- a/packages/shared/forks/ReactFeatureFlags.testing.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.testing.www.js
@@ -51,6 +51,7 @@ export const deferPassiveEffectCleanupDuringUnmount = false;
 export const runAllPassiveEffectDestroysBeforeCreates = false;
 export const isTestEnvironment = true;
 export const enableModernEventSystem = false;
+export const warnAboutSpreadingKeyToJSX = false;
 
 // Only used in www builds.
 export function addUserTimingListener() {
diff --git a/packages/shared/forks/ReactFeatureFlags.www.js b/packages/shared/forks/ReactFeatureFlags.www.js
index ca181c34c0175..e9d2d9b3f306c 100644
--- a/packages/shared/forks/ReactFeatureFlags.www.js
+++ b/packages/shared/forks/ReactFeatureFlags.www.js
@@ -19,6 +19,7 @@ export const {
   runAllPassiveEffectDestroysBeforeCreates,
   warnAboutShorthandPropertyCollision,
   disableSchedulerTimeoutBasedOnReactExpirationTime,
+  warnAboutSpreadingKeyToJSX,
 } = require('ReactFeatureFlags');
 
 // On WWW, __EXPERIMENTAL__ is used for a new modern build.