Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
setState ftw
Search
Michele Bertoli
October 06, 2017
Programming
12
3.5k
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
Share
More Decks by Michele Bertoli
See All by Michele Bertoli
setState Machine
michelebertoli
9
1.8k
Test Like It's 2017
michelebertoli
3
740
Painless Testing
michelebertoli
2
160
Proper Error Handling
michelebertoli
10
1.6k
CSS in JS
michelebertoli
0
560
Inline Styles
michelebertoli
6
720
UNLEARN EVERYTHING
michelebertoli
5
1.5k
Other Decks in Programming
See All in Programming
Cloud RunとCloud PubSubでサーバレスなデータ基盤2024 with Terraform / Cloud Run and PubSub with Terraform
shinyorke
7
1.9k
IntelliJ IDEA を知らなかった 自分に教えたい小ネタ集 / IntelliJ IDEA Hints for My Past Self
mackey0225
3
170
ONE WEDGE_Company_Information
1wedge
0
170
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
上手な探索的テストとその上達方法について
matsu802
4
650
Migrating to Signals: A Practical Workshop
manfredsteyer
PRO
0
280
受託開発でGitLab CI を活用していく
xiombatsg
1
110
object-oriented-conference-2024
fuwasegu
6
1.9k
Honoとhtmx
yusukebe
6
1.2k
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
TCAの Shared Stateって どういう仕組みになってんの?
yimajo
0
330
オブジェクトしこう
okuramasafumi
2
130
Featured
See All Featured
Fontdeck: Realign not Redesign
paulrobertlloyd
75
4.8k
Mobile First: as difficult as doing things right
swwweet
215
8.5k
It's Worth the Effort
3n
180
27k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
Side Projects
sachag
451
41k
Building Your Own Lightsaber
phodgson
97
5.6k
Optimising Largest Contentful Paint
csswizardry
7
2.3k
A Modern Web Designer's Workflow
chriscoyier
689
190k
Gamification - CAS2011
davidbonilla
76
4.5k
Reflections from 52 weeks, 52 projects
jeffersonlam
343
19k
Sharpening the Axe: The Primacy of Toolmaking
bcantrill
14
1.3k
Put a Button on it: Removing Barriers to Going Fast.
kastner
58
3k
Transcript
setState ftw @MicheleBertoli
My name’s Michele and I’m a React fanboy since 2014
I work in Ads at Facebook, and I contribute to
a pretty sophisticated React UI
setState is the primary method you use to update the
UI in React
Are we really going to talk about setState for 40
minutes?
YES
Ok, why?
“I’m learning React but I don’t understand reducers.” Anonymous, Mar
2017
react
react-redux redux react react-router react-router-redux
react-redux redux react react-router react-router-redux
The community
“Nobody knows how to do anything without Redux anymore. It's
ridiculous.” @mjackson, Jun 2016
“3 Reasons why I stopped using React.setState.” @mweststrate, Jun 2016
“I love setState. In 3 1/2 years, I haven't needed
anything more.” @chantastic, Mar 2017
“You might not need Redux.” @dan_abramov, Sep 2016
Common Pitfalls
setState({ title: 'Here comes the sun' }) console.log(this.state.title)
setState is asynchronous
setState({ counter: this.state.counter + 1 }) setState({ counter: this.state.counter +
1 })
Object.assign( prevState, { counter: this.state.counter + 1 }, { counter:
this.state.counter + 1 }, )
Multiple setState calls get batched
this.state.title = 'Come together'
Mutating the state is an anti-pattern
this.state = { song: { title: 'Let it be', year:
1970, }, }
this.setState({ song: { title: 'Hey Jude', }, })
State changes are shallow merged
setState
yarn add setstate - DON’T TRY THIS AT HOME -
None
“If setState was packaged up as a lib, people would
love it.” @chantastic, Jul 2017
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.
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.
setState(updater, [callback])
(prevState, props) => stateChange
setState(stateChange, [callback])
Best practices
@dan_abramov, Jul 2016
this.state = { price: `${props.currency}${props.value}`, } Don’t
this.setState({ request: API.get(...), }) Don’t
Testing
this.setState( (prevState, props) => ({ counter: prevState.counter + props.step, })
)
export const increment = (prevState, props) => ({ counter: prevState.counter
+ props.step, })
import { increment } from './updaters' this.setState(increment)
test('increment', () => { const prevState = { counter: 1
} const props = { step: 1 } expect( increment(prevState, props) ).toEqual({ counter: 2 }) })
test('increment', () => { const prevState = { counter: 1
} const props = { step: 1 } expect( increment(prevState, props) ).toMatchSnapshot() })
Separation of concerns
• Container: data and behaviour • Presentational: appearance Container and
Presentational
componentDidMount() { API.get(...).then(s => this.setState(s)) } render() { return <Dumb
{...this.state} /> }
cb() { API.post(...).then(s => this.setState(s)) } render() { return <Dumb
{...this.state} cb={this.cb} /> }
yarn add react-fetching
<ReactFetching url="https://api.punkapi.com/v2/beers" ok={beers => <h1>{beers[0].name}</h1>} />
• Higher-order components • Component => Component • Options =>
Component => Component Composition
yarn add react-refetch
connect(mapPropsToRequests)(Component)
connect(() => ({ f: 'https://api.punkapi.com/v2/beers' }))( ({ f }) =>
f.fulfilled ? <h1>{f.value[0].name}</h1> : null )
Sharing state
Do you even lift (your state up)?
None
None
None
componentDidMount() { API.get(...).then(s => this.setState(s)) } render() { return <div>{this.state.data}</div>
}
componentDidMount() { API.get(...).then(this.props.cb) } render() { return <div>{this.props.data}</div> }
cb(data) { this.setState({ data }) } render() { return <Child
{...this.state} cb={this.cb} /> }
yarn add react-broadcast
<Broadcast channel="state" value={this.state} > {this.props.children} </Broadcast>
<Subscriber channel="state"> {state => ( <div>{state.data}</div> )} </Subscriber>
Time travel
yarn add --dev react-lumberjack
None
Lumberjack.back() Lumberjack.forward()
Functional
dispatch(action) { this.setState( prevState => reducer(prevState, action) ) }
yarn add t-redux
const reducer = buildReducer({ 'INCREMENT': state => ({ counter: state.counter
+ 1, }), }) const initialState = { counter: 0 }
const inc = () => dispatcher.dispatch({ type: 'INCREMENT', }) const
Button = ({ counter }) => ( <button onClick={inc}>{counter}</button> )
withState([reducer], initialState)(Button)
• Best practices • Testing • Separation of concerns •
Sharing state • Time Travel • Functional Recap
State Management
• Higher-order components • Immutability • Pure functions • Generators
• Observables Requirements
• Make informed decisions about your tools • Understand the
tradeoffs involved in each decision Choose wisely
• react-redux uses setState • mobx-react uses forceUpdate Know your
tools
Takeaways
Keep it simple
Lift your state up
Have fun!
Michele Bertoli Front End Engineer at Facebook Author of React
Design Patterns and Best Practices Follow me @MicheleBertoli