Execute a function after Props change

Question

I want to execute a function in Child Component after props gets changed in the Parent Component without having to manage an extra state in Child/Parent.

<ParentCompoenent 
  myCallback={() => {}}
  myList={['a','b','c']}
/>

ChildComponent.js

componentWillReceiveProps(nextProps) {
  console.log(this.props.myList, '==', nextProps.myList);  // Outputs ['a','b','c'] == ['a','b','c']
}

When I'm trying to console the nextProps in componentWillReceiveProps its giving the same result every time even after the props have been changed.

Answer 1

you have to use componentDidUpdate in class components and useEffect in Function components...

componentDidUpdate like this:

    componentDidUpdate(prevProps, prevState) {
            if (prevProps.something !== this.props.something) {
                   console.log('something prop has changed.')
            }
    }

componentDidUpdate will run console.log every time the new prop is different from prevProps.

and in useEffect you just add the props to its dependency:

useEffect(()=>{
    console.log('something prop has changed.')
},[props.something]);

useEffect will call that function every time the value of that prop changes.