React lifecycle hooks are methods where you can do appropriate things

We'll look at all the available lifecycle methods, the order in which they are called and what kind of operations you can perform within a particular life cycle hook.

React version in discussion: v16

constructor()

can be used to set initial state of the component

componentWillMount()

  • You can initialize state and initial props here
  • Only hook that run on server rendering
  • Don't make a ajax call here
  • Sometimes based on props you can change the state here
  • You can set global events like eg : 
componentWillMount() {
		if(window.innerWidth > 500) {
           this.setState({innerWidth: window.innerWidth})                    
        }                         
}

render()

  • Don't set state here, will lead to re-render
  • DOM element can be removed once this is called

componentDidMount()

  • This runs after the component has rendered
  • This doesn't run until the child components have completed their hooks
  • Only runs during initial life cycle
  • Can make a ajax call here
  • Can do subscriptions here and unsubscribe in componentWillUnmount method
  • Don't run setState here

componentWillRecieveProps(nextProps)

  • Not called on initial render
  • Runs when you re-render by updating the state or prop
  • We can setState here

ShouldComponentUpdate(nextProps, nextState)

  • Runs when there is change in state or props
  • Used for controlling the re-rendering of the component
  • Can check the change in state
  • returning false will will stop re-rendering of this component. This return true by default.
  • Don't run setState here

componentWillUpdate()

  • Runs after shouldComponentUpdate
  • This is similar to ComponentWillMount
  • Can do all set some variables based on states and props
  • Don't run the setState here to avoid infinite loop

componentDidUpdate()

  • Runs after updating render()
  • Can setup third party UI elements here
  • Can call setState here

ComponentWillUnmount()

  • Runs when component dies
  • Can cancel any outgoing network requests
  • Can remove all event listeners associated with the component
  • You can unsubscribe the subscriptions here.
  • Don't run setState here

Sample Component will all lifecyle methods

class App extends Component {
    constructor() {
        super();
        this.state = {
            name: 'John';
    }
    }

    componentWillMount() {

    }

    componentDidMount() {

    }

    componentWillRecieveProps(nextProps) {

    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate() {

    }

    componentDidUpdate(prevProps, prevState) {

    }

    componentWillUnmount() {

    }

    render() {
        return <div>Hi</div>;
    }
}

Simple example showcasing lifecycle methods triggering order when a ParentComponent renders a ChildComponent

`-
This pen can be used to verify the order of execution of React lifecyle methods, open console in dev tools

Update to this Article

These life cycle method are valid for React version before V.1.63

Methods deprecated in React V16.4 are:

  • componentWillMount and can be used as UNSAFE_componentWillMount
  • componentWillReceiveProps and can be used as UNSAFE_componentWillReceiveProps and replaced by getDerivedStateFromProps in V16.4
  • componentWillUpdate and can be used as UNSAFE_componentWillUpdate and replaced by getSnapshotBeforeUpdate in V16.4

New article for lifecycle methods coming soon...

React
Copied!