diff --git a/README.md b/README.md index de45993..bf09233 100644 --- a/README.md +++ b/README.md @@ -8,6 +8,8 @@ Short reference of React.Component lifecycle methods so I don't have to scroll t #### constructor () +`constructor () => void` + ```js /** * Create state and call super @@ -15,43 +17,47 @@ Short reference of React.Component lifecycle methods so I don't have to scroll t * @param {object} props */ constructor (props) { - super(props); - this.state = { - foo: 'bar' - } + super(props); + this.state = { + foo: 'bar' + } } ``` #### static getDerivedStateFromProps () +`static getDerivedStateFromProps (nextProps, prevState) => nextState` + ```js /** - * Props have changed, return the updated state + * 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' - }; + // 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 + // Network calls, state changes, + // anything is fair game here } ``` @@ -59,6 +65,8 @@ componentDidMount () { #### shouldComponentUpdate () +`shouldComponentUpdate (nextProps, nextState) => shouldUpdate (boolean)` + ```js /** * Hook to control re-render @@ -68,15 +76,18 @@ componentDidMount () { * @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 + // 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 @@ -84,19 +95,43 @@ shouldComponentUpdate (nextProps, nextState) { * @return {React Element | string | number | Portal | null | boolean} */ render () { - return
; + return
; } ``` + #### getSnapshotBeforeUpdate () -```js -getSnapshotBeforeUpdate (prevProps, prevState) { -} -``` -#### componentDidUpdate () +`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 } ``` @@ -104,10 +139,15 @@ componentDidUpdate (prevProps, prevState, snapshot = undefined) { #### componentWillUnmount () +`componentWillUnmount () => void` + ```js +/** + * Teardown stuff + */ componentWillUnMount () { - // Cleanup whatever you need to before the - // component unmounts + // Cleanup whatever you need to before the + // component unmounts } ``` @@ -115,5 +155,19 @@ componentWillUnMount () { ## Deprecated ### UNSAFE_componentWillMount () + +`componentWillMount () => void` + +Use [`componentDidMount ()`](#componentdidmount-) instead. + ### UNSAFE_componentWillReceiveProps () -### UNSAFE_componentWillUpdate () \ No newline at end of file + +`componentWillRecieveProps (newProps) => void` + +Use [`static getDerivedStateFromProps ()`](#static-getderivedstatefromprops-) instead. + +### UNSAFE_componentWillUpdate () + +`componentWillUpdate (nextProps, nextState) => void` + +Use [`componentDidUpdate ()`](#componentdidupdate-) instead. \ No newline at end of file