Does React rerenders component when a prop is changed

Question

Suppose I have two components named Parent and Child . In Parent component I have a state named lastName which is passed to Child as a prop. Now after initial rendering of Child and Parent , if the lastName in Parent changed, will it cause Child component to rerender?

Answer 1

Yes, if you set the property via setState . However, re-render in React isn't something you should be afraid of, it's very efficient due to Virtual DOM usage.

Answer 2

In the child component you should use the following

shouldComponentUpdate(nextProps){
   return this.props.lastname !== nextProps.lastname
}

https://facebook.github.io/react/docs/component-specs.html#shouldComponentUpdate

After that, in the child component you might need to update the state. To achieve that you can use componentWillReceiveProps(nextProps)

componentWillReceiveProps(nextProps){
  this.setState({
    lastname: nextProps.lastname
  });
}

Answer 3

The Child component is only re-rendered when props lastName is being used in Child's render function and Parent use setState function to change lastName . Remember, React is one-way dataflow, if you want to re-render Child component right inside the Child, you must call an event which also trigger setState back to Parent component