olena sovyn "understanding recompose through examples"

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

Django Girls Kyiv #1

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