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

setState ftw

setState ftw

"Nobody knows how to do anything without Redux anymore. It's ridiculous." - @mjackson
Let's fix it!

Michele Bertoli

October 06, 2017
Tweet

More Decks by Michele Bertoli

Other Decks in Programming

Transcript

  1. I work in Ads at Facebook, and I contribute to

    a pretty sophisticated React UI
  2. YES

  3. “I love setState. In 3 1/2 years, I haven't needed

    anything more.” @chantastic, Mar 2017
  4. “If setState was packaged up as a lib, people would

    love it.” @chantastic, Jul 2017
  5. setState enqueues changes to the component state and tells React

    that a component and its children need to be re-rendered with the updated state.
  6. setState enqueues changes to the component state and tells React

    that a component and its children need to be re-rendered with the updated state.
  7. test('increment', () => { const prevState = { counter: 1

    } const props = { step: 1 } expect( increment(prevState, props) ).toEqual({ counter: 2 }) })
  8. test('increment', () => { const prevState = { counter: 1

    } const props = { step: 1 } expect( increment(prevState, props) ).toMatchSnapshot() })
  9. connect(() => ({ f: 'https://api.punkapi.com/v2/beers' }))( ({ f }) =>

    f.fulfilled ? <h1>{f.value[0].name}</h1> : null )
  10. const inc = () => dispatcher.dispatch({ type: 'INCREMENT', }) const

    Button = ({ counter }) => ( <button onClick={inc}>{counter}</button> )
  11. • Best practices • Testing • Separation of concerns •

    Sharing state • Time Travel • Functional Recap
  12. • Make informed decisions about your tools • Understand the

    tradeoffs involved in each decision Choose wisely
  13. Michele Bertoli Front End Engineer at Facebook Author of React

    Design Patterns and Best Practices Follow me @MicheleBertoli