React JS Life Cycle Methods

When we create a component in react, component goes to several stages in a lifecycle. React provide us built-in methods in which we can overwrite particular stages in a lifecycle. Below is the list of main lifecycle methods of react.

  • 1. Mounting
  • 2. Updating - When a component is re-rendered as a result of changes to either its props or states
  • 3. Unmounting - When a component is bring removed from DOM
  • 4. ErrorHandling - When there is an error during rendering, in a lifecycle method or same in a child component

Let's understand in detail.

1. Mounting
  • When an instance of component is being created and inserted into the DOM
  • Mounting have four methods
    • a. constructor
    • b. static getDerivedStateFromProps
    • c. render
    • d. componentDidMount

2. Updating

  • When a component is re-rendered as a result of changes to either its props or states
  • Updating have four methods
    • a. static getDerivedStateFromProps
    • b. shouldComponentUpdate
    • c. render
    • d. getSanpshotBeforeUpdate
    • e. componentDidUpdate

3. Unmounting

  • When a component is bring removed from DOM
  • Unmounting just have one method
    • a. componentWillMount

4. ErrorHandling

  • When there is a error duting rendering, in a lifecycle method or same in a child component
  • ErrorHandling have two method
    • a. static getDerivedStateFromError
    • b. componentDidCatch
  • Component Mounting Lifecycle Methods

    We can get more ideas by looking below the example.

    1. ParentComponent

    ParentComponent
    import React, { Component } from 'react'; import LifecycleB form './LifecycleB'; class LifecycleA extends Component { constructor(props) { super(props) this.state = { name:'React' } console.log('LifecycleA constructor'); } static getDerivedStateFromProps(props, state){ console.log('LifecycleA getDerivedStateFromProps'); return null; } componentDidMount() { console.log('LifecycleA componentDidMount'); } render() { console.log('LifecycleA render') return( <div> <div> Lifecycle A</div> <LifecycleB /> </div> ); } } export default LifecycleA;

    2. ChildComponent

    ChildComponent
    import React, { Component } from 'react'; class LifecycleB extends Component { constructor(props) { super(props) this.state = { name:'React' } console.log('LifecycleB constructor'); } static getDerivedStateFromProps(props, state){ console.log('LifecycleB getDerivedStateFromProps'); return null; } componentDidMount() { console.log('LifecycleB componentDidMount'); } render() { console.log('LifecycleB render') return( <div> <div> Lifecycle B</div> </div> ); } } export default LifecycleA;

    When we execute above code, it will console log as per below,

    Output
    LifecycleA constructor
    LifecycleA getDerivedStateFromProps
    LifecycleA render
    LifecycleB constructor
    LifecycleB getDerivedStateFromProps
    LifecycleB render
    LifecycleB componentDidMount
    LifecycleA componentDidMount
    

    Component Updating Lifecycle Methods

    When we check same thing for updating lifecycle methods then console log looks as per bleow.

    Output
    LifecycleA shouldComponentUpdate
    LifecycleA render
    LifecycleB getDerivedStateFromProps
    LifecycleB shouldComponentUpdate
    LifecycleB render
    LifecycleB getSanpshotBeforeUpdate
    LifecycleA getSanpshotBeforeUpdate
    LifecycleB componentDidUpdate
    LifecycleA componentDidUpdate
    

     

    ← Previous

    Next →