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

Bogdan Plieshka

June 27, 2018
Tweet

More Decks by Bogdan Plieshka

Other Decks in Technology

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