Code icon

REACT - LIFECYCLE METHODS

Links


    //LIFECYCLE METHODS <
    //render() and componentWillUnmount
    componentDidMount()//{Get the data I need to correctly display }
    
    shouldComponentUpdate(nextProps, nextState)//{return true if want it to update}
    componentDidMount(){}
    getSnapshotBeforeUpdate()
    componentWillUnmount()//{//Eg: remove event listeners //teardown or clean up your code before your component disappears}

    //Deprecated 
    UNSAFE_componentWillReceiveProps(nextProps)//{  if(nextProps.whatever !== this.props.whatever) //Deprecated}
    componentWillMount(){}
    componentWillUpdate()
    


    // <
    //LIFECYCLE METHODS  -- not to be visualized
    import React from 'react'


    //url: https://es.reactjs.org/docs/state-and-lifecycle.html
    //https://www.google.com/search?q=engineering+react+lifecycles&oq=engineering+react+lifecycles+&aqs=chrome..69i57j0i22i30.5992j0j7&sourceid=chrome&ie=UTF-8



    class App extends React.Component { 
    constructor(){
        super()
        this.state ={
            count: 0
        }

    }

    //Deprecated 
    // UNSAFE_componentWillReceiveProps(nextProps){if(nextProps.whatever !== this.props.whatever) //Deprecated}
    // componentWillMount(){}
    // componentWillUpdate(){}
    // componentDidMount(){Get the data I need to correctly display }


    static getDerivedStateFromProps(props, state){
        //returne new update state based upon the props
    }
    componentDidMount(){}
    getSnapshotBeforeUpdate(){
        //create backup of the current way things are
    }
    shouldComponentUpdate(nextProps, nextState){
        return true //if want it to update
    }
    componentWillUnmount(){
        //Eg: remove event listeners //teardown or clean up your code before your component disappears
    }

    render(){
        return (
            <div>
            <h1>{this.state.count}</h1>
            <button>Change!</button>
            </div>
        )
    }
    }


    export default App;