As I’m interviewing at companies for Full Stack and Frontend development roles, I keep getting asked what React’s component lifecycle is.

Simply put, there are three stages of the component life cycle. Initialization/Mounting, State/Property Updates, and Destruction/Unmounting. There are React methods associated with each of these events and some of these events happen more than once. Understanding these three events can help you decide what logic to use in a given situation. For instance, we may want to add something to the DOM after a component has been rendered and then remove it after it right before it is destroyed.

This gives you a good idea of what the component lifecycle is and the methods associated with each stage.

All methods that have a will prefix are called before an action and all methods that have a did prefix are called right after and action.

render()

This is arguably the most important method. This method is required in every component that is created. The render method should take into consideration this.props and this.state and return a react element (i.e. a DOM component as JSX or a user-created component in the form of <MyComponent /> ), a string or numbers (which are created as text nodes in the DOM), null , or boolean values. render() should not modify the component’s state and it should render predictably. render() does not get invoked if shouldComponentUpdate() returns false .

Initialization/Mounting

The first stage of React’s component lifecycle is initialization/mounting. This is where the component is first being created and inserted into the DOM. The methods associated with this stage are shown above. I’m going to discuss two below.

componentWillMount()

This method is invoked right before the component mounting occurs therefore before the render() method. If you are initially setting state it is recommended that you set that in the constructor() method instead. If you need to call setState() in this method it will not trigger any extra rendering since the component has not yet been rendered.

componentDidMount()

This method invokes as soon as component mounting occurs. Any thing that requires the presence of specific nodes on the DOM should go here. If there is data that needs to be requested from an API, this is a good place to put that request. If setState() is called here it will trigger a rerender since the initial render has already happened.

State/Property Updating

Any time a change is made to the state or props a component is rerendered by default and there are other methods called on this rerender, some of which are explored below.

shouldComponentUpdate()

This method is used when letting a component know whether or not it should be updated based on changes in state or props. This is the first method invoked in the chain of methods that are associated with state/property changes.

componentWillUpdate()

This method is invoked before rendering occurs when there are changes to the state or props. This is where preparations can be done before an update. You should not make any changes to state or props in this method as it is assumed that changes to the state or props occurred already.

componentDidUpdate()

This method is invoked as soon as an update happens and is not called for the first render. This is a good place to make requests and check them against your state and props.

Unmounting/Destroying

There is only one method in this category and it is called when a component is being removed from the DOM.

componentWillUnmount()

This method is called right before unmounting. This is where any cleanup occurs such as removing any timers, event listeners and stopping and network requests.

Sources