Component life cycle methods

Various methods are executed at specific points in a component's lifecycle. Let's look at them.

componentWillMount()

The componentWillMount() method is invoked once immediately before the initial rendering occurs. If you call setState within this method, render() will see the updated state and will be executed only once despite the state change.

componentDidMount()

The componentDidMount() method is invoked only on the client side. It is invoked only once after initial rendering has occurred.

componentWillReceiveProps(nextProps)

Directly mutating the properties passed to a component will have no effect because there is no way for React to find value changes as it doesn't watch the properties directly. But sometimes, it is possible for React to predict property value changes, and in that case, it calls the componentWillReceiveProps method, if it exists, with the new property values as its parameters, and it also re-renders the component.

For example, if we change the...