0

Iam new to React and i came across with this doc. It says that:

Either way, it is unsafe to use componentWillUpdate for this purpose in async mode, because the external callback might get called multiple times for a single update

How is it possible for the componentWillUpdate to be called multiple times? It doesnt explain it.

Thank you

  • Whenever there's a change to the state, the component updates, before it does componentWillUpdate is called. I don't use reactjs and I don't know what version you're running but [here's some more information](https://reactjs.org/docs/react-component.html#unsafe_componentwillupdate). –  Feb 05 '19 at 12:01
  • Does [this graph](http://www.nikpro.com.au/the-react-component-lifecycle-in-update-stage-shouldcomponentupdate-and-componentdidupdate-part-2/) explain it better? Note that you might have read over the statement that willUpdate is [considered legacy](https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html#new-lifecycle-getsnapshotbeforeupdate) as well: *together with componentDidUpdate, this new lifecycle should cover all use cases for the legacy componentWillUpdate* – Icepickle Feb 05 '19 at 12:04

2 Answers2

2

Any change that is supposed to trigger a render will first go through a componentWillUpdate lifecycle. The change change can be a parent re-render causing the child to re-render, a change in components props, or a change in state.

However from v16.3.0 this lifecycle method is deprecated and it is encouraged that any sideeffect be handled in componentDidUpdate which will be triggered after render method.

Shubham Khatri
  • 270,417
  • 55
  • 406
  • 400
0

On async mode, your component update/render may be postponed so react can deliver some hi-priority stuff. This means willUpdate will be called each time react starts working on your component, but it might not finish the full update, hence calling willUpdate every time it starts working on this component but only calls didUpdate once, after this process is finished.

enapupe
  • 15,691
  • 3
  • 29
  • 45
  • Is there any link or article about this? And by async mode you mean async operations? –  Feb 05 '19 at 12:10
  • Async mode is what was previously called `fiber`. https://reactjs.org/blog/2018/03/27/update-on-async-rendering.html – enapupe Feb 05 '19 at 12:20
  • This link doesnt say anything about hi-priority –  Feb 05 '19 at 13:59
  • The async mode is not production ready yet. If your question is regarding a specific piece of code and not just the docs then you should update your answer to be more specific. – enapupe Feb 05 '19 at 14:15
  • I want a working example with an async mode whereas i can see the drawbacks of using the deprecated methods such as componentWillUpdate in order to understand how async works –  Feb 05 '19 at 14:21