Embed Size (px)
Citation preview
Olena Sovyn (@frontendgirl)Webflow
Understanding Recompose through examples
Olena Sovyn (@frontendgirl)
! & !
❤
ReactRedux Lodash React Storybook functional programming
Olena Sovyn (@frontendgirl)
Understanding Recompose through
examples
Image source: https://szenandoah.deviantart.com/art/Wonderland-Logo-252210579
1 year ago . . .
How to make complex
component to be reusable?
Data
Behaviour
UI
Reusable ???
HOC (high order components)
HOC
changed: context or/and props
Recompose
Data
Behaviour
UI
Recompose HOC
Stateless component
Why should I care about Recompose?
Image source: http://spacenews.com/spacexs-new-price-chart-illustrates-performance-cost-of-reusability/
Image source: https://whataboutjesus.com/jesus-is-the-only-way/
setDisplayNametoClass
lifecycle
getContext
withContextonlyUpdateForPropTypes
onlyUpdateForKeys
setStatic
setPropTypes
componentFromStream
setObservableConfig
createEventHandlerWithConfig
createEventHandler
mapPropsStreamWithConfig
mapPropsStream
componentFromStreamWithConfig
compose
isClassComponent
getDisplayName
wrapDisplayNameshallowEqual
createSink
componentFromProp
nest
hoistStatics
mapProps
withProps
withHandlers
withPropsOnChange
renameProps
defaultProps
renameProp
withState
renderComponent
renderNothing
withReducer
withStateHandlersshouldUpdatepure
branch
flattenProp
setDisplayNametoClass
lifecycle
getContext
withContextonlyUpdateForPropTypes
onlyUpdateForKeys
setStatic
setPropTypes
componentFromStream
setObservableConfig
createEventHandlerWithConfig
createEventHandler
mapPropsStreamWithConfig
mapPropsStream
componentFromStreamWithConfig
compose
isClassComponent
getDisplayName
wrapDisplayNameshallowEqual
createSink
componentFromProp
nest
hoistStatics
mapProps
withProps
withHandlers
withPropsOnChange
renameProps
defaultProps
renameProp
withState
renderComponent
renderNothing
withReducer
withStateHandlersshouldUpdatepure
branch
flattenProp
setDisplayNametoClass
lifecycle
getContext
withContextonlyUpdateForPropTypes
onlyUpdateForKeys
setStatic
setPropTypes
componentFromStream
setObservableConfig
createEventHandlerWithConfig
createEventHandler
mapPropsStreamWithConfig
mapPropsStream
componentFromStreamWithConfig
compose
isClassComponent
getDisplayName
wrapDisplayNameshallowEqual
createSink
componentFromProp
nest
hoistStatics
mapProps
withProps
withHandlers
withPropsOnChange
renameProps
defaultProps
renameProp
withState
renderComponent
renderNothing
withReducer
withStateHandlersshouldUpdatepure
branch
flattenProp
setDisplayNametoClass
lifecycle
getContext
withContextonlyUpdateForPropTypes
onlyUpdateForKeys
setStatic
setPropTypes
componentFromStream
setObservableConfig
createEventHandlerWithConfig
createEventHandler
mapPropsStreamWithConfig
mapPropsStream
componentFromStreamWithConfig
compose
isClassComponent
getDisplayName
wrapDisplayNameshallowEqual
createSink
componentFromProp
nest
hoistStatics
mapProps
withProps
withHandlers
withPropsOnChange
renameProps
defaultProps
renameProp
withState
renderComponent
renderNothing
withReducer
withStateHandlersshouldUpdatepure
branch
flattenProp
setDisplayNametoClass
lifecycle
getContext
withContextonlyUpdateForPropTypes
onlyUpdateForKeys
setStatic
setPropTypes
componentFromStream
setObservableConfig
createEventHandlerWithConfig
createEventHandler
mapPropsStreamWithConfig
mapPropsStream
componentFromStreamWithConfig
compose
isClassComponent
getDisplayName
wrapDisplayNameshallowEqual
createSink
componentFromProp
nest
hoistStatics
mapProps
withProps
withHandlers
withPropsOnChange
renameProps
defaultProps
renameProp
withState
renderComponent
renderNothing
withReducer
withStateHandlersshouldUpdatepure
branch
flattenProp
setDisplayNametoClass
lifecycle
getContext
withContextonlyUpdateForPropTypes
onlyUpdateForKeys
setStatic
setPropTypes
componentFromStream
setObservableConfig
createEventHandlerWithConfig
createEventHandler
mapPropsStreamWithConfig
mapPropsStream
componentFromStreamWithConfig
compose
isClassComponent
getDisplayName
wrapDisplayNameshallowEqual
createSink
componentFromProp
nest
hoistStatics
mapProps
withProps
withHandlers
withPropsOnChange
renameProps
defaultProps
renameProp
withState
renderComponent
renderNothing
withReducer
withStateHandlersshouldUpdatepure
branch
flattenProp
Dunning‒Kruger effectCo
nfide
nce
Wisdom
first usage of one of Recompose
HOCs
reading Recompose
documentation
trying to use Recompose on
practice
setDisplayNametoClass
lifecycle
getContext
withContextonlyUpdateForPropTypes
onlyUpdateForKeys
setStatic
setPropTypes
componentFromStream
setObservableConfig
createEventHandlerWithConfig
createEventHandler
mapPropsStreamWithConfig
mapPropsStream
componentFromStreamWithConfig
compose
isClassComponent
getDisplayName
wrapDisplayNameshallowEqual
createSink
componentFromProp
nest
hoistStatics
mapProps
withProps
withHandlers
withPropsOnChange
renameProps
defaultProps
renameProp
withState
renderComponent
renderNothing
withReducer
withStateHandlersshouldUpdatepure
branch
flattenProp
branch lifecycle renderComponent renderNothing toClass
mapProps withProps withPropsOnChange defaultProps renameProp renameProps flattenProp
withState withHandlers withStateHandlers withReducer
shouldUpdate pure onlyUpdateForKeys onlyUpdateForPropTypes
withContext getContext
Props
State Performance
Other
Context
RecomposeHOCs
branch lifecycle renderComponent renderNothing toClass
mapProps withProps withPropsOnChange defaultProps renameProp renameProps flattenProp
withState withHandlers withStateHandlers withReducer
shouldUpdate pure onlyUpdateForKeys onlyUpdateForPropTypes
withContext getContext
Props
State Performance
Other
Context
RecomposeHOCs
< 280
Reusability
lifecycle
Image source: https://www.codevoila.com/post/57/reactjs-tutorial-react-component-lifecycle
timeExamples
setDisplayNametoClass
lifecycle
getContext
withContextonlyUpdateForPropTypes
onlyUpdateForKeys
setStatic
setPropTypes
componentFromStream
setObservableConfig
createEventHandlerWithConfig
createEventHandler
mapPropsStreamWithConfig
mapPropsStream
componentFromStreamWithConfig
compose
isClassComponent
getDisplayName
wrapDisplayNameshallowEqual
createSink
componentFromProp
nest
hoistStatics
mapProps
withProps
withHandlers
withPropsOnChange
renameProps
defaultProps
renameProp
withState
renderComponent
renderNothing
withReducer
withStateHandlersshouldUpdatepure
branch
flattenProp
Any takeaways?
Even if you are not directly contributing to libraries you have still a lot to share3
Awesome Recompose
Make ideas clearly stand out in your examples, no matter how complex they are2
Useful Example
Complex example
Simple example
Even if something wasn’t clear from the first time there is always another way1
Image source: https://hacks.mozilla.org/2017/11/entering-the-quantum-era-how-firefox-got-fast-again-and-where-its-going-to-get-faster/
Lin Clark works
Image source: https://twitter.com/kosamari/status/859958929484337152
Codedoodles by Mariko Kosaka
Code Example
Input Output
Even if something wasn’t clear from the first time there is always another way1
