Fix shallow renderer set instance state after gDSFP before calling sCU (#14613)

* Fix shallow renderer set instance state after gDSFP before calling sCU
* Update ReactShallowRenderer.js
* Unwind abstraction
* Fewer names

Author: chenesan

packages/react-dom/src/__tests__/ReactComponentLifeCycle-test.js

@@ -1201,6 +1201,40 @@ describe('ReactComponentLifeCycle', () => {
 expect(log).toEqual([]);
 });
 
+it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps',()=>{
+constdivRef=React.createRef();
+classSimpleComponentextendsReact.Component{
+constructor(props){
+super(props);
+this.state={
+value: props.value,
+};
+}
+
+staticgetDerivedStateFromProps(nextProps,prevState){
+if(nextProps.value===prevState.value){
+returnnull;
+}
+return{value: nextProps.value};
+}
+
+shouldComponentUpdate(nextProps,nextState){
+returnnextState.value!==this.state.value;
+}
+
+render(){
+return<divref={divRef}>value: {this.state.value}</div>;
+}
+}
+
+constdiv=document.createElement('div');
+
+ReactDOM.render(<SimpleComponentvalue="initial"/>,div);
+expect(divRef.current.textContent).toBe('value: initial');
+ReactDOM.render(<SimpleComponentvalue="updated"/>,div);
+expect(divRef.current.textContent).toBe('value: updated');
+});
+
 it('should call getSnapshotBeforeUpdate before mutations are committed',()=>{
 constlog=[];
 

packages/react-test-renderer/src/ReactShallowRenderer.js

@@ -529,7 +529,20 @@ class ReactShallowRenderer {
 this._updater,
 );
 
-this._updateStateFromStaticLifecycle(element.props);
+if(typeofelement.type.getDerivedStateFromProps==='function'){
+constpartialState=element.type.getDerivedStateFromProps.call(
+null,
+element.props,
+this._instance.state,
+);
+if(partialState!=null){
+this._instance.state=Object.assign(
+{},
+this._instance.state,
+partialState,
+);
+}
+}
 
 if(element.type.hasOwnProperty('contextTypes')){
 currentlyValidatingElement=element;
@@ -653,10 +666,19 @@ class ReactShallowRenderer {
 }
 }
 }
-this._updateStateFromStaticLifecycle(props);
 
 // Read state after cWRP in case it calls setState
-conststate=this._newState||oldState;
+letstate=this._newState||oldState;
+if(typeoftype.getDerivedStateFromProps=== 'function'){
+constpartialState=type.getDerivedStateFromProps.call(
+null,
+props,
+state,
+);
+if(partialState!=null){
+ state =Object.assign({},state,partialState);
+}
+}
 
  let shouldUpdate = true;
  if (this._forcedUpdate) {
@@ -692,34 +714,14 @@ class ReactShallowRenderer {
 this._instance.context=context;
 this._instance.props=props;
 this._instance.state=state;
+this._newState=null;
 
 if(shouldUpdate){
 this._rendered=this._instance.render();
 }
  // Intentionally do not call componentDidUpdate()
  // because DOM refs are not available.
 }
-
-_updateStateFromStaticLifecycle(props: Object){
-if(this._element===null){
-return;
-}
- const {type} = this._element;
-
- if (typeof type.getDerivedStateFromProps === 'function') {
-constoldState=this._newState||this._instance.state;
-constpartialState=type.getDerivedStateFromProps.call(
-null,
-props,
-oldState,
-);
-
-if(partialState!=null){
-const newState =Object.assign({},oldState,partialState);
-this._instance.state=this._newState=newState;
-}
-}
-}
 }
 
 letcurrentlyValidatingElement=null;

packages/react-test-renderer/src/__tests__/ReactShallowRenderer-test.js

@@ -942,6 +942,42 @@ describe('ReactShallowRenderer', () => {
 expect(result).toEqual(<div>value:1</div>);
 });
 
+it('should pass previous state to shouldComponentUpdate even with getDerivedStateFromProps',()=>{
+classSimpleComponentextendsReact.Component{
+constructor(props){
+super(props);
+this.state={
+value: props.value,
+};
+}
+
+staticgetDerivedStateFromProps(nextProps,prevState){
+if(nextProps.value===prevState.value){
+returnnull;
+}
+return{value: nextProps.value};
+}
+
+shouldComponentUpdate(nextProps,nextState){
+returnnextState.value!==this.state.value;
+}
+
+render(){
+return<div>{`value:${this.state.value}`}</div>;
+}
+}
+
+constshallowRenderer=createRenderer();
+constinitialResult=shallowRenderer.render(
+<SimpleComponentvalue="initial"/>,
+);
+expect(initialResult).toEqual(<div>value:initial</div>);
+constupdatedResult=shallowRenderer.render(
+<SimpleComponentvalue="updated"/>,
+);
+expect(updatedResult).toEqual(<div>value:updated</div>);
+});
+
 it('can setState with an updater function',()=>{
 letinstance;