@samitouri / QOS-React / commits / 0f334553c9

Reset stateNode in resetWorkInProgress (#18448)

* test(SuspenseList): Add failing test for class component * Reset stateNode when resetWorkInProgress This is supposed to put the Fiber into the same state as if it was just created by child fiber reconciliation. For newly created fibers, that means that stateNode is null. Co-authored-by: Sebastian Silbermann <silbermann.sebastian@gmail.com>

Sebastian Markbåge committed Mar 31, 2020 at 21:14 UTC 0f334553c9558a56037b481fedc9b9fcad3643e7
2 files changed +64
packages/react-reconciler/src/ReactFiber.js
+2
@@ -542,6 +542,8 @@ export function resetWorkInProgress(
542
543 workInProgress.dependencies = null;
544
545 + workInProgress.stateNode = null;
546 +
547 if (enableProfilerTimer) {
548 // Note: We don't reset the actualTime counts. It's useful to accumulate
549 // actual time across multiple render passes.
packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js
+62
@@ -2485,4 +2485,66 @@ describe('ReactSuspenseList', () => {
2485 </>,
2486 );
2487 });
2488 +
2489 + it('can resume class components when revealed together', async () => {
2490 + let A = createAsyncText('A');
2491 + let B = createAsyncText('B');
2492 +
2493 + class ClassComponent extends React.Component {
2494 + render() {
2495 + return this.props.children;
2496 + }
2497 + }
2498 +
2499 + function Foo() {
2500 + return (
2501 + <Suspense fallback={<Text text="Loading" />}>
2502 + <SuspenseList revealOrder="together">
2503 + <ClassComponent>
2504 + <Suspense fallback={<Text text="Loading A" />}>
2505 + <A />
2506 + </Suspense>
2507 + </ClassComponent>
2508 + <ClassComponent>
2509 + <Suspense fallback={<Text text="Loading B" />}>
2510 + <B />
2511 + </Suspense>
2512 + </ClassComponent>
2513 + </SuspenseList>
2514 + </Suspense>
2515 + );
2516 + }
2517 +
2518 + await A.resolve();
2519 +
2520 + ReactNoop.render(<Foo />);
2521 +
2522 + expect(Scheduler).toFlushAndYield([
2523 + 'A',
2524 + 'Suspend! [B]',
2525 + 'Loading B',
2526 + 'Loading A',
2527 + 'Loading B',
2528 + ]);
2529 +
2530 + expect(ReactNoop).toMatchRenderedOutput(
2531 + <>
2532 + <span>Loading A</span>
2533 + <span>Loading B</span>
2534 + </>,
2535 + );
2536 +
2537 + await B.resolve();
2538 +
2539 + ReactNoop.render(<Foo />);
2540 +
2541 + expect(Scheduler).toFlushAndYield(['A', 'B']);
2542 +
2543 + expect(ReactNoop).toMatchRenderedOutput(
2544 + <>
2545 + <span>A</span>
2546 + <span>B</span>
2547 + </>,
2548 + );
2549 + });
2550 });