React — Lifecycle of a Component

React Lifecycle

In React applications, we use components to split and isolate different parts of the web user interface into individual pieces. These pieces act independently and use a render function to return React elements in JSX. These elements describe how that section should be displayed to the user.

Each component has several “lifecycle methods” that we can override to run code at particular times in the process. It is very similar to our natural lifecycle: we are born, we grow and eventually we die. React components are created by being mounted onto the DOM, they change or grow through updates, and finally, they can be removed or unmounted from the DOM. These three milestones are referred to as the React component lifecycle. However, a React Component may or may not go through all phases

3 phases can be encountered: mounting, updating and unmounting.

Mounting

These methods are called in the following order when an instance of a component is being created and inserted into the DOM:

constructor()

Before the start of the mounting phase, we may need to initialize our component using a constructor() method. This is used when we need to initialize state and bind methods to our component.

Note: If you don’t initialize state and you don’t bind methods, you don’t need to implement a constructor for your React component.

static getDerivedStateFromProps()

This method is invoked right before calling the render method, both on the initial mount and on subsequent updates. It should return an object to update the state, or null to update nothing. It is rarely used and should be used with caution as it can cause errors.

render()

This is the only required method in a class component. When called, it should examine this.props and this.state and return one of the following types:

• React elements. Typically created via JSX. For example, <div /> and <MyComponent /> are React elements that instruct React to render a DOM node, or another user-defined component, respectively.
• Arrays and fragments. Let you return multiple elements from render.
• Portals. Let you render children into a different DOM subtree.
• String and numbers. These are rendered as text nodes in the DOM.
• Booleans or null. Render nothing. (Mostly exists to support return test && <Child /> pattern, where test is boolean.)

componentDidMount()

This method will be immediately invoked after the render function is executed. If you need to load data from a remote endpoint, this is a good place to instantiate the network request. You may call setState() immediately in componentDidMount(). It will trigger an extra rendering, but it will happen before the browser updates the screen.

Updating

An update can be caused by changes to props or state. These methods are called in the following order when a component is being re-rendered:

static getDerivedStateFromProps()

This is the first method to be invoked in this phase. This method is the same method used in the mounting phase.

shouldComponentUpdate()

This method gives you control over whether or not a component should update due to a change in its props or state. This method only exists as a performance optimization therefore is rarely used.

render()

If shouldComponentUpdate() returns true, the render function is invoked immediately.

getSnapshotBeforeUpdate()

This method is invoked right before the most recently rendered output is committed to the DOM. This use case is not common, but it may occur in UIs like a chat thread that need to handle scroll position in a special way.

componentDidUpdate()

This method is invoked immediately after updating occurs. This method is not called for the initial render. It receives the former props and state values as arguments but it also receives the return value getSnapshotBeforeUpdate() as a third argument (if present).

Unmounting

Finally, the unmounting phase is where the component is removed from the DOM. This marks the end of a component’s lifecycle. In this phase, we have one lifecycle method available to us:

componentWillUnmount()

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