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
   

   View Slide

2. ↟TFU4UBUF
   JTQPTTJCMF
   ↟DPOUBJOT
   ↟QSFWJPVT4UBUF
   ↟QSFWJPVT1SPQT
   ↟TOBQTIPU TPNJUFT
   
   ↟CFTUGPSTJEFFGGFDUT TVCTDSJQUJPO BQJDBMMT FUD
   
   ↟JOWPLFTSJHIUBGUFSSFOEFS
   ↟j
   since v0.3.0
   

   View Slide

3. componentDidMount()
   componentWillMount()
   since v0.3.0 componentWillMount() deprecated in v16.3.0
   

   View Slide

4. class LineupWrapper extends React.Component {
   componentWillMount() {
   const {
   channels,
   dispatch,
   } = this.props;
   if (!channels.length) {
   dispatch(fetchLineup());
   }
   }
   }
   

   View Slide

5. ↟CFUUFSOPUVTFTFU4UBUF
   JOTJEF
   ↟EVNC
   ↟SFUVSOTCPPMFBO
   ↟DBONBLFZPVSBQQMJDBUJPOGBTUFS
   ↟DBONBLFZPVSEFCVHQBJOGVM
   ↟JOWPLFTCFGPSFSFOEFSBOEDBOBDUVBMMZSFKFDUJU
   ↟j
   since v0.3.0
   

   View Slide

6. shouldComponentUpdate()
   since v0.3.0
   

   View Slide

7. class TeaserList extends React.Component {
   shouldComponentUpdate(nextProps) {
   const {teasers} = this.props;
   const {teasers: teasersNext} = nextProps;
   return (
   teasersListNext.length &&
   lastItem(teasers) !== lastItem(teasersNext)
   );
   }
   }
   

   View Slide

8. ↟PGUFOOPUOFFEFE TQFDJBMMZJGDPNQPOFOU
   JTTUBUFMFTTPSEPOUOFFECJOETPNFUIJOH
   ↟JOWPLFTCFGPSFDPNQPOFOUFWFOUNPVOUFE
   ↟PGUFONFTTFEXJUITJEFFGGFDUT
   TVCTDSJQUJPOT BQJDBMMT FUD
   IPXFWFS
   XPVMECFCFUUFSUPLFFQJUDMFBO
   ↟EFGJOFTJOJUJBM4UBUF
   ↟TVQFS QSPQT
   TIPVMECFDBMMFEJOTJEF
   ↟j
   since v0.13.0
   

   View Slide

9. constructor()
   since v0.13.0
   

   View Slide

10. class OSD extends React.PureComponent {
    constructor(props) {
    super(props);
    this.state = {
    isActive: true,
    isMouseOver: false,
    };
    this.onMouseOverBound = this.onMouseOver.bind(this);
    }
    }
    

    View Slide

11. class OSD extends React.PureComponent {
    state = {
    isActive: true,
    isMouseOver: false,
    };
    }
    transform-class-properties
    

    View Slide

12. ↟TUBUJD
    ↟DBMMFEFWFOJGUIFSFXBTOPQSPQDIBOHFT
    ↟DPOUBJOTOFYU1SPQTBOEQSFWJPVT4UBUF
    ↟JOWPLFTBGUFSDPOTUSVDUPS
    ↟j
    NEW
    since v16.3.0
    

    View Slide

13. getDerivedStateFromProps()
    componentWillReceiveProps()
    since v16.3.0, componentWillReceiveProps() deprecated from v16.3.0
    

    View Slide

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

    View Slide

15. ↟TFU4UBUF
    JTQPTTJCMF
    ↟DPOUBJOTQSFWJPVT1SPQT QSFWJPVT4UBUF
    BOETOBQTIPU TPNFUJNFT
    
    ↟OPUDBMMFEPOJOJUJBMSFOEFS
    ↟XPOsUCFJOWPLFEJG
    TIPVME$PNQPOFOU6QEBUF
    SFUVSOTGBMTF
    ↟JOWPLFTBGUFSFBDIVQEBUF
    ↟j
    since v0.3.0
    

    View Slide

16. componentDidUpdate()
    componentWillUpdate()
    since v16.3.0, componentWillUpdate() deprecated from v16.3.0
    

    View Slide

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

    View Slide

18. ↟TFU4UBUF
    JTQPTTJCMF
    ↟XPSLTPOMZXJUIPXODIJMESFO
    ↟DBUDIFTSFOEFSJOHFSSPST
    ↟j
    since v16.0.0
    

    View Slide

19. componentDidCatch()
    since v16.0.0
    

    View Slide

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 (
    errorTitle={error ? error.toString() : null}
    errorDescription={errorInfo ? errorInfo.componentStack :
    null}
    />
    );
    }
    return this.props.children;
    }
    }
    

    View Slide

21. ↟OPTFU4UBUF
    
    ↟JTSFRVJSFE
    ↟XPOsUCFJOWPLFEJG
    TIPVME$PNQPOFOU6QEBUF
    SFUVSOTGBMTF
    ↟DPVMESFUVSO
    ↟OVMM
    ↟TUSJOH OVNCFSPSCPPMFBO JOUFTUJOH
    QVSQPTFT
    
    ↟3FBDUFMFNFOUTPS1PSUBMT
    ↟j
    since v0.3.0
    

    View Slide

22. render()
    since v0.3.0
    

    View Slide

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

    View Slide

24. ↟QBTTFTPCKFDUUPDPNQPOFOU%JE6QEBUF
    
    ↟JOWPLFESJHIUCFGPSFSFOEFS
    
    ↟DPOUBJOT
    ↟QSFWJPVT4UBUF
    ↟QSFWJPVT1SPQT
    ↟j
    NEW
    since v16.3.0
    

    View Slide

25. getSnapshotBeforeUpdate()
    since v16.3.0
    

    View Slide

26. getSnapshotBeforeUpdate(prevProps, prevState) {
    if (prevProps.list.length < this.props.list.length) {
    return this.listRef.scrollHeight - this.listRef.scrollTop;
    }
    return null;
    }
    

    View Slide

27. ↟OPTFU4UBUF
    
    ↟JOWPLFECFGPSFDPNQPOFOUJTHPOF
    EFTUSPZFE VONPVOUFE
    
    ↟EPOsUGPSHFUUPDMFBOVQTVCTDSJQUJPOT
    BOEDBODFMSFRVFTUT
    ↟j
    since v0.3.0
    

    View Slide

28. componentWillUnmount()
    

    View Slide

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

    View Slide

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

    View Slide