React-Lifecycle-Cheatsheet/README.md

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

`constructor () => void`

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

#### static getDerivedStateFromProps ()

`static getDerivedStateFromProps (nextProps, prevState) => nextState`

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

`componentDidMount() => void`

```js
/**
 * Component mounted, will render soon
 */
componentDidMount () {
  // Network calls, state changes, 
  // anything is fair game here
}
```

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

`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
}
```

## 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.