ReactJS Component Lifecycle Part 3

We will examine the lifecycle of a component in ReactJS.

Each component has methods to be run before, during and after loading. The word “will” is used for methods before they are loaded, and the word “did” is used for methods after they are loaded.

constructor()
It is called before the component is loaded. Since our component is a subclass of React.Component, it must be used with “super(props)”, otherwise the component properties will not be transferred to the constructor() method.

“State” definition must also be made in constructor(). If you are not going to use “State”, then there is no need for the constructor() method and it is unnecessary to use the class structure for this.

constructor(props) {
  super(props);
  this.state = {
    data: props.data
  };
}

The most important point to note here is that when “props” is updated, “state” is not updated! For this, the “lifting state up” method is used; We will examine this in another article.

In fact, we can do this by using “getDerivedStateFromProps()”, which we will briefly talk about later, but the “lifting state up” method is recommended by ReactJS and is healthier.

getDerivedStateFromProps()
When the properties of the component change, it also changes its state. Of course, you determine how this process will be done. If the operations you perform in it return the state values as “null”, the state will not be updated; if you return the state values, they will be updated.

static getDerivedStateFromProps(nextProps, prevState) {
    console.log(nextProps.value);
    if (nextProps.value ===0{
        return null;
    }
    return {
        value: nextProps.value
    }
}

Since getDerivedStateFromProps() is not an “instance” method, we define it by writing “static” in front of it. nexProps are the new values of the properties. prevState is the old values of state. If you “return” a value by making edits within the method according to your needs, it works as “setState()”.

componentDidMount()
It runs after the component is installed. It is especially best to make RESTful requests here. It is very dangerous to use the “setState()” method here. With each state update, the component is rendered again.

shouldComponentUpdate()
returns a Boolean value. We return a “true” or “false” value according to the conditions we write in it. It returns “true” value by default.

shouldComponentUpdate(nextProps, nextState) {
    console.log(nextProps, nextState);
    if (nextProps.value === nextState.value===) {
        return true;
    }
    return false;
}

getSnapshotBeforeUpdate()
You can store the last values of the component before its state is updated. This data is automatically sent as a parameter to the “componentDidUpdate” method, which we will talk about later.

getSnapshotBeforeUpdate(prevProps, prevState) {
    if(prevProps.value === prevState.value) {
        return prevState.value;
    }
    return prevProps.value;
}

componentDidUpdate()
It is called after the component has been completely updated. It is the best place to compare incoming data with component data, especially after making RESTful requests.

componentDidUpdate(prevProps, prevState, snapshot) {
    console.log(prevProps, prevState);
    console.log(snapshot);
}

componentWillUnmount()
It works when the component is removed or destroyed. You can delete all information about the component from the browser and terminate timer or RESTfull requests. We can say that it is the same as the destroy methods of jQuery Plugins.