There are only 4 different events that can trigger React component lifecycle methods:

When a Component Mounts

A component will only mount once during its lifecycle. The following 2 methods are only called once in the component's lifecycle alongside the component's render():

• componentWillMount()
• render()
• componentDidMount()

componentWillMount()

This method is invoked right before render() is called for the first time (invoked before the component enters the DOM).

componentDidMount()

This method is invoked right after render() is called (invoked after component has entered the DOM). This method does not get called on the server as there is no DOM.

This method is used to set up your component, like initiate timers, send AJAX requests, etc.

When a Component Receives Props or Updates Its State

These methods below are invoked in the following order when the component updates:

• componentWillReceiveProps()
• shouldComponentUpdate()
• componentWillUpdate()
• render()
• componentDidUpdate()

shouldComponentUpdate( nextProps, nextState )

This method is invoked right before render() is called, and never on the first instantiation of the component.

This method is essentially a question asking whether or not the component should re-render itself (simply a condition check expecting a boolean return).

componentWillReceiveProps( nextProps )

This method is invoked right before render(), and called whenever the component receives props from its parent (called every time the parent component re-renders),

This method is used if you want to update the component's state in regards to a prop change. shouldComponentUpdate() should be used to stop unnecessary renders when the props passed in don't change.

This method is not called when the component is first instantiated.

componentWillUpdate( nextProps, nextState )

This method is invoked after shouldComponentUpdate() returns true, and new props or state are being received.

This method is used to prepare the props and state before re-rendering the component in the DOM.

Using this.setState() does not work in this method. If you need to trigger state changes, you need to use componentWillReceiveProps().

componentDidUpdate( prevProps, prevState )

This method is invoked after render() is called, and gives you access to the components previous props, and previous state. This method allows you to perform operations on the DOM after the data has been updated.

When a Component Unmounts

A component will only unmount once during its lifecycle.

componentWillUnmount()

This method is called once, right before the component leaves the DOM.

This method is used to clean up your component like invalidating timers, etc.