Understanding Recompose through examples

Transcript

1. Olena Sovyn (@frontendgirl) 6OEFSTUBOEJOH
   3FDPNQPTF
   UISPVHI
   FYBNQMFT
2. Olena Sovyn (@frontendgirl) ! & "
3. ❤ 3FBDU
 3FEVY
   -PEBTI
   3FBDU
   4UPSZCPPL
   GVODUJPOBM
   QSPHSBNNJOH
5. Olena Sovyn (@frontendgirl) 6OEFSTUBOEJOH
   3FDPNQPTF
   UISPVHI
   FYBNQMFT
6. Image source: https://szenandoah.deviantart.com/art/Wonderland-Logo-252210579
8. 
   ZFBS
   BHP
   
   
   
9. How to make complex component to be reusable
10. %BUB #FIBWJPVS 6* Reusable ???
11. )0$
    (high order components)
12. )0$ changed: context or/and props
13. 3FDPNQPTF
14. %BUB #FIBWJPVS 6* Recompose HOC Stateless component
16. Why should I care about Recompose
17. Image source: http://spacenews.com/spacexs-new-price-chart-illustrates-performance-cost-of-reusability/
19. Image source: https://whataboutjesus.com/jesus-is-the-only-way/
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
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
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
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
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
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
26. %VOOJOHr,SVHFS
    FGGFDU Confidence Wisdom first usage of one of Recompose HOCs reading Recompose
 documentation trying to use Recompose on practice
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
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
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
41. 
    
42. https://www.youtube.com/watch?v=C_yj4k4QZVI
44. 3FVTBCJMJUZ
45. MJGFDZDMF Image source: https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle
53. UJNF &YBNQMFT
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
56. Any takeaways
57. Even if you are not directly contributing to libraries you have still a lot to share 
58. "XFTPNF
    3FDPNQPTF
59. Make ideas clearly stand out in your examples, no matter how complex they are 
60. Useful Example Complex example Simple example
61. Even if something wasn’t clear from the first time there is always another way 
62. %KBOHP
    (JSMT
    ,ZJW
    
    
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
    $MBSL
    XPSLT
65. Image source: https://twitter.com/kosamari/status/859958929484337152 $PEFEPPEMFT
    CZ
    .BSJLP
    ,PTBLB
68. Code Example Input Output
71. Even if something wasn’t clear from the first time there is always another way