React LifeCycle method

There are three phases :

1. Mounting

2. Updating

3. Unmounting

Mounting phase lifecycle in-class component in react js with example

In React class components, the mounting phase is the initial phase where the component is created and added to the DOM. During the mounting phase, the following lifecycle methods are called in the order listed below:

1. constructor(props) - This method is called first and initializes the component's state and binds class methods.

2. static getDerivedStateFromProps(props, state) - This method is called after the constructor and before the render method. It allows the component to update its state based on changes in props.

3. render() - This method is called next and returns the JSX that defines the component's UI.

4. componentDidMount() - This method is called after the component has been rendered to the DOM. It's used for any side effects, like fetching data from an API or setting up event listeners.

Here's an example of a class component with the mounting phase lifecycle methods:

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

  static getDerivedStateFromProps(props, state) {
    // update state based on props
    return null;
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <h1>My Component</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click me</button>
      </div>
    );
  }

  componentDidMount() {
    // setup side effects
  }
}
 

In this example, the constructor initializes the component's state and binds the handleClick method to the component instance. The getDerivedStateFromProps method is not used and simply returns null.

The render method returns JSX that includes a button element with an onClick handler that calls the handleClick method to update the component's state.

Finally, the componentDidMount method is called afte

Updating phase lifecycle in-class component React js:

In a React class component, the updating phase lifecycle methods are called when the component's state or props are updated. There are several methods that are called during this phase:

1. shouldComponentUpdate(nextProps, nextState): This method is called before rendering when new props or state are received. It returns a boolean value that determines whether or not the component should update. If the method returns false, the component will not update.

2. componentWillUpdate(nextProps, nextState): This method is called just before the component is updated. It receives the new props and state as arguments.

3. render(): This method is called to render the updated component. It returns a React element.

4. componentDidUpdate(prevProps, prevState): This method is called just after the component is updated. It receives the previous props and state as arguments.

Here's an example of how these methods can be used in a class component:

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

  shouldComponentUpdate(nextProps, nextState) {
    // Only update if the count has changed
    return nextState.count !== this.state.count;
  }

  componentWillUpdate(nextProps, nextState) {
    console.log('Component is about to update');
  }

  componentDidUpdate(prevProps, prevState) {
    console.log('Component has updated');
  }

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

  render() {
    return (
      <div>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Increment</button>
      </div>
    );
  }
}
 

In this example, the shouldComponentUpdate method checks whether the count state has changed. If it hasn't, the component won't update. The componentWillUpdate and componentDidUpdate methods are used to log messages to the console before and after the component updates.

Unmounting phase lifecycle in class component in react js

Unmounting phase in the React class component lifecycle refers to the stage when the component is being removed from the DOM. During this phase, React provides several methods that you can use to perform cleanup operations or reset the state of the component.

The following methods are called in sequence during the unmounting phase:

1. componentWillUnmount(): This method is called just before the component is removed from the DOM. You can use this method to perform any necessary cleanup operations, such as cancelling network requests, clearing timers or removing event listeners.

2. componentDidUnmount(): This method is called after the component is unmounted from the DOM. This method can be used to perform any cleanup operations that require access to the DOM, such as removing a modal from the document body.

Here's an example of how these methods can be used in a class component:

class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      // state initialization
    };
  }

  componentDidMount() {
    // set up some data
  }

  componentWillUnmount() {
    // clean up data
  }

  render() {
    // render component
  }
}
 

In this example, the componentDidMount() method is called when the component is added to the DOM, and the componentWillUnmount() method is called when the component is removed from the DOM. You can use these methods to set up and clean up data as needed during the component lifecycle.