React-Lifecycle-Cheatsheet/README.md

64 lines
1.1 KiB
Markdown
Raw Normal View History

2018-04-06 14:40:48 -04:00
# React-Lifecycle-Cheatsheet
2018-04-06 14:50:21 -04:00
Short reference of React.Component lifecycle methods so I don't have to scroll through the huge text on the official documentation
![Lifecycle Diagram](./Lifecycle-chart.jpg)
## Mounting
#### constructor ()
2018-04-06 14:50:21 -04:00
```
/**
* Create state and call super
*
* @param {object} props
*/
constructor (props) {
super(props);
this.state = {
foo: 'bar'
}
}
```
#### static getDerivedStateFromProps ()
```
/**
* Props have changed, return the updated state
*
* @param {object} nextProps - Props for the next render
* @param {object} prevState - State from previous render
* @return {object | null} - The change to the state
*/
static getDerivedStateFromProps (nextProps, prevState) {
// Nothing to update
return null;
// Set new state
return {
foo: 'foobar'
};
}
```
#### componentDidMount ()
2018-04-06 14:50:21 -04:00
## Updating
#### shouldComponentUpdate ()
#### render ()
#### getSnapshotBeforeUpdate ()
#### componentDidUpdate ()
2018-04-06 14:50:21 -04:00
## Unmounting
#### componentWillUnmount ()
---
## Deprecated
### UNSAFE_componentWillMount ()
### UNSAFE_componentWillReceiveProps ()
### UNSAFE_componentWillUpdate ()