React JS(Part 02)

React JS (Part 02)

In the previous blog, we were talk about the basic parts of React JS.In this blog post, I am planning to explain some advance concepts in the React JS.

Components of Life Cycle

In the previous blog post, I have discussed what does the meaning of the components in React JS. Here I am explaining to you what is the component life cycle in React JS.

Basically, each and every component of React has to go through the life cycle of its own birth, growth, and death. So that, in React these 3 stages are called using three different names. Those are,

Mounting - Birth

Update  - Growth

Unmount  - Death

Constructor

This is the method that calls before anything else. This is the natural place to set up the initial state and the other initial values when the component is created. This method is called with the props as arguments. That means this constructor() method helps to bind the context to life cycle methods. But this will not call the setState.

This should always start by calling the super (props) to bind this.props. So that it will help to initiate the parent's constructor method and that will allow the components to inherit the methods from the parent.


Render

This is the method of actual outputs of HTML to DOM. The render method will be called when the props or the state are being changed. Render() method can return the JSX, Portal, Fragments, Strings and Boolean type values. Render() method can perform the operations, define variables but can never use setState() function.

componentDidMount

This will be called after the component is updated (mounted) in the DOM. This is the place where AJAX request and state/DOM update occurs. This method will use for integrations with JavaScript frameworks and also with the functions with the delayed execution like setTimeout().

getDerivedStateFromProps

When the user need to update the stet from props user can use this method. This is a static method. This is invoked after the component is instantiated and also when it receives new props. Because of being Static ''this" cannot be used inside the method. Due to that only way of updating is returning an object from the method.

shouldComponentUpdate

This is the method that decides whether the component should be updated. This is the first real life cycle optimization. that. can leverage. in React. This method should always return a boolean value.
This method can be used for the improvement of the performance.

componentDidUpdate

This is not called for the initial render. But this will be invoked immediate after the updates have occurred. This method will not be run when shouldComponentUpdate  method returns false. Thid is the best place to handle network-related requests.

componentWillUnmount

This method will be called before the components are unmounted and destroyed. This method helps for the cleaning up the invalidating timers, canceling network requests, subscriptions created in componentDidMount(). If the components are unmounted those will never be mounted again.

getDerivedStateFromError
If an error has thrown by a  descendant component this method will be fired. This method receives the error as a parameter and returns the value to update state.
This method is called in the render phase, so that side effects are not permitted. For that kind of situations componentDidCatch() can be used instead.

componentDidCatch

This method calls in the phase of "commit" so that side effects are permitted.