componentWillReceiveProps is a synchronous hook. Calling asynchronous function like data fetching inside this hook will need to render in between when the new props are set and when data has finished loading.
But the getDerivedStateFromProps is an asynchronous hook won’t require any additional render. Thus, componentWillReceiveProps is being deprecated in favor of the following reason:
- Use getDerivedStateFromProps
- Or, use componentDidUpdate
Which won’t give you unnecessary renders. Note that getDerivedStateFromProps is used only in rare case though. So, I suggest you to use componentDidUpdate hook as far as possible.
The similar things happen when comparing componentWillMount and componentDidMount. Use componentDidMount whenever you need operate async operation and forget componentWillMount at all condition. More explanation about componentDidMount is here in my another post.