An update phase can be caused by changes of the props
or state
.
Update phase is initiated by passing new props
, setState()
or forceUpdate()
.
Mounting phase happens just once, where the updating phase happens every time on change of the state
or the props
.
These methods are called in the following order when a component is updated:
-
render() - Invoked by default each time an update happens (new
props
,setState
orforceUpdate
) -
componentDidUpdate() ⬅
-
componentDidUpdate()
is invoked only during the updating phase, immediately after the re-render()
is finished. -
We shouldn’t update the state in
componentDidUpdate()
. This can cause infinite loop if the proper condition is not set, and it causes an extra re-rendering (affects component performance). -
componentDidUpdate()
gives us access to theprops
andstate
from when before the update was made(componentDidUpdate(prevProps, prevState)
). -
Commonly
componentDidUpdate()
is used for comparing the previousprevProps
andprevState
versus currentthis.props
andthis.state
to see what exactly changed (if anything) and then react accordingly.