# React-Lifecycle-Cheatsheet

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 ()

```js
/**
 * Create state and call super
 *
 * @param {object} props
 */
constructor (props) {
	super(props);
	this.state = {
		foo: 'bar'
	}
}
```

#### static getDerivedStateFromProps ()

```js
/**
 * 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 ()

## Updating

#### shouldComponentUpdate ()
#### render ()
#### getSnapshotBeforeUpdate ()
#### componentDidUpdate ()

## Unmounting

#### componentWillUnmount ()

---
## Deprecated

### UNSAFE_componentWillMount ()
### UNSAFE_componentWillReceiveProps ()
### UNSAFE_componentWillUpdate ()