Hello Everyone,  

Hope you all are doing well.  

Today I am going to discuss about React component life cycle.

There are various advantages of using React lifecycle methods in building SharePoint Framework components. It is not a necessity to use component lifecycle methods but we could get a lot out by using these methods with states. For a generic understanding of React component lifecycle methods, click here

What is the React Life Cycle

React lifecycle refers to the sequence of events and methods associated with a React component from its creation to its removal. These methods can be used to perform various tasks at different stages, such as setting up initial data, responding to updates, and cleaning up resources.

React Component Lifecycle Overview

React component has below stages :

• ComponentWillMount – This method is called before the component is inserted into the DOM. It’s rarely used in modern React development, as it’s considered deprecated. Instead, you should use the constructor to initialize state.
• ComponentDidMount – ComponentDidMount represents the rendering of the React component in the given DOM node.This is where you can initialize the component and make it ready for user interactions.
• ComponentWillUnMount  – ComponentWillUnMount represents the removal of the React component. It’s the final opportunity to clean up resources or perform necessary actions before the component is unmounted from the DOM.
• ComponentWillUpdate – ComponentDidUpdate is invoked just before a React component undergoes re-rendering, but it’s not widely utilized. In most cases, it’s recommended to opt for ComponentDidUpdate instead, as it offers more flexibility and control during the update process, making it a preferred choice for handling post-update tasks.
• ComponentDidUpdate – ComponentDidUpdate triggers a React component’s re-rendering in response to state changes or updates. It ensures the component displays the most current data in the designated DOM node, making it crucial for managing dynamic content.
• shouldComponentDidUpdate – shouldComponentDidUpdate provides control over a component’s re-rendering process. It enables you to make informed decisions based on new and previous props and state, optimizing performance by preventing unnecessary re-renders.
• ComponentWillReceiveProps  – is no longer used in modern React. Instead, similar functionality for handling props can be accomplished using ComponentDidUpdate or by employing hooks like useEffect, making the former method outdated.
• ComponentDidCatch – This method is used to catch errors within a component’s tree. It’s specifically useful for error handling. This method specializes in gracefully managing and reporting errors, enhancing the overall reliability of your React application.

Events Executing in Sequence :

1. Constructor :

The constructor method is called when an instance of the component is created. It initializes the component’s state and sets the initial values of its properties. In an SPFx React component, you typically use the constructor to initialize the state.

• The constructor method is the component’s constructor.
• It’s used for initializing state.
• Typically used to set the initial state of the component.

2. ComponentDidMount :

The componentDidMount method is called after the component has been inserted into the DOM. In your SPFx component, you can make REST API calls to retrieve SharePoint data when the component is mounted.

• This event is often used in SPFx components to fetch data from SharePoint.
• Updating the component’s state based on the retrieved data.

3. ComponentDidUpdate :

The componentDidUpdate method is called when the component’s props or state have been updated. It receives the previous props as an argument, allowing you to compare the previous and current props and take action accordingly. In an SPFx component, you might want to re-fetch data or perform other tasks when props change.

• The componentDidUpdate method runs after the component’s updates are applied.
• It’s ideal for handling updates in props or state.
• Useful for interactions with the DOM or managing component-specific logic.

4. ComponentWillUnMount :

The componentWillUnmount method is called just before the component is removed from the DOM. It provides an opportunity to clean up any resources, such as event listeners or subscriptions, to prevent memory leaks.

• Removing event listeners.
• Canceling any outgoing network requests or API calls.
• Cleaning up any resources acquired during the component’s lifecycle.

5. Render :

The render method is a fundamental part of every React component. It defines what should be displayed in the component based on its current state and props. In this method, you return a JSX template that describes the component’s UI structure.

• Creating the user interface structure based on the component’s state and props.
• Rendering dynamic content, such as data from SharePoint or user input.
• Returning the component’s UI in a format that can be inserted into the DOM.

I hope this article will help you learn about the React Life Cycle In SharePoint Framework(SPFx) components.

References :

React JS for beginners – https://knowledge-junction.in/2020/08/23/react-js-for-beginners/

SPFx component – understanding Service Locator Pattern – https://knowledge-junction.in/2022/03/23/spfx-component-simplifying-understanding-of-service-locator-pattern-part-1-adding-service-class-to-spfx-project-structure-and-accessing-in-spfx-component/

Exploring React JS – Preparing environment – https://knowledge-junction.in/2020/08/27/react-js-for-beginners-part-2-preparing-environment-for-creating-react-app/

Can reach me on my social network –

LinkedIn –  https://www.linkedin.com/in/ganesh-barde-860302218/

Twitter –  https://twitter.com/GaneshB64176973?t=6N6FyRy-YOKAF5ujrI5QHQ&s=09

Thanks for reading. 

Have a wonderful day.