From 6121c95baf590e6c4ab0ea697f4f4a07e1d898f0 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Tue, 2 Apr 2024 12:58:01 -0400 Subject: [PATCH 1/3] Refactor: Add resolveClassComponentProps There are a few places in the reconciler where we modify the fiber's internal props object before passing it to userspace. The trickiest one is class components, because the props object gets exposed in many different places, including as a property on the class instance. This was already accounted for when we added support for setting default props on a lazy wrapper (i.e. React.lazy that resolves to a class component). In all of these same places, we will also need to remove the ref prop when enableRefAsProp is on. As a first step, this adds a new function, resolveClassComponentProps, where both default prop resolution and ref prop removal will happen. --- .../src/ReactFiberBeginWork.js | 33 +++++++++------- .../src/ReactFiberClassComponent.js | 38 ++++++++++++++++--- .../src/ReactFiberCommitWork.js | 36 ++++++++---------- .../src/ReactFiberLazyComponent.js | 4 ++ 4 files changed, 72 insertions(+), 39 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberBeginWork.js b/packages/react-reconciler/src/ReactFiberBeginWork.js index bd745e02d12a2..8c7ba485856f2 100644 --- a/packages/react-reconciler/src/ReactFiberBeginWork.js +++ b/packages/react-reconciler/src/ReactFiberBeginWork.js @@ -245,6 +245,7 @@ import { mountClassInstance, resumeMountClassInstance, updateClassInstance, + resolveClassComponentProps, } from './ReactFiberClassComponent'; import {resolveDefaultProps} from './ReactFiberLazyComponent'; import { @@ -1762,9 +1763,9 @@ function mountLazyComponent( // Store the unwrapped component in the type. workInProgress.type = Component; - const resolvedProps = resolveDefaultProps(Component, props); if (typeof Component === 'function') { if (isFunctionClassComponent(Component)) { + const resolvedProps = resolveClassComponentProps(Component, props, false); workInProgress.tag = ClassComponent; if (__DEV__) { workInProgress.type = Component = @@ -1778,6 +1779,7 @@ function mountLazyComponent( renderLanes, ); } else { + const resolvedProps = resolveDefaultProps(Component, props); workInProgress.tag = FunctionComponent; if (__DEV__) { validateFunctionComponentInDev(workInProgress, Component); @@ -1795,6 +1797,7 @@ function mountLazyComponent( } else if (Component !== undefined && Component !== null) { const $$typeof = Component.$$typeof; if ($$typeof === REACT_FORWARD_REF_TYPE) { + const resolvedProps = resolveDefaultProps(Component, props); workInProgress.tag = ForwardRef; if (__DEV__) { workInProgress.type = Component = @@ -1808,6 +1811,7 @@ function mountLazyComponent( renderLanes, ); } else if ($$typeof === REACT_MEMO_TYPE) { + const resolvedProps = resolveDefaultProps(Component, props); workInProgress.tag = MemoComponent; return updateMemoComponent( null, @@ -3938,10 +3942,11 @@ function beginWork( case ClassComponent: { const Component = workInProgress.type; const unresolvedProps = workInProgress.pendingProps; - const resolvedProps = - workInProgress.elementType === Component - ? unresolvedProps - : resolveDefaultProps(Component, unresolvedProps); + const resolvedProps = resolveClassComponentProps( + Component, + unresolvedProps, + workInProgress.elementType === Component, + ); return updateClassComponent( current, workInProgress, @@ -4024,10 +4029,11 @@ function beginWork( } const Component = workInProgress.type; const unresolvedProps = workInProgress.pendingProps; - const resolvedProps = - workInProgress.elementType === Component - ? unresolvedProps - : resolveDefaultProps(Component, unresolvedProps); + const resolvedProps = resolveClassComponentProps( + Component, + unresolvedProps, + workInProgress.elementType === Component, + ); return mountIncompleteClassComponent( current, workInProgress, @@ -4042,10 +4048,11 @@ function beginWork( } const Component = workInProgress.type; const unresolvedProps = workInProgress.pendingProps; - const resolvedProps = - workInProgress.elementType === Component - ? unresolvedProps - : resolveDefaultProps(Component, unresolvedProps); + const resolvedProps = resolveClassComponentProps( + Component, + unresolvedProps, + workInProgress.elementType === Component, + ); return mountIncompleteFunctionComponent( current, workInProgress, diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js index 47d1c3cfee476..56f48bcbd54b0 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.js @@ -34,7 +34,6 @@ import assign from 'shared/assign'; import isArray from 'shared/isArray'; import {REACT_CONTEXT_TYPE, REACT_CONSUMER_TYPE} from 'shared/ReactSymbols'; -import {resolveDefaultProps} from './ReactFiberLazyComponent'; import { DebugTracingMode, NoMode, @@ -1052,10 +1051,11 @@ function updateClassInstance( cloneUpdateQueue(current, workInProgress); const unresolvedOldProps = workInProgress.memoizedProps; - const oldProps = - workInProgress.type === workInProgress.elementType - ? unresolvedOldProps - : resolveDefaultProps(workInProgress.type, unresolvedOldProps); + const oldProps = resolveClassComponentProps( + ctor, + unresolvedOldProps, + workInProgress.type === workInProgress.elementType, + ); instance.props = oldProps; const unresolvedNewProps = workInProgress.pendingProps; @@ -1225,6 +1225,34 @@ function updateClassInstance( return shouldUpdate; } +export function resolveClassComponentProps( + Component: any, + baseProps: Object, + // Only resolve default props if this is a lazy component. Otherwise, they + // would have already been resolved by the JSX runtime. + // TODO: We're going to remove default prop resolution from the JSX runtime + // and keep it only for class components. As part of that change, we should + // remove this extra check. + alreadyResolvedDefaultProps: boolean, +): Object { + let newProps = baseProps; + + // Resolve default props. Taken from old JSX runtime, where this used to live. + const defaultProps = Component.defaultProps; + if (defaultProps && !alreadyResolvedDefaultProps) { + newProps = assign({}, newProps, baseProps); + for (const propName in defaultProps) { + if (newProps[propName] === undefined) { + newProps[propName] = defaultProps[propName]; + } + } + } + + // TODO: Remove ref from props object + + return newProps; +} + export { constructClassInstance, mountClassInstance, diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index ba11d5b6149b2..04ad52fec8d58 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -104,7 +104,7 @@ import { setCurrentFiber as setCurrentDebugFiberInDEV, getCurrentFiber as getCurrentDebugFiberInDEV, } from './ReactCurrentFiber'; -import {resolveDefaultProps} from './ReactFiberLazyComponent'; +import {resolveClassComponentProps} from './ReactFiberClassComponent'; import { isCurrentUpdateNested, getCommitTime, @@ -471,7 +471,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { // TODO: revisit this when we implement resuming. if (__DEV__) { if ( - finishedWork.type === finishedWork.elementType && + !finishedWork.type.defaultProps && !didWarnAboutReassigningProps ) { if (instance.props !== finishedWork.memoizedProps) { @@ -497,9 +497,11 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { } } const snapshot = instance.getSnapshotBeforeUpdate( - finishedWork.elementType === finishedWork.type - ? prevProps - : resolveDefaultProps(finishedWork.type, prevProps), + resolveClassComponentProps( + finishedWork.type, + prevProps, + finishedWork.elementType === finishedWork.type, + ), prevState, ); if (__DEV__) { @@ -806,10 +808,7 @@ function commitClassLayoutLifecycles( // but instead we rely on them being set during last render. // TODO: revisit this when we implement resuming. if (__DEV__) { - if ( - finishedWork.type === finishedWork.elementType && - !didWarnAboutReassigningProps - ) { + if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) { if (instance.props !== finishedWork.memoizedProps) { console.error( 'Expected %s props to match memoized props before ' + @@ -848,19 +847,17 @@ function commitClassLayoutLifecycles( } } } else { - const prevProps = - finishedWork.elementType === finishedWork.type - ? current.memoizedProps - : resolveDefaultProps(finishedWork.type, current.memoizedProps); + const prevProps = resolveClassComponentProps( + finishedWork.type, + current.memoizedProps, + finishedWork.elementType === finishedWork.type, + ); const prevState = current.memoizedState; // We could update instance props and state here, // but instead we rely on them being set during last render. // TODO: revisit this when we implement resuming. if (__DEV__) { - if ( - finishedWork.type === finishedWork.elementType && - !didWarnAboutReassigningProps - ) { + if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) { if (instance.props !== finishedWork.memoizedProps) { console.error( 'Expected %s props to match memoized props before ' + @@ -917,10 +914,7 @@ function commitClassCallbacks(finishedWork: Fiber) { if (updateQueue !== null) { const instance = finishedWork.stateNode; if (__DEV__) { - if ( - finishedWork.type === finishedWork.elementType && - !didWarnAboutReassigningProps - ) { + if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) { if (instance.props !== finishedWork.memoizedProps) { console.error( 'Expected %s props to match memoized props before ' + diff --git a/packages/react-reconciler/src/ReactFiberLazyComponent.js b/packages/react-reconciler/src/ReactFiberLazyComponent.js index b66f8efe4ed1b..b6c28f0ed5cce 100644 --- a/packages/react-reconciler/src/ReactFiberLazyComponent.js +++ b/packages/react-reconciler/src/ReactFiberLazyComponent.js @@ -10,6 +10,10 @@ import assign from 'shared/assign'; export function resolveDefaultProps(Component: any, baseProps: Object): Object { + // TODO: Remove support for default props for everything except class + // components, including setting default props on a lazy wrapper around a + // class type. + if (Component && Component.defaultProps) { // Resolve default props. Taken from ReactElement const props = assign({}, baseProps); From 8a13ea0b7a4b161add410779e0abe2cd4cc230d2 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Tue, 2 Apr 2024 13:21:58 -0400 Subject: [PATCH 2/3] Fix: Class components should "consume" ref prop When a ref is passed to a class component, the class instance is attached to the ref's current property automatically. This different from function components, where you have to do something extra to attach a ref to an instance, like passing the ref to `useImperativeHandle`. Existing class component code is written with the assumption that a ref will not be passed through as a prop. For example, class components that act as indirections often spread `this.props` onto a child component. To maintain this expectation, we should remove the ref from the props object ("consume" it) before passing it to lifecycle methods. Without this change, much existing code will break because the ref will attach to the inner component instead of the outer one. This is not an issue for function components because we used to warn if you passed a ref to a function component. Instead, you had to use `forwardRef`, which also implements this "consuming" behavior. Co-authored-by: Jan Kassens --- .../__tests__/ReactCompositeComponent-test.js | 18 +--- .../src/ReactFiberClassComponent.js | 11 ++- .../src/ReactFiberCommitWork.js | 19 +++- .../ReactClassComponentPropResolution-test.js | 92 +++++++++++++++++++ .../src/__tests__/ReactCreateElement-test.js | 2 +- .../src/__tests__/ReactJSXRuntime-test.js | 2 +- 6 files changed, 123 insertions(+), 21 deletions(-) create mode 100644 packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js diff --git a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js index 2e56a911a0c38..ba3118bc651b0 100644 --- a/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js +++ b/packages/react-dom/src/__tests__/ReactCompositeComponent-test.js @@ -261,29 +261,17 @@ describe('ReactCompositeComponent', () => { await act(() => { root.render(); }); - if (gate(flags => flags.enableRefAsProp)) { - expect(instance1.props).toEqual({prop: 'testKey', ref: refFn1}); - } else { - expect(instance1.props).toEqual({prop: 'testKey'}); - } + expect(instance1.props).toEqual({prop: 'testKey'}); await act(() => { root.render(); }); - if (gate(flags => flags.enableRefAsProp)) { - expect(instance2.props).toEqual({prop: 'testKey', ref: refFn2}); - } else { - expect(instance2.props).toEqual({prop: 'testKey'}); - } + expect(instance2.props).toEqual({prop: 'testKey'}); await act(() => { root.render(); }); - if (gate(flags => flags.enableRefAsProp)) { - expect(instance3.props).toEqual({prop: null, ref: refFn3}); - } else { - expect(instance3.props).toEqual({prop: null}); - } + expect(instance3.props).toEqual({prop: null}); }); it('should not mutate passed-in props object', async () => { diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js index 56f48bcbd54b0..07db228a5af19 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.js @@ -23,6 +23,7 @@ import { enableDebugTracing, enableSchedulingProfiler, enableLazyContextPropagation, + enableRefAsProp, } from 'shared/ReactFeatureFlags'; import ReactStrictModeWarnings from './ReactStrictModeWarnings'; import {isMounted} from './ReactFiberTreeReflection'; @@ -1248,7 +1249,15 @@ export function resolveClassComponentProps( } } - // TODO: Remove ref from props object + if (enableRefAsProp) { + // Remove ref from the props object, if it exists. + if ('ref' in newProps) { + if (newProps === baseProps) { + newProps = assign({}, newProps); + } + delete newProps.ref; + } + } return newProps; } diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 04ad52fec8d58..883c9b232cfcf 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -472,6 +472,7 @@ function commitBeforeMutationEffectsOnFiber(finishedWork: Fiber) { if (__DEV__) { if ( !finishedWork.type.defaultProps && + !('ref' in finishedWork.memoizedProps) && !didWarnAboutReassigningProps ) { if (instance.props !== finishedWork.memoizedProps) { @@ -808,7 +809,11 @@ function commitClassLayoutLifecycles( // but instead we rely on them being set during last render. // TODO: revisit this when we implement resuming. if (__DEV__) { - if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) { + if ( + !finishedWork.type.defaultProps && + !('ref' in finishedWork.memoizedProps) && + !didWarnAboutReassigningProps + ) { if (instance.props !== finishedWork.memoizedProps) { console.error( 'Expected %s props to match memoized props before ' + @@ -857,7 +862,11 @@ function commitClassLayoutLifecycles( // but instead we rely on them being set during last render. // TODO: revisit this when we implement resuming. if (__DEV__) { - if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) { + if ( + !finishedWork.type.defaultProps && + !('ref' in finishedWork.memoizedProps) && + !didWarnAboutReassigningProps + ) { if (instance.props !== finishedWork.memoizedProps) { console.error( 'Expected %s props to match memoized props before ' + @@ -914,7 +923,11 @@ function commitClassCallbacks(finishedWork: Fiber) { if (updateQueue !== null) { const instance = finishedWork.stateNode; if (__DEV__) { - if (!finishedWork.type.defaultProps && !didWarnAboutReassigningProps) { + if ( + !finishedWork.type.defaultProps && + !('ref' in finishedWork.memoizedProps) && + !didWarnAboutReassigningProps + ) { if (instance.props !== finishedWork.memoizedProps) { console.error( 'Expected %s props to match memoized props before ' + diff --git a/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js b/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js new file mode 100644 index 0000000000000..576c6991af065 --- /dev/null +++ b/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js @@ -0,0 +1,92 @@ +/** + * Copyright (c) Meta Platforms, Inc. and affiliates. + * + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * + * @emails react-core + */ + +'use strict'; + +let React; +let ReactNoop; +let Scheduler; +let act; +let assertLog; + +describe('ReactClassComponentPropResolution', () => { + beforeEach(() => { + jest.resetModules(); + + React = require('react'); + ReactNoop = require('react-noop-renderer'); + Scheduler = require('scheduler'); + act = require('internal-test-utils').act; + assertLog = require('internal-test-utils').assertLog; + }); + + function Text({text}) { + Scheduler.log(text); + return text; + } + + test('resolves ref and default props before calling lifecycle methods', async () => { + const root = ReactNoop.createRoot(); + + function getPropKeys(props) { + return Object.keys(props).join(', '); + } + + class Component extends React.Component { + shouldComponentUpdate(props) { + Scheduler.log( + 'shouldComponentUpdate (prev props): ' + getPropKeys(this.props), + ); + Scheduler.log( + 'shouldComponentUpdate (next props): ' + getPropKeys(props), + ); + return true; + } + componentDidUpdate(props) { + Scheduler.log('componentDidUpdate (prev props): ' + getPropKeys(props)); + Scheduler.log( + 'componentDidUpdate (next props): ' + getPropKeys(this.props), + ); + return true; + } + componentDidMount() { + Scheduler.log('componentDidMount: ' + getPropKeys(this.props)); + return true; + } + render() { + return ; + } + } + + Component.defaultProps = { + default: 'yo', + }; + + // `ref` should never appear as a prop. `default` always should. + + // Mount + const ref = React.createRef(); + await act(async () => { + root.render(); + }); + assertLog(['render: text, default', 'componentDidMount: text, default']); + + // Update + await act(async () => { + root.render(); + }); + assertLog([ + 'shouldComponentUpdate (prev props): text, default', + 'shouldComponentUpdate (next props): text, default', + 'render: text, default', + 'componentDidUpdate (prev props): text, default', + 'componentDidUpdate (next props): text, default', + ]); + }); +}); diff --git a/packages/react/src/__tests__/ReactCreateElement-test.js b/packages/react/src/__tests__/ReactCreateElement-test.js index cf372a33e35f0..c4a2d66310492 100644 --- a/packages/react/src/__tests__/ReactCreateElement-test.js +++ b/packages/react/src/__tests__/ReactCreateElement-test.js @@ -90,7 +90,7 @@ describe('ReactCreateElement', () => { ); }); - // @gate !enableRefAsProp + // @gate !enableRefAsProp || !__DEV__ it('should warn when `ref` is being accessed', async () => { class Child extends React.Component { render() { diff --git a/packages/react/src/__tests__/ReactJSXRuntime-test.js b/packages/react/src/__tests__/ReactJSXRuntime-test.js index 1c57954b205c4..d250792583271 100644 --- a/packages/react/src/__tests__/ReactJSXRuntime-test.js +++ b/packages/react/src/__tests__/ReactJSXRuntime-test.js @@ -244,7 +244,7 @@ describe('ReactJSXRuntime', () => { ); }); - // @gate !enableRefAsProp + // @gate !enableRefAsProp || !__DEV__ it('should warn when `ref` is being accessed', async () => { const container = document.createElement('div'); class Child extends React.Component { From bc1fac0e9da23990469d328e330aafdd364759b8 Mon Sep 17 00:00:00 2001 From: Andrew Clark Date: Tue, 2 Apr 2024 22:23:30 -0400 Subject: [PATCH 3/3] Fix places where class props aren't resolved Noticed these once I enabled class prop resolution in more places. Technically this was already observable if you wrapped a class with `React.lazy` and gave that wrapper default props, but since that was so rare it was never reported. --- .../src/ReactFiberClassComponent.js | 18 ++++++-- .../src/ReactFiberCommitWork.js | 6 ++- .../ReactClassComponentPropResolution-test.js | 43 ++++++++++++++++++- 3 files changed, 62 insertions(+), 5 deletions(-) diff --git a/packages/react-reconciler/src/ReactFiberClassComponent.js b/packages/react-reconciler/src/ReactFiberClassComponent.js index 07db228a5af19..697be25eee678 100644 --- a/packages/react-reconciler/src/ReactFiberClassComponent.js +++ b/packages/react-reconciler/src/ReactFiberClassComponent.js @@ -904,7 +904,12 @@ function resumeMountClassInstance( ): boolean { const instance = workInProgress.stateNode; - const oldProps = workInProgress.memoizedProps; + const unresolvedOldProps = workInProgress.memoizedProps; + const oldProps = resolveClassComponentProps( + ctor, + unresolvedOldProps, + workInProgress.type === workInProgress.elementType, + ); instance.props = oldProps; const oldContext = instance.context; @@ -926,6 +931,13 @@ function resumeMountClassInstance( typeof getDerivedStateFromProps === 'function' || typeof instance.getSnapshotBeforeUpdate === 'function'; + // When comparing whether props changed, we should compare using the + // unresolved props object that is stored on the fiber, rather than the + // one that gets assigned to the instance, because that object may have been + // cloned to resolve default props and/or remove `ref`. + const unresolvedNewProps = workInProgress.pendingProps; + const didReceiveNewProps = unresolvedNewProps !== unresolvedOldProps; + // Note: During these life-cycles, instance.props/instance.state are what // ever the previously attempted to render - not the "current". However, // during componentDidUpdate we pass the "current" props. @@ -937,7 +949,7 @@ function resumeMountClassInstance( (typeof instance.UNSAFE_componentWillReceiveProps === 'function' || typeof instance.componentWillReceiveProps === 'function') ) { - if (oldProps !== newProps || oldContext !== nextContext) { + if (didReceiveNewProps || oldContext !== nextContext) { callComponentWillReceiveProps( workInProgress, instance, @@ -955,7 +967,7 @@ function resumeMountClassInstance( suspendIfUpdateReadFromEntangledAsyncAction(); newState = workInProgress.memoizedState; if ( - oldProps === newProps && + !didReceiveNewProps && oldState === newState && !hasContextChanged() && !checkHasForceUpdateAfterProcessing() diff --git a/packages/react-reconciler/src/ReactFiberCommitWork.js b/packages/react-reconciler/src/ReactFiberCommitWork.js index 883c9b232cfcf..213ff26d82e2c 100644 --- a/packages/react-reconciler/src/ReactFiberCommitWork.js +++ b/packages/react-reconciler/src/ReactFiberCommitWork.js @@ -244,7 +244,11 @@ function shouldProfile(current: Fiber): boolean { } function callComponentWillUnmountWithTimer(current: Fiber, instance: any) { - instance.props = current.memoizedProps; + instance.props = resolveClassComponentProps( + current.type, + current.memoizedProps, + current.elementType === current.type, + ); instance.state = current.memoizedState; if (shouldProfile(current)) { try { diff --git a/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js b/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js index 576c6991af065..53f3a3d04b564 100644 --- a/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js +++ b/packages/react-reconciler/src/__tests__/ReactClassComponentPropResolution-test.js @@ -39,6 +39,10 @@ describe('ReactClassComponentPropResolution', () => { } class Component extends React.Component { + constructor(props) { + super(props); + Scheduler.log('constructor: ' + getPropKeys(props)); + } shouldComponentUpdate(props) { Scheduler.log( 'shouldComponentUpdate (prev props): ' + getPropKeys(this.props), @@ -59,6 +63,28 @@ describe('ReactClassComponentPropResolution', () => { Scheduler.log('componentDidMount: ' + getPropKeys(this.props)); return true; } + UNSAFE_componentWillMount() { + Scheduler.log('componentWillMount: ' + getPropKeys(this.props)); + } + UNSAFE_componentWillReceiveProps(nextProps) { + Scheduler.log( + 'componentWillReceiveProps (prev props): ' + getPropKeys(this.props), + ); + Scheduler.log( + 'componentWillReceiveProps (next props): ' + getPropKeys(nextProps), + ); + } + UNSAFE_componentWillUpdate(nextProps) { + Scheduler.log( + 'componentWillUpdate (prev props): ' + getPropKeys(this.props), + ); + Scheduler.log( + 'componentWillUpdate (next props): ' + getPropKeys(nextProps), + ); + } + componentWillUnmount() { + Scheduler.log('componentWillUnmount: ' + getPropKeys(this.props)); + } render() { return ; } @@ -75,18 +101,33 @@ describe('ReactClassComponentPropResolution', () => { await act(async () => { root.render(); }); - assertLog(['render: text, default', 'componentDidMount: text, default']); + assertLog([ + 'constructor: text, default', + 'componentWillMount: text, default', + 'render: text, default', + 'componentDidMount: text, default', + ]); // Update await act(async () => { root.render(); }); assertLog([ + 'componentWillReceiveProps (prev props): text, default', + 'componentWillReceiveProps (next props): text, default', 'shouldComponentUpdate (prev props): text, default', 'shouldComponentUpdate (next props): text, default', + 'componentWillUpdate (prev props): text, default', + 'componentWillUpdate (next props): text, default', 'render: text, default', 'componentDidUpdate (prev props): text, default', 'componentDidUpdate (next props): text, default', ]); + + // Unmount + await act(async () => { + root.render(null); + }); + assertLog(['componentWillUnmount: text, default']); }); });