UnMounting Phase In React Life Cycle

Phases / Lifecycle of Components

Unmounting Phase In React Life Cycle

• The next phase in the lifecycle is when a component is removed from the DOM, or unmounting as React likes to call it.
• React has only one built-in method that gets called when a component is unmounted:
• componentWillUnmount()
• ComponentWillUnmount is the only method that executes in unmount phase.
• Just before the component gets removed from actual DOM, this method gets called.
• Along with removal of this component from DOM tree, all children of this component also gets removed automatically.
• The componentWillUnmount() method allows us to execute the React code when the component gets destroyed or unmounted from the DOM (Document Object Model)
• This method is called during the Unmounting phase of the React Life-cycle i.e before the component gets unmounted.
• All the cleanups such as invalidating timers, canceling network requests, or cleaning up any subscriptions that were created in componentDidMount() should be coded in the componentWillUnmount() method block.
• Cleanup activities helps in improving performances, memory leakages and maintain security.
• You should not call setState() in componentWillUnmount() because the component will never be re-rendered.

Source Code

ParentClass.js File Code

import React, { Component } from 'react';
import ChildClass from './ChildClass';

export default class ParentClass extends Component {
    constructor(props) {
      super(props)
    
      this.state = {
         active:true
      }
    }
    
    changeState = () => {
        this.setState({
            active:false
        });
    }

  render() {
    console.log("Parent Render Called..");
    return (
      <div>
        {this.state.active ? <ChildClass/> : <h1>Component Deleted..</h1>}
        <button onClick={this.changeState}>Change State</button>
      </div>
    )
  }
}

ChildClass.js File Code

import React, { Component } from 'react'

export default class ChildClass extends Component {
    componentWillUnmount(){
        console.log("componentWillUnmount Called..");
    }
  render() {
    return (
      <div>
        <h1>Hey Adil Brother..</h1>
      </div>
    )
  }
}

Index.js File Code

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import BindingEvent from './BindingEvent';
import ClickFunction from './ClickFunction';
import Mounting1 from './Mounting1';
import Updating1 from './Updating1';
import Person from './Person';
import reportWebVitals from './reportWebVitals';
import ParentClass from './ParentClass';
import ParentComponent from './ParentComponent';
import NewComponent from './NewComponent';
import Students from './Students';
import StyleComponent from './StyleComponent';

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
    <div className='App'>
    <ParentClass/>
    </div>
);

// If you want to start measuring performance in your app, pass a function
// to log results (for example: reportWebVitals(console.log))
// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
reportWebVitals();

Click Below Link to Download Notes & Source Code Of This Blog

https://www.mediafire.com/file/wrg8hojqe9m69qb/UN+MOUNTING+React+JS.rar/file