Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Reset stateNode in resetWorkInProgress #18448

Merged
merged 2 commits into from Apr 1, 2020
Merged

Reset stateNode in resetWorkInProgress #18448

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
ff5386c
test(SuspenseList): Add failing test for class component
eps1lon Mar 29, 2020
4089176
Reset stateNode when resetWorkInProgress
sebmarkbage Mar 31, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
2 changes: 2 additions & 0 deletions packages/react-reconciler/src/ReactFiber.js
View file
Open in desktop
Expand Up @@ -542,6 +542,8 @@ export function resetWorkInProgress(

workInProgress.dependencies = null;

workInProgress.stateNode = null;

if (enableProfilerTimer) {
// Note: We don't reset the actualTime counts. It's useful to accumulate
// actual time across multiple render passes.
Expand Down
62 changes: 62 additions & 0 deletions packages/react-reconciler/src/__tests__/ReactSuspenseList-test.internal.js
View file
Open in desktop
Expand Up @@ -2485,4 +2485,66 @@ describe('ReactSuspenseList', () => {
</>,
);
});

it('can resume class components when revealed together', async () => {
let A = createAsyncText('A');
let B = createAsyncText('B');

class ClassComponent extends React.Component {
render() {
return this.props.children;
}
}

function Foo() {
return (
<Suspense fallback={<Text text="Loading" />}>
<SuspenseList revealOrder="together">
<ClassComponent>
<Suspense fallback={<Text text="Loading A" />}>
<A />
</Suspense>
</ClassComponent>
<ClassComponent>
<Suspense fallback={<Text text="Loading B" />}>
<B />
</Suspense>
</ClassComponent>
</SuspenseList>
</Suspense>
);
}

await A.resolve();

ReactNoop.render(<Foo />);

expect(Scheduler).toFlushAndYield([
'A',
'Suspend! [B]',
'Loading B',
'Loading A',
'Loading B',
]);

expect(ReactNoop).toMatchRenderedOutput(
<>
<span>Loading A</span>
<span>Loading B</span>
</>,
);

await B.resolve();

ReactNoop.render(<Foo />);

expect(Scheduler).toFlushAndYield(['A', 'B']);

expect(ReactNoop).toMatchRenderedOutput(
<>
<span>A</span>
<span>B</span>
</>,
);
});
});