@samitouri / QOS-React-2 / commits / 811022232e

Always trigger componentWillUnmount in StrictMode (#26842)

<!-- Thanks for submitting a pull request! We appreciate you spending the time to work on these changes. Please provide enough information so that others can review your pull request. The three fields below are mandatory. Before submitting a pull request, please make sure the following is done: 1. Fork [the repository](https://github.com/facebook/react) and create your branch from `main`. 2. Run `yarn` in the repository root. 3. If you've fixed a bug or added code that should be tested, add tests! 4. Ensure the test suite passes (`yarn test`). Tip: `yarn test --watch TestName` is helpful in development. 5. Run `yarn test --prod` to test in the production environment. It supports the same options as `yarn test`. 6. If you need a debugger, run `yarn test --debug --watch TestName`, open `chrome://inspect`, and press "Inspect". 7. Format your code with [prettier](https://github.com/prettier/prettier) (`yarn prettier`). 8. Make sure your code lints (`yarn lint`). Tip: `yarn linc` to only check changed files. 9. Run the [Flow](https://flowtype.org/) type checks (`yarn flow`). 10. If you haven't already, complete the CLA. Learn more about contributing: https://reactjs.org/docs/how-to-contribute.html --> ## Summary <!-- Explain the **motivation** for making this change. What existing problem does the pull request solve? --> In StrictMode, React currently only triggers `componentWillUnmount` if `componentDidMount` is defined. This would miss detecting issues like initializing resources in constructor or componentWillMount, for example: ``` class Component { constructor() { this._subscriptions = new Subscriptions(); } componentWillUnmount() { this._subscriptions.reset(); } } ``` The PR makes `componentWillUnmount` always run in StrictMode. ## How did you test this change? <!-- Demonstrate the code is solid. Example: The exact commands you ran and their output, screenshots / videos if the pull request changes the user interface. How exactly did you verify that your PR solves the issue you wanted to solve? If you leave this empty, your PR will very likely be closed. --> `yarn test ci`

Tianyu Yao committed Jun 1, 2023 at 10:34 UTC 811022232efed62a3c943701bc99d18655bc78b3
3 files changed +138 -25
packages/react-reconciler/src/ReactFiberClassComponent.js
+16 -21
@@ -10,7 +10,6 @@
10 import type {Fiber} from './ReactInternalTypes';
11 import type {Lanes} from './ReactFiberLane';
12 import type {UpdateQueue} from './ReactFiberClassUpdateQueue';
13 -import type {Flags} from './ReactFiberFlags';
13
14 import {
15 LayoutStatic,
@@ -897,11 +896,10 @@ function mountClassInstance(
896 }
897
898 if (typeof instance.componentDidMount === 'function') {
900 - let fiberFlags: Flags = Update | LayoutStatic;
901 - if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
902 - fiberFlags |= MountLayoutDev;
903 - }
904 - workInProgress.flags |= fiberFlags;
899 + workInProgress.flags |= Update | LayoutStatic;
900 + }
901 + if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
902 + workInProgress.flags |= MountLayoutDev;
903 }
904 }
905
@@ -971,11 +969,10 @@ function resumeMountClassInstance(
969 // If an update was already in progress, we should schedule an Update
970 // effect even though we're bailing out, so that cWU/cDU are called.
971 if (typeof instance.componentDidMount === 'function') {
974 - let fiberFlags: Flags = Update | LayoutStatic;
975 - if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
976 - fiberFlags |= MountLayoutDev;
977 - }
978 - workInProgress.flags |= fiberFlags;
972 + workInProgress.flags |= Update | LayoutStatic;
973 + }
974 + if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
975 + workInProgress.flags |= MountLayoutDev;
976 }
977 return false;
978 }
@@ -1018,21 +1015,19 @@ function resumeMountClassInstance(
1015 }
1016 }
1017 if (typeof instance.componentDidMount === 'function') {
1021 - let fiberFlags: Flags = Update | LayoutStatic;
1022 - if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
1023 - fiberFlags |= MountLayoutDev;
1024 - }
1025 - workInProgress.flags |= fiberFlags;
1018 + workInProgress.flags |= Update | LayoutStatic;
1019 + }
1020 + if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
1021 + workInProgress.flags |= MountLayoutDev;
1022 }
1023 } else {
1024 // If an update was already in progress, we should schedule an Update
1025 // effect even though we're bailing out, so that cWU/cDU are called.
1026 if (typeof instance.componentDidMount === 'function') {
1031 - let fiberFlags: Flags = Update | LayoutStatic;
1032 - if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
1033 - fiberFlags |= MountLayoutDev;
1034 - }
1035 - workInProgress.flags |= fiberFlags;
1027 + workInProgress.flags |= Update | LayoutStatic;
1028 + }
1029 + if (__DEV__ && (workInProgress.mode & StrictEffectsMode) !== NoMode) {
1030 + workInProgress.flags |= MountLayoutDev;
1031 }
1032
1033 // If shouldComponentUpdate returned false, we should still update the
packages/react-reconciler/src/ReactFiberCommitWork.js
+6 -4
@@ -4572,10 +4572,12 @@ function invokeLayoutEffectMountInDEV(fiber: Fiber): void {
4572 }
4573 case ClassComponent: {
4574 const instance = fiber.stateNode;
4575 - try {
4576 - instance.componentDidMount();
4577 - } catch (error) {
4578 - captureCommitPhaseError(fiber, fiber.return, error);
4575 + if (typeof instance.componentDidMount === 'function') {
4576 + try {
4577 + instance.componentDidMount();
4578 + } catch (error) {
4579 + captureCommitPhaseError(fiber, fiber.return, error);
4580 + }
4581 }
4582 break;
4583 }
packages/react-reconciler/src/__tests__/StrictEffectsMode-test.js
+116
@@ -349,6 +349,47 @@ describe('StrictEffectsMode', () => {
349 assertLog(['componentWillUnmount']);
350 });
351
352 + it('invokes componentWillUnmount for class components without componentDidMount', async () => {
353 + class App extends React.PureComponent {
354 + componentDidUpdate() {
355 + Scheduler.log('componentDidUpdate');
356 + }
357 +
358 + componentWillUnmount() {
359 + Scheduler.log('componentWillUnmount');
360 + }
361 +
362 + render() {
363 + return this.props.text;
364 + }
365 + }
366 +
367 + let renderer;
368 + await act(() => {
369 + renderer = ReactTestRenderer.create(<App text={'mount'} />, {
370 + unstable_isConcurrent: true,
371 + });
372 + });
373 +
374 + if (supportsDoubleInvokeEffects()) {
375 + assertLog(['componentWillUnmount']);
376 + } else {
377 + assertLog([]);
378 + }
379 +
380 + await act(() => {
381 + renderer.update(<App text={'update'} />);
382 + });
383 +
384 + assertLog(['componentDidUpdate']);
385 +
386 + await act(() => {
387 + renderer.unmount();
388 + });
389 +
390 + assertLog(['componentWillUnmount']);
391 + });
392 +
393 it('should not double invoke class lifecycles in legacy mode', async () => {
394 class App extends React.PureComponent {
395 componentDidMount() {
@@ -590,4 +631,79 @@ describe('StrictEffectsMode', () => {
631 'useEffect unmount',
632 ]);
633 });
634 +
635 + it('classes without componentDidMount and functions are double invoked together correctly', async () => {
636 + class ClassChild extends React.PureComponent {
637 + componentWillUnmount() {
638 + Scheduler.log('componentWillUnmount');
639 + }
640 +
641 + render() {
642 + return this.props.text;
643 + }
644 + }
645 +
646 + function FunctionChild({text}) {
647 + React.useEffect(() => {
648 + Scheduler.log('useEffect mount');
649 + return () => Scheduler.log('useEffect unmount');
650 + });
651 + React.useLayoutEffect(() => {
652 + Scheduler.log('useLayoutEffect mount');
653 + return () => Scheduler.log('useLayoutEffect unmount');
654 + });
655 + return text;
656 + }
657 +
658 + function App({text}) {
659 + return (
660 + <>
661 + <ClassChild text={text} />
662 + <FunctionChild text={text} />
663 + </>
664 + );
665 + }
666 +
667 + let renderer;
668 + await act(() => {
669 + renderer = ReactTestRenderer.create(<App text={'mount'} />, {
670 + unstable_isConcurrent: true,
671 + });
672 + });
673 +
674 + if (supportsDoubleInvokeEffects()) {
675 + assertLog([
676 + 'useLayoutEffect mount',
677 + 'useEffect mount',
678 + 'componentWillUnmount',
679 + 'useLayoutEffect unmount',
680 + 'useEffect unmount',
681 + 'useLayoutEffect mount',
682 + 'useEffect mount',
683 + ]);
684 + } else {
685 + assertLog(['useLayoutEffect mount', 'useEffect mount']);
686 + }
687 +
688 + await act(() => {
689 + renderer.update(<App text={'mount'} />);
690 + });
691 +
692 + assertLog([
693 + 'useLayoutEffect unmount',
694 + 'useLayoutEffect mount',
695 + 'useEffect unmount',
696 + 'useEffect mount',
697 + ]);
698 +
699 + await act(() => {
700 + renderer.unmount();
701 + });
702 +
703 + assertLog([
704 + 'componentWillUnmount',
705 + 'useLayoutEffect unmount',
706 + 'useEffect unmount',
707 + ]);
708 + });
709 });