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

Understanding Recompose through examples

Olena Sovyn
November 26, 2017
Programming
0
170

Understanding Recompose through examples

Olena Sovyn

November 26, 2017
Tweet

More Decks by Olena Sovyn

See All by Olena Sovyn
Hidden Gems in Code Reviews
kiwka
0
33
Testing, tEstIng, TeStInG or how to test React apps with generated input data
kiwka
1
470
Empowering your React application with Flow type system
kiwka
0
28
Building Webflow Ecommerce in 3 stories
kiwka
0
51
Building a Chrome Extension with React
kiwka
0
390
On the way to making React components more reusable
kiwka
2
200
Using Facade pattern with JSX
kiwka
4
250

Other Decks in Programming

See All in Programming
sync.Mutexの仕組みを理解する
ffjlabo
1
280
AWS CDKのあるあるお悩みに答えたい
tmokmss
5
1.3k
From complexity to observability using OpenTelemetry
danilop
1
330
Devoxx UK - Java Life is Short
kdubois
0
180
Jetpack Compose Debugging to fix performance problems
yucamm124
0
160
RBS meets LLMs - Type inference using LLM
kokuyouwind
0
210
サイト信頼性を高める前に開発チームからの信頼性を高めよう
syossan27
8
2.1k
CloudWatchLogsが個人情報保護の盲点になっていませんか？
shoheihosaka
0
140
FSE時代におけるWEBサイト制作の研究 #wpshinshu / 2023-05-20 Shinshu WordPress Meetup vol.23
torounit
0
210
新人PHPer向け 圧倒的に差をつける仕事の進め方 #phpstudy
77web
2
550
Modern and Lightweight Cloud Application Development with Jakarta EE 10
ivargrimstad
0
620
Modern and Lightweight Cloud Application Development with Jakarta EE 10
ivargrimstad
0
190

Featured

See All Featured
KATA
mclloyd
13
10k
Support Driven Design
roundedbygravity
88
9k
Practical Orchestrator
shlominoach
179
9.1k
VelocityConf: Rendering Performance Case Studies
addyosmani
317
22k
Designing for humans not robots
tammielis
245
24k
Faster Mobile Websites
deanohume
296
29k
Stop Working from a Prison Cell
hatefulcrawdad
264
18k
Gamification - CAS2011
davidbonilla
75
4.2k
What’s in a name? Adding method to the madness
productmarketing
PRO
14
2.1k
YesSQL, Process and Tooling at Scale
rocio
158
13k
Testing 201, or: Great Expectations
jmmastey
26
5.9k
Making the Leap to Tech Lead
cromwellryan
118
7.8k

Transcript

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

    View Slide

  2. Olena Sovyn
    (@frontendgirl)
    !
    &
    "

    View Slide

  3. ❤
    3FBDU

    3FEVY
    -PEBTI
    3FBDU4UPSZCPPL
    GVODUJPOBMQSPHSBNNJOH

    View Slide

  4. View Slide

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

    View Slide

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

    View Slide

  7. View Slide

  8. ZFBSBHP

    View Slide

  9. How to make
    complex
    component to be
    reusable

    View Slide

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

    View Slide

  11. )0$
    (high order components)

    View Slide

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

    View Slide

  13. 3FDPNQPTF

    View Slide

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

    View Slide

  15. View Slide

  16. Why should I
    care about
    Recompose

    View Slide

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

    View Slide

  18. View Slide

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

    View Slide

  20. 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 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 Slide

  22. 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 Slide

  23. 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 Slide

  24. 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 Slide

  25. 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 Slide

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

    documentation
    trying to use
    Recompose on
    practice

    View Slide

  27. View Slide

  28. 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 Slide

  29. View Slide

  30. View Slide

  31. View Slide

  32. 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 Slide

  33. 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 Slide

  34. View Slide

  35. View Slide

  36. View Slide

  37. View Slide

  38. View Slide

  39. View Slide

  40. View Slide


  41. View Slide

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

    View Slide

  43. View Slide

  44. 3FVTBCJMJUZ

    View Slide

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

    View Slide

  46. View Slide

  47. View Slide

  48. View Slide

  49. View Slide

  50. View Slide

  51. View Slide

  52. View Slide

  53. UJNF
    &YBNQMFT

    View Slide

  54. View Slide

  55. 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 Slide

  56. Any
    takeaways

    View Slide

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

    View Slide

  58. "XFTPNF
    3FDPNQPTF

    View Slide

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

    View Slide

  60. Useful
    Example
    Complex
    example
    Simple example

    View Slide

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

    View Slide

  62. %KBOHP(JSMT,ZJW

    View Slide

  63. View Slide

  64. 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 Slide

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

    View Slide

  66. View Slide

  67. View Slide

  68. Code
    Example
    Input Output

    View Slide

  69. View Slide

  70. View Slide

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

    View Slide