Pre Mounting
componentWillMount() Deprecated
componentWillMount() Deprecated
Now that the props and state are set, we finally enter the realm of Life Cycle methods. The first true life cycle method called is componentWillMount()
. This method is only called one time, which is before the initial render. Since this method is called before render()
our Component will not have access to the Native UI (DOM, etc.). We also will not have access to the children refs
, because they are not created yet.
The componentWillMount()
is a chance for us to handle configuration, update our state, and in general prepare for the first render. At this point, props and initial state are defined. We can safely query this.props
and this.state
, knowing with certainty they are the current values. This means we can start performing calculations or processes based on the prop values.+
In the example above we call this.setState()
and update our current state before render. If we need state values on calculations passed in props
, this is where we should do the logic.
****Avoid async initialization in componentWillMount()****
componentWillMount()
is invoked immediately before mounting occurs. It is called before render()
, therefore setting state in this method will not trigger a re-render. Avoid introducing any side-effects or subscriptions in this method.
Make async calls for component initialization in componentDidMount
instead of componentWillMount
We can make such API calls in componentDidMount
Last updated