Upgrade to Pro — share decks privately, control downloads, hide ads and more …

React Lifecycle methods. Gotta Catch 'Em All!

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

13a0857775ce894b33288ce85d52efd8?s=128

Bogdan Plieshka

June 27, 2018
Tweet

Transcript

  1. Gotta Catch 'Em All! React Lifecycle methods

  2. ↟TFU4UBUF JTQPTTJCMF ↟DPOUBJOT ↟QSFWJPVT4UBUF ↟QSFWJPVT1SPQT ↟TOBQTIPU TPNJUFT  ↟CFTUGPSTJEFFGGFDUT TVCTDSJQUJPO

    BQJDBMMT FUD  ↟JOWPLFTSJHIUBGUFSSFOEFS ↟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. ↟CFUUFSOPUVTFTFU4UBUF JOTJEF ↟EVNC ↟SFUVSOTCPPMFBO ↟DBONBLFZPVSBQQMJDBUJPOGBTUFS ↟DBONBLFZPVSEFCVHQBJOGVM ↟JOWPLFTCFGPSFSFOEFSBOEDBOBDUVBMMZSFKFDUJU ↟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. ↟PGUFOOPUOFFEFE TQFDJBMMZJGDPNQPOFOU JTTUBUFMFTTPSEPOUOFFECJOETPNFUIJOH ↟JOWPLFTCFGPSFDPNQPOFOUFWFOUNPVOUFE ↟PGUFONFTTFEXJUITJEFFGGFDUT TVCTDSJQUJPOT BQJDBMMT FUD IPXFWFS XPVMECFCFUUFSUPLFFQJUDMFBO

    ↟EFGJOFTJOJUJBM4UBUF ↟TVQFS QSPQT TIPVMECFDBMMFEJOTJEF ↟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 ↟DBMMFEFWFOJGUIFSFXBTOPQSPQDIBOHFT ↟DPOUBJOTOFYU1SPQTBOEQSFWJPVT4UBUF ↟JOWPLFTBGUFSDPOTUSVDUPS ↟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 JTQPTTJCMF ↟DPOUBJOTQSFWJPVT1SPQT QSFWJPVT4UBUF BOETOBQTIPU TPNFUJNFT  ↟OPUDBMMFEPOJOJUJBMSFOEFS ↟XPOsUCFJOWPLFEJG TIPVME$PNQPOFOU6QEBUF

    SFUVSOTGBMTF ↟JOWPLFTBGUFSFBDIVQEBUF ↟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 JTQPTTJCMF ↟XPSLTPOMZXJUIPXODIJMESFO ↟DBUDIFTSFOEFSJOHFSSPST ↟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. ↟OPTFU4UBUF  ↟JTSFRVJSFE ↟XPOsUCFJOWPLFEJG TIPVME$PNQPOFOU6QEBUF SFUVSOTGBMTF ↟DPVMESFUVSO ↟OVMM ↟TUSJOH OVNCFSPSCPPMFBO

    JOUFTUJOH QVSQPTFT  ↟3FBDUFMFNFOUTPS1PSUBMT ↟j since v0.3.0
  22. render() since v0.3.0

  23. render() { return null; } renderless component

  24. ↟QBTTFTPCKFDUUPDPNQPOFOU%JE6QEBUF  ↟JOWPLFESJHIUCFGPSFSFOEFS  ↟DPOUBJOT ↟QSFWJPVT4UBUF ↟QSFWJPVT1SPQT ↟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. ↟OPTFU4UBUF  ↟JOWPLFECFGPSFDPNQPOFOUJTHPOF EFTUSPZFE VONPVOUFE  ↟EPOsUGPSHFUUPDMFBOVQTVCTDSJQUJPOT BOEDBODFMSFRVFTUT ↟j since

    v0.3.0
  28. componentWillUnmount()

  29. componentWillUnmount() { this.removeListeners(); clearInterval(this.intervalId); }

  30. THX! p.s. https://github.com/lazocoder/pokemon-terminal