/Javascript/React/Reactjs lifecycle class components

Reactjs lifecycle class components

import React from 'react';
import ReactDOM from 'react-dom';
 
class Test extends React.Component {
    constructor(props)
    {
        super(props);
        this.state = { hello : "World!" };
    }
 
    componentWillMount()
    {
        console.log("componentWillMount()");
    }
 
    componentDidMount()
    {
        console.log("componentDidMount()");
    }
 
    changeState()
    {
        this.setState({ hello : "Geek!" });
    }
 
    render()
    {
        return (
            <div>
            <h1>GeeksForGeeks.org, Hello{ this.state.hello }</h1>
            <h2>
            <a onClick={this.changeState.bind(this)}>Press Here!</a>
            </h2>
            </div>);
    }
 
    shouldComponentUpdate(nextProps, nextState)
    {
        console.log("shouldComponentUpdate()");
        return true;
    }
 
    componentWillUpdate()
    {
        console.log("componentWillUpdate()");
    }
 
    componentDidUpdate()
    {
        console.log("componentDidUpdate()");
    }
}
 
ReactDOM.render(
    <Test />,
    document.getElementById('root'));

Source: geeksforgeeks.org

Similar codes

0 vote318 views1 answer
React native geocoding
Javascript React
0 vote309 views1 answer
React native camscanner application mobile code
Javascript React
6 votes295 views2 answers
Google sign up react npm
Javascript React
15 votes281 views4 answers
Get query params react
Javascript React
0 vote309 views1 answer
Backgroundcolor react
Javascript React
12 votes330 views3 answers
Font weight react native
Javascript React
11 votes271 views3 answers
React Hook "useState" is called in function "cardState" which is neither a React function component or a custom React Hook function
Javascript React
-1 vote278 views3 answers
Instalar react native paper
Javascript React
0 vote281 views1 answer
React js set default route
Javascript React
4 votes300 views2 answers
Google map react search place
Javascript React