React-Lifecycle-Cheatsheet/README.md

173 lines
3.2 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
`constructor () => void`
2018-04-06 15:02:31 -04:00
```js
2018-04-06 14:50:21 -04:00
/**
* Create state and call super
*
* @param {object} props
*/
constructor (props) {
super(props);
this.state = {
foo: 'bar'
}
2018-04-06 14:50:21 -04:00
}
```
#### static getDerivedStateFromProps ()
`static getDerivedStateFromProps (nextProps, prevState) => nextState`
2018-04-06 15:02:31 -04:00
```js
/**
* Props have changed, return the updated state or null
*
* @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
`componentDidMount() => void`
```js
/**
* Component mounted, will render soon
*/
componentDidMount () {
// Network calls, state changes,
// anything is fair game here
}
```
2018-04-06 14:50:21 -04:00
## Updating
#### shouldComponentUpdate ()
`shouldComponentUpdate (nextProps, nextState) => shouldUpdate (boolean)`
```js
/**
* Hook to control re-render
*
* @param {object} nextProps
* @param {object} nextState
* @return {boolean} - Whether to render this cycle
*/
shouldComponentUpdate (nextProps, nextState) {
// Default in React.Component
return true;
// React.PureComponent implements this method
// with a shallow compare of props and state
}
```
#### render ()
`render () => JSX`
```js
/**
* Render returned components
*
* @return {React Element | string | number | Portal | null | boolean}
*/
render () {
return <div />;
}
```
#### getSnapshotBeforeUpdate ()
`getSnapshotBeforeUpdate (prevProps, prevState) => any`
```js
/**
* Get/set DOM values. Return value is passed to componentDidUpdate
*
* @param {object} prevProps
* @param {object} prevState
* @return {any}
*/
getSnapshotBeforeUpdate (prevProps, prevState) {
return {
bar: 'foo'
};
}
```
#### componentDidUpdate ()
2018-04-06 14:50:21 -04:00
`componentDidUpdate (prevProps, prevState, snapshot) => void`
```js
/**
* The component updated, do stuff before the next cycle, like network requests
*
* @param {object} prevProps
* @param {object} prevState
* @param {any | undefined} snapshot - output from getSnapshotBeforeUpdate
*/
componentDidUpdate (prevProps, prevState, snapshot = undefined) {
// Best place to do actions depending on previous props and state
}
```
2018-04-06 14:50:21 -04:00
## Unmounting
#### componentWillUnmount ()
`componentWillUnmount () => void`
```js
/**
* Teardown stuff
*/
componentWillUnMount () {
// Cleanup whatever you need to before the
// component unmounts
}
```
---
## Deprecated
### UNSAFE_componentWillMount ()
`componentWillMount () => void`
Use [`componentDidMount ()`](#componentdidmount-) instead.
### UNSAFE_componentWillReceiveProps ()
`componentWillRecieveProps (newProps) => void`
Use [`static getDerivedStateFromProps ()`](#static-getderivedstatefromprops-) instead.
### UNSAFE_componentWillUpdate ()
`componentWillUpdate (nextProps, nextState) => void`
Use [`componentDidUpdate ()`](#componentdidupdate-) instead.