componentWillReceiveProps, componentDidUpdate for React Hook

Question

I run into two challenges:

• Even if, as per React guideline, derived state is discouraged, but some edge cases still need it.
  In terms of a functional component with React Hook, What is the equivalent implementation with React Hook, If I do need derived state ? which in class component, will be updated in componentWillReceiveProps on every parent render

see below code sample:

• As for componentDidUpdate, componentDidUpdate has it's counterpart when React Hook is used ,you have to use it like,

    React.useEffect(() => {
      return () => {
  
       };
    }, [parentProp]);
  

  the Second param for useEffect makes sure code is executed only when prop changes, but what if I want to do respective tasks based on multiple respective props changes? how to get it done with useEffect?

see below code sample:

class App extends Component {


  /*What is the equivalent implementation when functional component with React Hook is used here */
  componentDidUpdate(prevProps, prevState) {
    if (prevProps.groupName !== this.props.groupName) {
      console.log('Let'
        's say, I do want to do some task here only when groupName differs');
    } else if (prevProps.companyName !== this.props.companyName) {
      console.log('Let'
        's say,I do want to do some different task here only when companyName differs');
    }

  }


  render() {
    /*for simplicity, render code is ignored*/
    return null;
  }
}

export default App;

Answer 1

The react hook equivalent to the old componentWillReceive props can be done using the useEffect hook, just specifying the prop that we want to listen for changes in the dependency array.

I.e:

export default (props) => {

    useEffect( () => {
        console.log('counter updated');
    }, [props.counter])

    return <div>Hi {props.counter}</div>
}

For componentDidUpdate just by omitting the dependency array, the useEffect function will be called after every re-render.

I.e:

export default (props) => {

    useEffect( () => {
        console.log('counter updated');
    })

    return <div>Hi {props.counter}</div>
}