Each component in React has a lifecycle which you can monitor and manipulate during its three main phases. The 3 phases are: Mounting, Updating, and Unmounting.
During Mounting phase, 4 methods gets called in the below order.
The render() method is mandatory and will be always called, while others are optional.
constructor() method is called before anything else, when the component is initiated, and it is the place to set up the initial state and other initial values.
The constructor() method is called with the props, as arguments, and you should always start by calling the super(props) before anything else, this will initiate the parent's constructor method and allows the component to inherit methods from its parent (React.Component).
getDerivedStateFromProps() method is called right before rendering the element(s) in the DOM.It is the place to set the state object based on the initial props.It takes state as an argument, and returns an object with changes to the state.
render() method is required, and is the method that actually outputs the HTML to the DOM.
Update Phase: A component is updated whenever there is a change in the component's state or props. 5 built-in methods are called in the below order when a component is updated.
All methods except render are optional and will be called if you define it.
Also at updates the
getDerivedStateFromProps method is called. This is the first method that is called when a component gets updated.
This is still the place to set the state object based on the initial props.
getSnapshotBeforeUpdate() method you have access to the props and state before the update, meaning that even after the update, you can check what the values were before the update.
If the getSnapshotBeforeUpdate() method is present, you should also include the componentDidUpdate() method, otherwise you will get an error.
shouldComponentUpdate should return a true or false value. This will determine if the component will be updated or not. This is set to true by default. If you are sure that the component doesn't need to render after state or props are updated, you can return a false value.
componentDidUpdate is called just after rendering.
Deprecated/Unpopular lifecycle methods:
componentWillUnmount is called after the component is unmounted from the dom. We are unmounting our component in main.js.
componentWillMount is executed before rendering, on both the server and the client-side.This method is only called one time, which is before the initial render.
componentWillReceiveProps is invoked as soon as the props are updated before another render is called. We triggered it from setNewNumber when we updated the state.
componentWillUpdate is called just before rendering.