Skip to content

Commit

Permalink
Fix componentWillReceiveProps when calling setState
Browse files Browse the repository at this point in the history
  • Loading branch information
jamesb3ll committed Dec 15, 2019
1 parent 1a9d7fc commit d269aae
Show file tree
Hide file tree
Showing 2 changed files with 54 additions and 1 deletion.
2 changes: 1 addition & 1 deletion src/diff/index.js
Expand Up @@ -113,7 +113,7 @@ export function diff(
} else {
if (
newType.getDerivedStateFromProps == null &&
c._force == null &&
newProps !== oldProps &&
c.componentWillReceiveProps != null
) {
c.componentWillReceiveProps(newProps, cctx);
Expand Down
53 changes: 53 additions & 0 deletions test/browser/lifecycles/componentWillReceiveProps.test.js
Expand Up @@ -183,6 +183,59 @@ describe('Lifecycle methods', () => {
expect(Inner.prototype.componentWillReceiveProps).to.have.been.called;
});

it('should be called when rerender with new props from parent even with setState/forceUpdate in child', () => {
let setStateAndUpdateProps;
let forceUpdateAndUpdateProps;
let cWRPSpy = sinon.spy();

class Outer extends Component {
constructor(p, c) {
super(p, c);
this.state = { i: 0 };
this.update = this.update.bind(this);
}
update() {
this.setState({ i: this.state.i + 1 });
}
render(props, { i }) {
return <Inner i={i} update={this.update} />;
}
}
class Inner extends Component {
componentDidMount() {
expect(this.props.i).to.be.equal(0);

setStateAndUpdateProps = () => {
this.setState({});
this.props.update();
};
forceUpdateAndUpdateProps = () => {
this.forceUpdate();
this.props.update();
};
}
componentWillReceiveProps(nextProps) {
cWRPSpy(nextProps.i);
}
render() {
return <div />;
}
}
// Initial render
render(<Outer />, scratch);
expect(cWRPSpy).not.to.have.been.called;

// setState in inner component and update with new props
setStateAndUpdateProps();
rerender();
expect(cWRPSpy).to.have.been.calledWith(1);

// forceUpdate in inner component and update with new props
forceUpdateAndUpdateProps();
rerender();
expect(cWRPSpy).to.have.been.calledWith(2);
});

it('should be called in right execution order', () => {
let doRender;
class Outer extends Component {
Expand Down

0 comments on commit d269aae

Please sign in to comment.