React Life Cycle Methods Overview
The React development team provides a series of hooks we can tap into at each phase of the life cycle. These method hooks inform us of where the Component is in the life cycle and what we can and cannot do.
Each of the life cycle methods are called in a specific order and at a specific time. The methods are also tied to different parts of the life cycle. Here are the methods broken down in order and by their corresponding life cycle phase 1:
Birth / Mounting
- Initialize / Construction
getDefaultProps()
(React.createClass) orMyComponent.defaultProps
(ES6 class)getInitialState()
(React.createClass) orthis.state = ...
(ES6 constructor)componentWillMount()
render()
- Children initialization & life cycle kickoff
componentDidMount()
Growth / Update
componentWillReceiveProps()
shouldComponentUpdate()
componentWillUpdate()
render()
- Children Life cycle methods
componentDidUpdate()
Death / Unmount
componentWillUnmount()
- Children Life cycle methods
- Instance destroyed for Garbage Collection
The order of these methods are strict and called as defined above. Most of the time is spent in the Growth/Update phase and those methods are called many times. The Birth and Death methods will only be called once.
Next Up: Birth/Mounting in-depth
1 Most of the methods are the same if you use either React.createClass
or use ES6 classes, such as class MyComponent extends React.Component
. A few are different, mainly around how instantiation/creation occurs. We will call these differences out throughout the chapter.