React Component Lifecycle methods

Lifecycle methods for Mounting Component to DOM:

constructor(props) {        this.state = {             count: 0        };    }

Lifecycle methods for Updating Component state/props:

componentWillReceiveProps(nextProps){        if (JSON.stringify(this.props.month) !== JSON.stringify(nextProps.month)){            // component recived new props.        }    }
shouldComponentUpdate(nextProps, nextState){        // return a boolean value        return true;    }
import React, { Component } from 'react';class Lifecycle extends Component {    constructor(props) {        console.log('constructor called')        super(props);        this.state = {             count: 0        };        this.Add = this.Add.bind(this);        this.Remove = this.Remove.bind(this);    }    componentWillMount(){        console.log('componentWillMount called')    }    componentDidMount() {        console.log('componentDidMount called')    }    Add(){        this.setState({count: this.state.count + 1})    }    Remove(){        this.setState({count: this.state.count - 1})    }    componentWillReceiveProps(){        console.log('componentWillReceiveProps called')    }    shouldComponentUpdate(){        console.log('shouldComponentUpdate called');        return true    }    componentWillUpdate(){        console.log('componentWillUpdate called')    }    componentDidUpdate(){        console.log('componentDidUpdate called');    }    render() {        console.log('render called');        return (            <div>                <div>                    <h1>{this.state.count}</h1>                </div>                <button onClick={this.Add}>                    <span>+(Add)</span>                </button>                <button onClick={this.Remove}>                    <span>-(Remove)</span>                </button>            </div>        );    }}
// Console Output:constructor calledcomponentWillMount calledrender calledcomponentDidMount called
// console Output:shouldComponentUpdate calledcomponentWillUpdate calledrender calledcomponentDidUpdate called

The article was originally published at MicroPyramid blog




Python, Django, Android and IOS, reactjs, react-native, AWS, Salesforce consulting & development company

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

Create Sitecore JSS App using React JS

React Native Performance: Arrow Functions & Binding

Angular Vs Vue: Which Framework to Choose in 2022?

Build an animated modal using React, Flexbox, CSS Grids and CSS transitions

JavaScript Webix library through the eyes of a freshman. Part 2. Dealing with forms.

Dutch National Flag or 3-Way Partitioning

Stop Using Conditional Statements Everywhere in JavaScript, Use an Object Literal instead

DenoPress Part 3 — Edit Posts

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store


Python, Django, Android and IOS, reactjs, react-native, AWS, Salesforce consulting & development company

More from Medium

The Complete JS Notes #4 🧵

Styling with React components

ReactJS easy data fetching

fetch npm packages and show them to the user

Building Forms with React Hook Forms