Remove errant return assignment (#14164)
Oopsie! This could have been avoided if our types were modeled correctly with Flow (using a disjoint union). Fuzz tester didn't catch it because it does not generate cases where a Suspense component mounts with no children. I'll update it.
Andrew Clark committed
Nov 8, 2018 at 18:13 UTC
4b163fee1c494c35ac8b4ba49cd41e9c573b7a7b
2 files changed
+38
-2
packages/react-reconciler/src/ReactFiberBeginWork.js
+1
-2
@@ -1242,7 +1242,7 @@ function updateSuspenseComponent(
1242
} else {
1243
// The current tree has not already timed out. That means the primary
1244
// children are not wrapped in a fragment fiber.
1245
- const currentPrimaryChild: Fiber = (current.child: any);
1245
+ const currentPrimaryChild = current.child;
1246
if (nextDidTimeout) {
1247
// Timed out. Wrap the children in a fragment fiber to keep them
1248
// separate from the fallback children.
@@ -1256,7 +1256,6 @@ function updateSuspenseComponent(
1256
null,
1257
);
1258
primaryChildFragment.child = currentPrimaryChild;
1259
- currentPrimaryChild.return = primaryChildFragment;
1259
1260
// Even though we're creating a new fiber, there are no new children,
1261
// because we're reusing an already mounted tree. So we don't need to
packages/react-reconciler/src/__tests__/ReactSuspense-test.internal.js
+37
@@ -883,7 +883,44 @@ describe('ReactSuspense', () => {
883
884
root.update(null);
885
expect(root).toFlushWithoutYielding();
886
+ jest.advanceTimersByTime(1000);
887
+ });
888
+
889
+ it('#14162', () => {
890
+ const {lazy} = React;
891
+
892
+ function Hello() {
893
+ return <span>hello</span>;
894
+ }
895
+
896
+ async function fetchComponent() {
897
+ return new Promise(r => {
898
+ // simulating a delayed import() call
899
+ setTimeout(r, 1000, {default: Hello});
900
+ });
901
+ }
902
+
903
+ const LazyHello = lazy(fetchComponent);
904
+
905
+ class App extends React.Component {
906
+ state = {render: false};
907
+
908
+ componentDidMount() {
909
+ setTimeout(() => this.setState({render: true}));
910
+ }
911
+
912
+ render() {
913
+ return (
914
+ <Suspense fallback={<span>loading...</span>}>
915
+ {this.state.render && <LazyHello />}
916
+ </Suspense>
917
+ );
918
+ }
919
+ }
920
+
921
+ const root = ReactTestRenderer.create(null);
922
923
+ root.update(<App name="world" />);
924
jest.advanceTimersByTime(1000);
925
});
926
});