When developing with SharePoint Framework (SPFx), understanding the core pieces of code that manage the lifecycle and state of components is essential for building scalable, efficient, and responsive web parts. SPFx leverages React (and other libraries) for building components, which means developers need to be familiar with how components are created, updated, and removed from the page.

Each SPFx component goes through a defined lifecycle, and key methods such as onInit, componentDidMount, setState, and getDerivedStateFromProps allow you to control how and when your component interacts with the DOM, fetches data, or responds to user input. Knowing when and where to place certain logic within these methods can have a significant impact on performance and maintainability.

OnInit

The onInit() function is an important lifecycle method in the SharePoint Framework (SPFx) and is executed when the webpart is initialized. This feature is used to obtain the context of the page, such as the URL of the current page, the current user, and the current web, and to configure or initialize the necessary services required for the web part. Here’s an example of how you could use it in an SPFx project:

    export default class HelloWorldWebPart extends BaseClientSideWebPart<IHelloWorldWebPartProps> {

      protected onInit(): Promise<void> {
        getSP(this.context);
        return super.onInit();
      }
    }
  
  TypeScript

In this example, the onInit() function is used to configure the PnP-JS-Core library with the context of the webpart so that it can be used to retrieve data from the SharePoint site where the webpart is displayed. It is important to note that the onInit() function returns a Promise and that the super.onInit() function must also be called, as this function is also used in the base class of the webpart. The use of onInit() is optional, but is often used if you want to make an ajax call or perform other network operations when loading the webpart.

componentDidMount

componentDidMount() is a lifecycle method in React.js and is executed after a component has been rendered in the DOM. This is the best place to initiate ajax calls or other network operations because we are sure that the component exists and is displayed effectively. Here’s an example of how you could use it in a SharePoint Framework (SPFx) project:

    class MyComponent extends React.Component {
      componentDidMount() {
        this.setState({title: "Title"});
      }

      render() {
        return <div>{this.state.title}</div>;
      }
    }
  
  TypeScript

In this example, the title is written to the state so that it can be displayed later in the react component when the component is rendered and displayed.

setState

setState() is a method in React that is used to change the state of a component. When the state of a component changes, the component is retendered and the changes are reflected in the user interface.

It’s important to note that setState() is asynchronous, which means it doesn’t make a direct change to the state of the component. Instead, the new state is saved and an update is performed after React completes the current cycle of updates.

Here’s an example of how you could use setState() in an SPFx project:

    class MyComponent extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          count: 0
        };
      }

      handleClick = () => {
        this.setState(prevState => ({
          count: prevState.count + 1
        }));
      };

      render() {
        return (
          <div>
            <button onClick={this.handleClick}>Click me</button>
            <p>You clicked {this.state.count} times</p>
          </div>
        );
      }
    }
  
  TypeScript

In this example, the component has a state called “count” with an initial value of 0. There is a button with a “click” event handler that calls the handleClick() function. This function uses setState() to increase the state of “count” by 1. When the button is clicked, the component is re-rendered with the new value of “count” and the user is shown how many times the button has been clicked.

getDerivedStateFromProps

Replaces the function componentWillReceiveProps. getDerivedStateFromProps is a static method that is invoked after a component is instantiated and when it receives new props. Because it’s a static method, you don’t have access to this within this method, you don’t have access to any other class method. unlike componentWillReceiveProps, you can’t set the state within this method, so the only way to update the status is to return an object. If you don’t want to update any status, just send back null.

Here’ s how componentWillReceiveProps used to work:

    public componentWillReceiveProps(nextProps) {
      if (nextProps.someValue !== this.props.someValue) {
        this.setState({ someState: someValue });
      }
    }
  
  TypeScript

This is how getDerivedStateFromProps works

    public static getDerivedStateFromProps(nextProps, prevState) {
      if (nextProps.someValue !== prevState.someValue) {
        return { someState: nextProps.someValue };
      }
      else return null;
    }

    public componentDidUpdate(prevProps, prevState) {
      if (prevProps.someValue !== this.props.someValue) {
        //Perform some operation here
        this.setState({ someState: someValue });
        this.classMethod();
      }
    }
  
  TypeScript

It receives two parameters: nextProps and prevState. As mentioned before, you won’t be able to access this within this method, so you’ll need to save the props in the state to compare the nextProps with previous props. In the code above, nextProps and prevState are compared, if both are different, an object is returned to update the state. null is returned to indicate that a state update is not required. If the state then changes, componentDidUpdate is called where we can perform the desired operations as we did in componentWillReceiveProps.