React Lifecycle methods. Gotta Catch 'Em All!

Sometimes catchup with all of this React Component lifecycles methods is hard, even for those who worked with part of them on daily basis. React v16.3 introduced some deprecations and some new ones. We will review and retrospect all of them with real-life usage samples.

updated lifecycles docs: https://reactjs.org/docs/react-component.html
about getDerivedStateFromProps and how to migrate from componentWillReceiveProps https://reactjs.org/blog/2018/06/07/you-probably-dont-need-derived-state.html
lifecycle diagram: http://projects.wojtekmaj.pl/react-lifecycle-methods-diagram

bonus, pokemons in cli: https://github.com/lazocoder/pokemon-terminal

Transcript

1. Gotta Catch 'Em All! React Lifecycle methods
2. ↟TFU4UBUF
   JT
   QPTTJCMF
   ↟DPOUBJOT
   ↟QSFWJPVT
   4UBUF
   ↟QSFWJPVT
   1SPQT
   ↟TOBQTIPU
   TPNJUFT
   ↟CFTU
   GPS
   TJEF
   FGGFDUT
   TVCTDSJQUJPO
   BQJ
   DBMMT
   FUD 
   ↟JOWPLFT
   SJHIU
   BGUFS
   SFOEFS
   ↟j since v0.3.0
3. componentDidMount() componentWillMount() since v0.3.0 componentWillMount() deprecated in v16.3.0
4. class LineupWrapper extends React.Component { componentWillMount() { const { channels, dispatch, } = this.props; if (!channels.length) { dispatch(fetchLineup()); } } }
5. ↟CFUUFS
   OPU
   VTF
   TFU4UBUF
   JOTJEF
   ↟EVNC
   ↟SFUVSOT
   CPPMFBO
   ↟DBO
   NBLF
   ZPVS
   BQQMJDBUJPO
   GBTUFS
   ↟DBO
   NBLF
   ZPVS
   EFCVH
   QBJOGVM
   ↟JOWPLFT
   CFGPSF
   SFOEFS
   BOE
   DBO
   BDUVBMMZ
   SFKFDU
   JU
   ↟j since v0.3.0
6. shouldComponentUpdate() since v0.3.0
7. class TeaserList extends React.Component { shouldComponentUpdate(nextProps) { const {teasers} = this.props; const {teasers: teasersNext} = nextProps; return ( teasersListNext.length && lastItem(teasers) !== lastItem(teasersNext) ); } }
8. ↟PGUFO
   OPU
   OFFEFE
   TQFDJBMMZ
   JG
   DPNQPOFOU
   JT
   TUBUFMFTT
   PS
   EPOU
   OFFE
   CJOE
   TPNFUIJOH
   ↟JOWPLFT
   CFGPSF
   DPNQPOFOU
   FWFOU
   NPVOUFE
   ↟PGUFO
   NFTTFE
   XJUI
   TJEF
   FGGFDUT
   TVCTDSJQUJPOT
   BQJ
   DBMMT
   FUD
   IPXFWFS
   XPVME
   CF
   CFUUFS
   UP
   LFFQ
   JU
   DMFBO
   ↟EFGJOFT
   JOJUJBM
   4UBUF
   ↟TVQFS QSPQT
   TIPVME
   CF
   DBMMFE
   JOTJEF
   ↟j since v0.13.0
9. constructor() since v0.13.0
10. class OSD extends React.PureComponent { constructor(props) { super(props); this.state = { isActive: true, isMouseOver: false, }; this.onMouseOverBound = this.onMouseOver.bind(this); } }
11. class OSD extends React.PureComponent { state = { isActive: true, isMouseOver: false, }; } transform-class-properties
12. ↟TUBUJD
    ↟DBMMFE
    FWFO
    JG
    UIFSF
    XBT
    OP
    QSPQ
    DIBOHFT
    ↟DPOUBJOT
    OFYU
    1SPQT
    BOE
    QSFWJPVT
    4UBUF
    ↟JOWPLFT
    BGUFS
    DPOTUSVDUPS
    ↟j NEW since v16.3.0
13. getDerivedStateFromProps() componentWillReceiveProps() since v16.3.0, componentWillReceiveProps() deprecated from v16.3.0
14. static getDerivedStateFromProps({ streamUrl: streamUrlNext, cid: cidNext, pid: pidNext, }, { cid, pid, streamUrl, }) { if ( (streamUrlNext && streamUrlNext !== streamUrl) || cidNext !== cid || pidNext !== pid ) { return { shouldWave: true, }; } return null; }
15. ↟TFU4UBUF
    JT
    QPTTJCMF
    ↟DPOUBJOT
    QSFWJPVT
    1SPQT
    QSFWJPVT
    4UBUF
    BOE
    TOBQTIPU
    TPNFUJNFT
    ↟OPU
    DBMMFE
    PO
    JOJUJBM
    SFOEFS
    ↟XPOsU
    CF
    JOWPLFE
    JG
    TIPVME$PNQPOFOU6QEBUF
    SFUVSOT
    GBMTF
    ↟JOWPLFT
    BGUFS
    FBDI
    VQEBUF
    ↟j since v0.3.0
16. componentDidUpdate() componentWillUpdate() since v16.3.0, componentWillUpdate() deprecated from v16.3.0
17. componentDidUpdate( prevProps, {view: viewPrev}, ) { const {view} = this.state; const {cdaPlayer} = this.props; // handle scroll position when view changed if (isValueChanged(viewPrev, view)) { if (cdaPlayer) { this.scrollToChannelNode(cdaPlayer); } else { this.domNode.scrollIntoView(); } } }
18. ↟TFU4UBUF
    JT
    QPTTJCMF
    ↟XPSLT
    POMZ
    XJUI
    PXO
    DIJMESFO
    ↟DBUDIFT
    SFOEFSJOH
    FSSPST
    ↟j since v16.0.0
19. componentDidCatch() since v16.0.0
20. export default class ErrorWrapper extends React.Component { state = { error: null, errorInfo: null, }; componentDidCatch(error, info) { this.setState({ error, errorInfo: info, }); Raven.captureException(error, {extra: info}); } render() { const {error, errorInfo} = this.state; if (error) { return ( <ScreenError errorTitle={error ? error.toString() : null} errorDescription={errorInfo ? errorInfo.componentStack : null} /> ); } return this.props.children; } }
21. ↟OP
    TFU4UBUF
    ↟JT
    SFRVJSFE
    ↟XPOsU
    CF
    JOWPLFE
    JG
    TIPVME$PNQPOFOU6QEBUF
    SFUVSOT
    GBMTF
    ↟DPVME
    SFUVSO
    ↟OVMM
    ↟TUSJOH
    OVNCFS
    PS
    CPPMFBO
    JO
    UFTUJOH
    QVSQPTFT
    ↟3FBDU
    FMFNFOUT
    PS
    1PSUBMT
    ↟j since v0.3.0
22. render() since v0.3.0
23. render() { return null; } renderless component
24. ↟QBTTFT
    PCKFDU
    UP
    DPNQPOFOU%JE6QEBUF
    ↟JOWPLFE
    SJHIU
    CFGPSF
    SFOEFS
    ↟DPOUBJOT
    ↟QSFWJPVT
    4UBUF
    ↟QSFWJPVT
    1SPQT
    ↟j NEW since v16.3.0
25. getSnapshotBeforeUpdate() since v16.3.0
26. getSnapshotBeforeUpdate(prevProps, prevState) { if (prevProps.list.length < this.props.list.length) { return this.listRef.scrollHeight - this.listRef.scrollTop; } return null; }
27. ↟OP
    TFU4UBUF
    ↟JOWPLFE
    CFGPSF
    DPNQPOFOU
    JT
    HPOF
    EFTUSPZFE
    VONPVOUFE
    ↟EPOsU
    GPSHFU
    UP
    DMFBOVQ
    TVCTDSJQUJPOT
    BOE
    DBODFM
    SFRVFTUT
    ↟j since v0.3.0
28. componentWillUnmount()
29. componentWillUnmount() { this.removeListeners(); clearInterval(this.intervalId); }
30. THX! p.s. https://github.com/lazocoder/pokemon-terminal