Update Context.Consumer inside suspended Suspense component

facebook · May 3, 2021 · e03c92e · e03c92e
1 parent 79740da
commit e03c92e
Show file tree

Hide file tree

Showing 2 changed files with 59 additions and 4 deletions.
diff --git a/packages/react-reconciler/src/ReactFiberNewContext.new.js b/packages/react-reconciler/src/ReactFiberNewContext.new.js
@@ -157,10 +157,6 @@ export function scheduleWorkOnParentPath(
       !isSubsetOfLanes(alternate.childLanes, renderLanes)
     ) {
       alternate.childLanes = mergeLanes(alternate.childLanes, renderLanes);
-    } else {
-      // Neither alternate was updated, which means the rest of the
-      // ancestor path already has sufficient priority.
-      break;
     }
     node = node.return;
   }

diff --git a/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js b/packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
@@ -1523,4 +1523,63 @@ describe('ReactSuspense', () => {
       expect(root).toMatchRenderedOutput('new value');
     });
   });
+
+  it('updates context consumer within child of suspended suspense component when context updates', () => {
+    const {createContext, useState} = React;
+
+    const ValueContext = createContext(null);
+
+    const promiseThatNeverResolves = new Promise(() => {});
+    function Child() {
+      return (
+        <ValueContext.Consumer>
+          {value => {
+            Scheduler.unstable_yieldValue(`Received context value [${value}]`);
+            if (value === 'default') return <Text text="default" />;
+            throw promiseThatNeverResolves;
+          }}
+        </ValueContext.Consumer>
+      );
+    }
+
+    let setValue;
+    function Wrapper({children}) {
+      const [value, _setValue] = useState('default');
+      setValue = _setValue;
+      return (
+        <ValueContext.Provider value={value}>{children}</ValueContext.Provider>
+      );
+    }
+
+    function App() {
+      return (
+        <Wrapper>
+          <Suspense fallback={<Text text="Loading..." />}>
+            <Child />
+          </Suspense>
+        </Wrapper>
+      );
+    }
+
+    const root = ReactTestRenderer.create(<App />);
+    expect(Scheduler).toHaveYielded([
+      'Received context value [default]',
+      'default',
+    ]);
+    expect(root).toMatchRenderedOutput('default');
+
+    act(() => setValue('new value'));
+    expect(Scheduler).toHaveYielded([
+      'Received context value [new value]',
+      'Loading...',
+    ]);
+    expect(root).toMatchRenderedOutput('Loading...');
+
+    act(() => setValue('default'));
+    expect(Scheduler).toHaveYielded([
+      'Received context value [default]',
+      'default',
+    ]);
+    expect(root).toMatchRenderedOutput('default');
+  });
 });