Why component update lifecycle executes whenever parent's state changes?

Question

I have a parent component called 'App' in which a child component is used called 'NewComp'.I have defined componentDidUpdate() lifecycle inside child component,not in parent component.

Parent component:

class App extends Component {

    state = {
      count:0,
    }

    change = () =>{
      this.setState({
        count:this.state.count+1,
      })
    }

    render() {

      return (
        <div>
          <p>Count = {this.state.count}</p>
          <button onClick={this.change}>Add Count</button>
          <NewComp />
        </div>
      );
    }
}

Child Component:

export default class NewComp extends Component {

  componentDidUpdate(){
    console.log('Child component did update');
  }

  render() {
    return (
      <div>
        <h1>Child Component</h1>
      </div>
    )
  }
}

Now every time I change parent state by 'Add Count' button ,the componentDidMount() in child component executes even there is no change in child component

score 1 · Accepted Answer · answered Jan 29 '19 at 07:30

Parent component is triggered re-render, and in your NewComp, shouldComponentUpdate alway return true by default, so NewComp is triggered re-render as well. You can avoid it by implementing shouldComponentUpdate in NewComp or use PureComponent:

export default class NewComp extends PureComponent {

  componentDidUpdate(){
    console.log('Child component did update');
  }

  render() {
    return (
      <div>
        <h1>Child Component</h1>
      </div>
    )
  }
}

score 0 · Answer 2 · answered Jan 29 '19 at 07:19

0

You can use shouldComponentUpdate life cycle method to control when component can update. Usually componentDidUpdate is executed when props or state is updated.

answered Jan 29 '19 at 07:19

Umair Farooq

1,763
13
16

As you said,'componentDidUpdate is executed when props or state is updated',but here no state or props updated – ShahEryar Ahmed Jan 29 '19 at 07:21
Please check react documentation https://reactjs.org/docs/react-component.html#componentdidupdate – Umair Farooq Jan 29 '19 at 07:23
As `shouldComponentUpdate` by default send true, so when parent is re-rendered child also updates, Reffering from react docs "shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. This method is not called for the initial render or when forceUpdate() is used." – Umair Farooq Jan 29 '19 at 07:27

score 0 · Answer 3 · answered Jan 29 '19 at 07:23

0

you can see the below query. Which is similar to yours

React: Parent component re-renders all children, even those that haven't changed on state change

I hope it helps.

answered Jan 29 '19 at 07:23

Aman Seth

195
1
9

Praveen Rao Chavan.G · Answer 4 · 2019-01-29T07:36:01.047

Component Update life cycle hooks are the hooks which should be used to take some action when there is an update in components state, these hooks will definitely execute when there is a state update, that's what they are meant for.

If you want to execute some logic only when the component gets created please consider using Creational Life cycle hooks

Or

If you want to use componentDidUpdate then, please have a check whether your desired state or prop value is changed and then go ahead

Creational Life Cycle hooks:

Update Life Cycle hooks:

Why component update lifecycle executes whenever parent's state changes?

4 Answers4