React: ComponentWillUpdate

- 1 answer

Can somebody explain what really happens i the next context:

Let's assume i have an App component (parent) , and some children components let's say Index, Search, About and these 3 have their children.

What happen's when I call componentWillUpdate in App Component ... , the new state/ props will come but what will happen inside the leafs (children ), will they rerender themself ?

And let's say I overwrite something i DOM in this componentWillUpdate in App, and I'll the same thing in DOM in a leaf component in componentDidMount or componentWillMount... which value will be the last ?



First at all, you shouldn't call componentWillUpdate manually. It is called by React if as part of it's lifecycle.

According to comment in ReactCompositeComponent.js this is what hapens during update phase:

Update Phases:
        - componentWillReceiveProps (only called if parent updated)
        - shouldComponentUpdate
          - componentWillUpdate
            - render
            - [children's constructors or receive props phases]
          - componentDidUpdate

As you can see App.render is called before rendering children copmonents.

If you want to manipulate DOM manually for some reason, componentWillUpdate is not the right place to do it. Use componentDidUpdate after every update or componentDidMount after the initial render. Children's componentDidUpdate and componentDidMount are triggered before the parent's lifecycle methods.