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;