when i use react ,i find these two life cycle are too similar, ponentWillReceiveProps receive nextProps as argument, shouldComponentUpdate receive nextProps and nextState as arguments, so i think shouldComponentUpdate can do the same thing and more, why react keep ponentWillReceiveProps method, i wonder what's difference between these two methods

when i use react ,i find these two life cycle are too similar, ponentWillReceiveProps receive nextProps as argument, shouldComponentUpdate receive nextProps and nextState as arguments, so i think shouldComponentUpdate can do the same thing and more, why react keep ponentWillReceiveProps method, i wonder what's difference between these two methods

• javascript
• reactjs
• virtual-dom

• 1 You should probably read the documentation. These two lifecycle function although receive same props but serve different functionalities and have different triggers – Shubham Khatri Commented Nov 28, 2017 at 12:29
• shouldComponentUpdate is used for you to accept or decline an update. If a prop changes, you might not want to render the ponent again, so you would return false. ponentWillReceiveProps is a way for you to check what props you currently have and what the next props are going to be. ponentWillReceiveProps(nextProps) {}. – Dan Commented Nov 28, 2017 at 12:29
• 3 I'm voting to close this question as off-topic because the answer to this is well explained in the React documentation – Shubham Khatri Commented Nov 28, 2017 at 12:30
• 2 Based on that logic you could close most of S/O's answers/questions because almost everything can be found in some sort of documentation, so closing a question strictly for that reason definately shouldn't be allowed – linasmnew Commented Nov 28, 2017 at 12:39

2 Answers 2

They have two different roles and execute on different situations:

shouldComponentUpdate will be called every time a prop or something in the state changes (or React think that has changed). It's function is to determine if the ponent should re-render by returning a boolean: true if the ponent should re-render (this is the default return value), or false if it shouldn't. You can access the current and next state and props, to pare and decide if it really should re-render or not. You should not use this method for other reason.

On the other side, ponentWillReceiveProps will only be called if the props changed (or seem to have changed). If only the state changes, this method won't be called. Also, this won't decide if the ponent should re-render. You can use this method to, for example, change some state, or make an API call.

Check out these links:

ponentWillReceiveProps: https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/ponent_will_receive_props.html

shouldComponentUpdate: https://developmentarc.gitbooks.io/react-indepth/content/life_cycle/update/using_should_ponent_update.html

ponentWillReceiveProps - as the function name states this is called whenever new props will be passed to the ponent and you can trigger an action depending on the new prop state

shouldComponentUpdate - is a filter function which decides if the ponent tree should be re-rendered. This function can serve as an additional filter where you change are happening which don't require a re-render

More info here