React.js,Event Listener onChange for Specific Prop?

Question

I want to trigger a function when this.props.map is set on a React component - defined using the ES6 class syntax:

export default class MapForm extends React.Component {...

Presently, I am using componentDidUpdate() because it is triggered when the props are set - but it is also triggered from other unrelated events which isn't ideal.

On the other hand, componentWillReceiveProps() happens to early in the lifecycle of the component it seems (this.props.map returns undefined at this point)

So I want to trigger a function only when this.props.map is set.

Is there a hook I am missing? Or perhaps a certain pattern?

Answer 1

if you only want to trigger it once. you can do this

componentDidUpdate(pProps){
    if(!pProps.map && this.props.map){
        this.props.callSomeFunc();
    }
}

or you can use the before render function

componentWillRecieveProps(nProps){
    if(!this.props.map && nProps.map){
        this.props.callSomeFunc();
    }
}

if you want to know when it changes to call the function (meaning it is already created but has changed to something else)

if( (!pProps.map && this.props.map) || (this.props.map !== pProps.map){

(if its an object you may want to change that second comparison to a deep one)

Both of these functions have the concept of the next or previous state of the component before and after it is updated.

componentDidUpdate means the render has finished and the component has updated. It has two arguments you can include in the function (prevProps, prevState) where it is the previous props and state of the component before it updated.

alternatively componentWillReceiveProps has the opposite side (nextProps, nextState)

with both of these we can compare the previous props or the next props of the component and see if that transition is when the map is set (aka one is undefined and the other is not)

---

EDIT:

to visualize whats happening so you know what the next props are (nProps) look at this.

count = 1;
<SomeComponent count={count} />

now inside SomeComponent

class SomeComponent extends React.Component {
    
    componentWillReceiveProps(nProps){
        console.log(this.props.count); // logs 0
        console.log(nProps.count);  // logs 1
    }
}
SomeComponent.defaultProps = {count: 0};

now lets say we add 5 to count.

componentWillReceiveProps(nProps){
    console.log(this.props.count); // logs 1
    console.log(nProps.count);  // logs 6
}

basically it executes before you actually render with the new props. this.props.count is the current value in the component. and nextProps.count (nProps.count) is the next value that is coming in. Hope that helps explain how it works! :)