React Component Lifecycle

Constructor

The constructor() method is called before anything else, when the component is initiated, and it is the natural 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)

we don't use setState() method in the constructor() function. When use setState(), then apart from assigning to the object state react also rerenders the component and all it's children. Which don't need in the constructor, since the component hasn't been rendered anyway.

Example for constructor() method;

out put is;

Render

render() is the most used method for any React powered component which returns a JSX with backend data. It is seen as a normal function but render() function has to return something whether i is null. 

When the component file is called it calls the render() method by default because that component needs to display the HTML markup or we can say JSX syntax.

Example for render();

• can not use setState() inside render() function. because setState() function changes the state of the application and causing a change in the state called the render() function again. So if write something like this then calling the function stack will go for infinity and application gets the crash.

• can define some variables, perform some operation inside render() function, but never use the setState() method. in general class, we are logging out some variable's output in the render() method. it is the function that calls in mounting lifecycle methods.

ComponentDidMount 

after all the elements of the page is rendered correctly, this method is called. After the markup is set on the page, this technique called by React itself to either fetch the data from an external API or perform some unique operations which need JSX elements.

componentDidMount() method is the perfect place, where we can call the setState() method to change the state of our application and render() the update data loaded JSX.

we use setTimeOut() method and fetch the data. So, after the component is rendered correctly. componentDidMount() method is called and that call getData() function.

For example;

we are going to fetch any data from API the API call should be placed in this lifecycle method, and the we get the response, we can call the setState() method and render the element with updated data.

GetDerivedStateFromProps

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 natural place to set the state object based on the initial props. can update state from props. 

getDerivedStateFromProps() is static method which is invoked after a component is instantiated as well as when it receives new props. 

Since it is a static method, you cannot access this inside this method neither you an access any other class method.

shouldComponentUpdate

Use shouldComponentUpdate() to let React know if a component's output is not affected by the current change in state or props. The default behavior is to re-render on every state change, and in the vast majority of cases you should rely on the default behavior.

shouldComponentUpdate() is invoked before rendering when new props or state are being received. Defaults to true. This method is not called for the initial render or when forceUpdate() is used.

This method only exists as a performance optimization. Do not rely on it to "prevent" a rendering, as this can lead to bugs. Consider using the built-in PureComponent instead of writing shouldComponentUpdate() by hand. PureComponent performs a shallow comparison of props and state, and reduces the chance that you'll skip a necessary update.

Currently, if shouldComponentUpdate() returns false, Then  UNSAFE_componentWillUpdate(), render(), and componentDidUpdate() will not be invoked. In the future React may treat shouldComponentUpdate() as a hint rather than a strict directive, and returning false may still result in a re-rendering of the component.

componentDidUpdate

componentDidUpdate() is invoked immediately after updating occurs. This method is not called for the initial render.

Use this as an opportunity to operate  on the DOM when the component has been updated. This is also a good place to do network requests as long as you compare the current props to previous props.

call setState() immediately in componentDidUpdate() but note that it must be wrapped in a condition like in the example above, or you'll cause an infinite loop. It would also cause an extra re-rendering which, while not visible to the user, can affect the component performance.

• componentDidUpdate() will not be invoked if shouldComponentUpdate() return false.

componentWillUnmount

componentWillUnmount() is invoked immediately before a component is unmounted and destroyed. perform and necessary cleanup in this method, such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount().

You should not call setState() in componentWillUnmount() because the component will never be re-rendered. Once a component instance is unmounted, it will never be mounted again.

getDerivedStateFromError

getDerivedStateFromError() is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state. 

componentDidCatch() is called during the “commit” phase, so side-effects are permitted. It should be used for things like logging errors. 

getDerivedStateFromError() is called during the “render” phase, so side-effects are not permitted. For those use cases, use componentDidCatch() instead.

This lifecycle is invoked after an error has been thrown by a descendant component. It receives the error that was thrown as a parameter and should return a value to update state.

• getDerivedStateFromError() is called during the "render" phase, so side-effects are not permitted. For those use cases, use componentDidCatch() instead.