Lifecycle of React Components: Where you can intercept component events

React Components all go through lifecycles, and different methods are called during different stages of the lifecycle. If you are familiar with the idea of "events" or "callback functions", here they are.

constructor()

Constructor function of the React class.

componentWillMount()

Called after constructor() and before render()

not very important, especially with ES6 classes. You can generally write the code you want in here, in the constructor.

componentDidMount()

Called after the component is done mounting; API calls and network requests generally go here.

componentWillReceiveProps(nextProps)

Called when a component will receive new props; this does not include the first time the component receives props when it is initialized.

For example, a parent's components state is passed as a prop into a child component, when the parent's state changes, this method will be called in the child.

componentWillUpdate(nextProps, nextState)

This is called when a component receives either new props or new state. However, you CANNOT set the state in this method.

componentDidUpdate(prevProps, prevState)

if network requests/api calls need to be called, do them here.