Manfred Cheung Manfred Cheung - 3 months ago 12
React JSX Question

React props only update on render when re-rendering

When I try re-rendering a react component with different props compared to the initial render, I can only see the updated prop values when render is called. All previous lifecycle methods return the old prop value.

For example, the following code...

componentWillReceiveProps() {
console.log("componentWillReceiveProps");
console.log(this.props.calls);
}

shouldComponentUpdate() {
console.log("shouldComponentUpdate");
console.log(this.props.calls);
return true;
}

componentWillUpdate() {
console.log("componentWillUpdate");
console.log(this.props.calls);
}

componentDidUpdate() {
console.log("componentDidUpdate");
console.log(this.props.calls);
}

render() {
console.log("render");
console.log(this.props.calls);
}


when rerendered with new props will return...

componentWillReceiveProps
oldProp
shouldComponentUpdate
oldProp
componentWillUpdate
oldProp
render
newProp
componentDidUpdate
newProp


Does anyone know why this is happening and advise how I can get the updated prop before rendering?

Answer

The Life Cycle methods that are part of the update process (componentWillReceiveProps, shouldComponentUpdate, componentWillUpdate) happen before the actual props are updated. To get the new props, for example to check if a component should update in shouldComponentUpdate, react passes the new props as params to the method.

So to get the new props, you need to do this:

componentWillReceiveProps(nextProps) {
    console.log("componentWillReceiveProps");
    console.log(nextProps.calls);
}

shouldComponentUpdate(nextProps) {
    console.log("shouldComponentUpdate");
    console.log(nextProps.calls);
    return true;
}

componentWillUpdate(nextProps) {
    console.log("componentWillUpdate");
    console.log(nextProps.calls);
}

componentDidUpdate() {
    console.log("componentDidUpdate");
    console.log(this.props.calls);
}

render() {
    console.log("render");
    console.log(this.props.calls);
}
Comments