CODEWITHSUNDEEP
javascriptjqueryreactjs
Pavel Tomasko
Pavel Tomasko

Reputation: 170

React reconciliation - props diff

I am packing jQuery Flotchart component as a React one and I need to call plot method of a chart instance whenever the component properties change.

What I have end up with is shouldComponentUpdate hook implementation which compares new props with the old ones.

However the React documentation says that React itself compares new component props to the old ones as a part of reconciliation process, so React already should have the information about whether some of the props changed. This means that if I perform shallow comparison of props in shouldComponentUpdate, I duplicate the functionality already built in React, is that right? If so, how do I get the information about whether the properties changed from React, without the need to duplicate it in shouldComponentUpdate ?

Upvotes: 0

Views: 1008

Answers (2)

ganesshkumar
ganesshkumar

Reputation: 1377

The function you are looking for is componentWillReceiveProps. According to reactjs documentation, this method will receive the next set of component properties as nextProps.

You can compare the properties like 

if (nextProps.myProperty === this.props.myProperty) {//doSomething}

Upvotes: 1

Khalid Azam
Khalid Azam

Reputation: 1643

React does not do any shallow comparison of props, its provides component lifecycle hooks to add your logic inside shouldComponentUpdate based on props ot state or your custom logic. However, if your component is pureComponent react does shallow comparison for you based on props or state.

Whenever the props / state change react call couple of hook method before calling render function.

componentWillReceiveProps() ---> shouldComponentUpdate() ---> componentWillUpdate() ---> render() ---> componentDidUpdate()

Upvotes: 0

Related Questions