Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
wejs24.pdf
Kodai Nakamura
September 25, 2018
1
680
wejs24.pdf
Kodai Nakamura
September 25, 2018
Tweet
Share
More Decks by Kodai Nakamura
See All by Kodai Nakamura
React Fire
kdnk
2
960
Local State Management with Apollo
kdnk
2
1k
React Suspense on Apollo
kdnk
4
1.1k
Featured
See All Featured
JazzCon 2018 Closing Keynote - Leadership for the Reluctant Leader
reverentgeek
173
8.6k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Building Your Own Lightsaber
phodgson
95
4.7k
For a Future-Friendly Web
brad_frost
166
7.5k
The Illustrated Children's Guide to Kubernetes
chrisshort
18
40k
What's new in Ruby 2.0
geeforr
335
30k
Thoughts on Productivity
jonyablonski
44
2.4k
Writing Fast Ruby
sferik
612
57k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
237
19k
In The Pink: A Labor of Love
frogandcode
131
21k
From Idea to $5000 a Month in 5 Months
shpigford
373
44k
The MySQL Ecosystem @ GitHub 2015
samlambert
239
11k
Transcript
©2018 Wantedly, Inc. setState Deep Dive Wejs@24 21.Sept.2018 - Kodai
Nakamura
©2018 Wantedly, Inc. setState Deep Dive Wejs@24 21.Sept.2018 - Kodai
Nakamura
©2018 Wantedly, Inc. Kodai Nakamura Github: @kdnk Twitter: @kdnk__ Software
Engineer at Wantedly, inc. JavaScript, TypeScript, React, Rails, Ruby
©2018 Wantedly, Inc. setState
©2018 Wantedly, Inc. increaseByTwo() { this.setState({ value: this.state.value + 1
}); this.setState({ value: this.state.value + 1 }); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); }
©2018 Wantedly, Inc.
©2018 Wantedly, Inc.
©2018 Wantedly, Inc. ‣ ίϯϙʔωϯτ͝ͱʹ࣋ͯΔঢ়ଶͷ͜ͱ ‣ state ͕มΘΔͱ࠶ඳը͞ΕΔ ‣ setState
͕͋ͨΒ͍͠ state Λฦ͢ state
©2018 Wantedly, Inc. ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍ ‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣
stateͷߋ৽batch setStateͷ͍ํ this.setState({comment: 'Hello'}); this.state.comment = 'Hello';
©2018 Wantedly, Inc. ҾʹΦϒδΣΫτΛ͢ increaseByTwo() { this.setState({ value: this.state.value +
1 }); this.setState({ value: this.state.value + 1 }); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); } ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍ ‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣ stateͷߋ৽batch
©2018 Wantedly, Inc. ͕͜͜batch increaseByTwo() { this.setState({ value: this.state.value +
1 }); this.setState({ value: this.state.value + 1 }); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); } ҾʹΦϒδΣΫτΛ͢ ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍ ‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣ stateͷߋ৽batch
©2018 Wantedly, Inc. { ...this.state.value, value: this.state.value + 1, value:
this.state.value + 1, } ͕͜͜batch increaseByTwo() { this.setState({ value: this.state.value + 1 }); this.setState({ value: this.state.value + 1 }); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); } தͰ͜Μͳॲཧ͕ߦΘΕ͍ͯΔͣ ҾʹΦϒδΣΫτΛ͢ ‣ ΦϒδΣΫτ͕มΘΔͱre-render ‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍ ‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢ ‣ stateͷߋ৽batch
©2018 Wantedly, Inc. ‣ setStateͷҾʹΦϒδΣΫτ͚ͩͰͳ͘ɺؔΛ͢͜ͱͰ͖Δ ‣ ؔͷ࣮ߦඇಉظ ҾʹؔΛ͢ increaseByTwoCb() {
this.setState(prevState => ({ value: prevState.value + 1 })); this.setState(prevState => ({ value: prevState.value + 1 })); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); }
©2018 Wantedly, Inc. ‣ setStateͷҾʹΦϒδΣΫτ͚ͩͰͳ͘ɺؔΛ͢͜ͱͰ͖Δ ‣ ؔͷ࣮ߦඇಉظ increaseByTwoCb() { this.setState(prevState
=> ({ value: prevState.value + 1 })); this.setState(prevState => ({ value: prevState.value + 1 })); } render() { return ( <button onClick={this.increaseByTwo.bind(this)}> {this.state.value} </button> ); } - ͕ؔΩϡʔʹՃ͞ΕΔ - prevState࠷৽Ͱ͋Δ͜ͱ͕ อূ͞ΕΔ ҾʹؔΛ͢
©2018 Wantedly, Inc. ‣ setState ͕ batching ͞ΕΔͷΠϕϯτϋϯυϥͷத͚ͩ ‣ ΠϕϯτϋϯυϥҎ֎ͩͱ
setState ͙͢ʹ࣮ߦ͞Εͯɺ͕ state ʹө͞ΕΔ ‣ ReactDOM.unstable_batchedUpdates Λ͏ͱΉΓΓ batching Ͱ͖Δ ‣ React 17(?) ͔Β ͯ͢ͷ setState ͕σϑΥϧτͰ batching ಉظతͳsetState
©2018 Wantedly, Inc. ‣ setState batch & ඇಉظ ‣
ͨͩ͠ɺΠϕϯτϋϯυϥҎ֎ͩͱɺಉظత ‣ React v17͔Βɺͯ͢ͷ setState ͕ඇಉظʹͳΔ ·ͱΊ