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

Understanding Recompose through examples

Olena Sovyn
November 26, 2017

Understanding Recompose through examples

Olena Sovyn

November 26, 2017
Tweet

More Decks by Olena Sovyn

Other Decks in Programming

Transcript

  1. Olena Sovyn
    (@frontendgirl)
    6OEFSTUBOEJOH
    3FDPNQPTFUISPVHI
    FYBNQMFT

    View full-size slide

  2. Olena Sovyn
    (@frontendgirl)
    !
    &
    "

    View full-size slide


  3. 3FBDU

    3FEVY
    -PEBTI
    3FBDU4UPSZCPPL
    GVODUJPOBMQSPHSBNNJOH

    View full-size slide

  4. Olena Sovyn
    (@frontendgirl)
    6OEFSTUBOEJOH
    3FDPNQPTFUISPVHI
    FYBNQMFT

    View full-size slide

  5. Image source: https://szenandoah.deviantart.com/art/Wonderland-Logo-252210579

    View full-size slide

  6. How to make
    complex
    component to be
    reusable

    View full-size slide

  7. %BUB
    #FIBWJPVS
    6*
    Reusable ???

    View full-size slide

  8. )0$
    (high order components)

    View full-size slide

  9. )0$
    changed: context
    or/and props

    View full-size slide

  10. %BUB
    #FIBWJPVS
    6*
    Recompose
    HOC
    Stateless component

    View full-size slide

  11. Why should I
    care about
    Recompose

    View full-size slide

  12. Image source: http://spacenews.com/spacexs-new-price-chart-illustrates-performance-cost-of-reusability/

    View full-size slide

  13. Image source: https://whataboutjesus.com/jesus-is-the-only-way/

    View full-size slide

  14. setDisplayName
    toClass
    lifecycle
    getContext
    withContext
    onlyUpdateForPropTypes
    onlyUpdateForKeys
    setStatic
    setPropTypes
    componentFromStream
    setObservableConfig
    createEventHandlerWithConfig
    createEventHandler
    mapPropsStreamWithConfig
    mapPropsStream
    componentFromStreamWithConfig
    compose
    isClassComponent
    getDisplayName
    wrapDisplayName
    shallowEqual
    createSink
    componentFromProp
    nest
    hoistStatics
    mapProps
    withProps
    withHandlers
    withPropsOnChange
    renameProps
    defaultProps
    renameProp
    withState
    renderComponent
    renderNothing
    withReducer
    withStateHandlers
    shouldUpdate
    pure
    branch
    flattenProp

    View full-size slide

  15. setDisplayName
    toClass
    lifecycle
    getContext
    withContext
    onlyUpdateForPropTypes
    onlyUpdateForKeys
    setStatic
    setPropTypes
    componentFromStream
    setObservableConfig
    createEventHandlerWithConfig
    createEventHandler
    mapPropsStreamWithConfig
    mapPropsStream
    componentFromStreamWithConfig
    compose
    isClassComponent
    getDisplayName
    wrapDisplayName
    shallowEqual
    createSink
    componentFromProp
    nest
    hoistStatics
    mapProps
    withProps
    withHandlers
    withPropsOnChange
    renameProps
    defaultProps
    renameProp
    withState
    renderComponent
    renderNothing
    withReducer
    withStateHandlers
    shouldUpdate
    pure
    branch
    flattenProp

    View full-size slide

  16. setDisplayName
    toClass
    lifecycle
    getContext
    withContext
    onlyUpdateForPropTypes
    onlyUpdateForKeys
    setStatic
    setPropTypes
    componentFromStream
    setObservableConfig
    createEventHandlerWithConfig
    createEventHandler
    mapPropsStreamWithConfig
    mapPropsStream
    componentFromStreamWithConfig
    compose
    isClassComponent
    getDisplayName
    wrapDisplayName
    shallowEqual
    createSink
    componentFromProp
    nest
    hoistStatics
    mapProps
    withProps
    withHandlers
    withPropsOnChange
    renameProps
    defaultProps
    renameProp
    withState
    renderComponent
    renderNothing
    withReducer
    withStateHandlers
    shouldUpdate
    pure
    branch
    flattenProp

    View full-size slide

  17. setDisplayName
    toClass
    lifecycle
    getContext
    withContext
    onlyUpdateForPropTypes
    onlyUpdateForKeys
    setStatic
    setPropTypes
    componentFromStream
    setObservableConfig
    createEventHandlerWithConfig
    createEventHandler
    mapPropsStreamWithConfig
    mapPropsStream
    componentFromStreamWithConfig
    compose
    isClassComponent
    getDisplayName
    wrapDisplayName
    shallowEqual
    createSink
    componentFromProp
    nest
    hoistStatics
    mapProps
    withProps
    withHandlers
    withPropsOnChange
    renameProps
    defaultProps
    renameProp
    withState
    renderComponent
    renderNothing
    withReducer
    withStateHandlers
    shouldUpdate
    pure
    branch
    flattenProp

    View full-size slide

  18. setDisplayName
    toClass
    lifecycle
    getContext
    withContext
    onlyUpdateForPropTypes
    onlyUpdateForKeys
    setStatic
    setPropTypes
    componentFromStream
    setObservableConfig
    createEventHandlerWithConfig
    createEventHandler
    mapPropsStreamWithConfig
    mapPropsStream
    componentFromStreamWithConfig
    compose
    isClassComponent
    getDisplayName
    wrapDisplayName
    shallowEqual
    createSink
    componentFromProp
    nest
    hoistStatics
    mapProps
    withProps
    withHandlers
    withPropsOnChange
    renameProps
    defaultProps
    renameProp
    withState
    renderComponent
    renderNothing
    withReducer
    withStateHandlers
    shouldUpdate
    pure
    branch
    flattenProp

    View full-size slide

  19. setDisplayName
    toClass
    lifecycle
    getContext
    withContext
    onlyUpdateForPropTypes
    onlyUpdateForKeys
    setStatic
    setPropTypes
    componentFromStream
    setObservableConfig
    createEventHandlerWithConfig
    createEventHandler
    mapPropsStreamWithConfig
    mapPropsStream
    componentFromStreamWithConfig
    compose
    isClassComponent
    getDisplayName
    wrapDisplayName
    shallowEqual
    createSink
    componentFromProp
    nest
    hoistStatics
    mapProps
    withProps
    withHandlers
    withPropsOnChange
    renameProps
    defaultProps
    renameProp
    withState
    renderComponent
    renderNothing
    withReducer
    withStateHandlers
    shouldUpdate
    pure
    branch
    flattenProp

    View full-size slide

  20. %VOOJOHr,SVHFSFGGFDU
    Confidence
    Wisdom
    first usage of
    one of Recompose
    HOCs
    reading
    Recompose

    documentation
    trying to use
    Recompose on
    practice

    View full-size slide

  21. setDisplayName
    toClass
    lifecycle
    getContext
    withContext
    onlyUpdateForPropTypes
    onlyUpdateForKeys
    setStatic
    setPropTypes
    componentFromStream
    setObservableConfig
    createEventHandlerWithConfig
    createEventHandler
    mapPropsStreamWithConfig
    mapPropsStream
    componentFromStreamWithConfig
    compose
    isClassComponent
    getDisplayName
    wrapDisplayName
    shallowEqual
    createSink
    componentFromProp
    nest
    hoistStatics
    mapProps
    withProps
    withHandlers
    withPropsOnChange
    renameProps
    defaultProps
    renameProp
    withState
    renderComponent
    renderNothing
    withReducer
    withStateHandlers
    shouldUpdate
    pure
    branch
    flattenProp

    View full-size slide

  22. branch
    lifecycle
    renderComponent
    renderNothing
    toClass
    mapProps
    withProps
    withPropsOnChange
    defaultProps
    renameProp
    renameProps
    flattenProp
    withState
    withHandlers
    withStateHandlers
    withReducer
    shouldUpdate
    pure
    onlyUpdateForKeys
    onlyUpdateForPropTypes
    withContext
    getContext
    1SPQT
    4UBUF 1FSGPSNBODF
    0UIFS
    $POUFYU
    3FDPNQPTF

    )0$T

    View full-size slide

  23. branch
    lifecycle
    renderComponent
    renderNothing
    toClass
    mapProps
    withProps
    withPropsOnChange
    defaultProps
    renameProp
    renameProps
    flattenProp
    withState
    withHandlers
    withStateHandlers
    withReducer
    shouldUpdate
    pure
    onlyUpdateForKeys
    onlyUpdateForPropTypes
    withContext
    getContext
    1SPQT
    4UBUF 1FSGPSNBODF
    0UIFS
    $POUFYU
    3FDPNQPTF

    )0$T

    View full-size slide

  24. https://www.youtube.com/watch?v=C_yj4k4QZVI

    View full-size slide

  25. MJGFDZDMF
    Image source: https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle

    View full-size slide

  26. UJNF
    &YBNQMFT

    View full-size slide

  27. setDisplayName
    toClass
    lifecycle
    getContext
    withContext
    onlyUpdateForPropTypes
    onlyUpdateForKeys
    setStatic
    setPropTypes
    componentFromStream
    setObservableConfig
    createEventHandlerWithConfig
    createEventHandler
    mapPropsStreamWithConfig
    mapPropsStream
    componentFromStreamWithConfig
    compose
    isClassComponent
    getDisplayName
    wrapDisplayName
    shallowEqual
    createSink
    componentFromProp
    nest
    hoistStatics
    mapProps
    withProps
    withHandlers
    withPropsOnChange
    renameProps
    defaultProps
    renameProp
    withState
    renderComponent
    renderNothing
    withReducer
    withStateHandlers
    shouldUpdate
    pure
    branch
    flattenProp

    View full-size slide

  28. Any
    takeaways

    View full-size slide

  29. Even if you are not
    directly
    contributing to
    libraries you have
    still a lot to share

    View full-size slide

  30. "XFTPNF
    3FDPNQPTF

    View full-size slide

  31. Make ideas clearly
    stand out in your
    examples, no
    matter how
    complex they are

    View full-size slide

  32. Useful
    Example
    Complex
    example
    Simple example

    View full-size slide

  33. Even if something
    wasn’t clear from
    the first time
    there is always
    another way

    View full-size slide

  34. %KBOHP(JSMT,ZJW

    View full-size slide

  35. Image source: https://hacks.mozilla.org/2017/11/entering-the-quantum-era-how-firefox-got-fast-again-and-where-its-going-to-get-faster/
    -JO$MBSLXPSLT

    View full-size slide

  36. Image source: https://twitter.com/kosamari/status/859958929484337152
    $PEFEPPEMFTCZ.BSJLP,PTBLB

    View full-size slide

  37. Code
    Example
    Input Output

    View full-size slide

  38. Even if something
    wasn’t clear from
    the first time
    there is always
    another way

    View full-size slide