Slide 1
Slide 1 text
©2018 Wantedly, Inc.
setState Deep Dive
Wejs@24
21.Sept.2018 - Kodai Nakamura
Slide 2
Slide 2 text
©2018 Wantedly, Inc.
setState Deep Dive
Wejs@24
21.Sept.2018 - Kodai Nakamura
Slide 3
Slide 3 text
©2018 Wantedly, Inc.
Kodai Nakamura
Github: @kdnk
Twitter: @kdnk__
Software Engineer at Wantedly, inc.
JavaScript, TypeScript, React, Rails, Ruby
Slide 4
Slide 4 text
©2018 Wantedly, Inc.
setState
Slide 5
Slide 5 text
©2018 Wantedly, Inc.
increaseByTwo() {
this.setState({ value: this.state.value + 1 });
this.setState({ value: this.state.value + 1 });
}
render() {
return (
{this.state.value}
);
}
Slide 6
Slide 6 text
©2018 Wantedly, Inc.
Slide 7
Slide 7 text
©2018 Wantedly, Inc.
Slide 8
Slide 8 text
©2018 Wantedly, Inc.
‣ ίϯϙʔωϯτ͝ͱʹ࣋ͯΔঢ়ଶͷ͜ͱ
‣ state ͕มΘΔͱ࠶ඳը͞ΕΔ
‣ setState ͕͋ͨΒ͍͠ state Λฦ͢
state
Slide 9
Slide 9 text
©2018 Wantedly, Inc.
‣ ΦϒδΣΫτ͕มΘΔͱre-render
‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍
‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢
‣ stateͷߋ৽batch
setStateͷ͍ํ
this.setState({comment: 'Hello'});
this.state.comment = 'Hello';
Slide 10
Slide 10 text
©2018 Wantedly, Inc.
ҾʹΦϒδΣΫτΛ͢
increaseByTwo() {
this.setState({ value: this.state.value + 1 });
this.setState({ value: this.state.value + 1 });
}
render() {
return (
{this.state.value}
);
}
‣ ΦϒδΣΫτ͕มΘΔͱre-render
‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍
‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢
‣ stateͷߋ৽batch
Slide 11
Slide 11 text
©2018 Wantedly, Inc.
͕͜͜batch
increaseByTwo() {
this.setState({ value: this.state.value + 1 });
this.setState({ value: this.state.value + 1 });
}
render() {
return (
{this.state.value}
);
}
ҾʹΦϒδΣΫτΛ͢
‣ ΦϒδΣΫτ͕มΘΔͱre-render
‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍
‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢
‣ stateͷߋ৽batch
Slide 12
Slide 12 text
©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 (
{this.state.value}
);
}
தͰ͜Μͳॲཧ͕ߦΘΕ͍ͯΔͣ
ҾʹΦϒδΣΫτΛ͢
‣ ΦϒδΣΫτ͕มΘΔͱre-render
‣ stateʹରͯ͠ഁյతͳมߋ͠ͳ͍
‣ setStateΛ͏͜ͱͰผͷΦϒδΣΫτΛฦ͢
‣ stateͷߋ৽batch
Slide 13
Slide 13 text
©2018 Wantedly, Inc.
‣ setStateͷҾʹΦϒδΣΫτ͚ͩͰͳ͘ɺؔΛ͢͜ͱͰ͖Δ
‣ ؔͷ࣮ߦඇಉظ
ҾʹؔΛ͢
increaseByTwoCb() {
this.setState(prevState => ({ value: prevState.value + 1 }));
this.setState(prevState => ({ value: prevState.value + 1 }));
}
render() {
return (
{this.state.value}
);
}
Slide 14
Slide 14 text
©2018 Wantedly, Inc.
‣ setStateͷҾʹΦϒδΣΫτ͚ͩͰͳ͘ɺؔΛ͢͜ͱͰ͖Δ
‣ ؔͷ࣮ߦඇಉظ
increaseByTwoCb() {
this.setState(prevState => ({ value: prevState.value + 1 }));
this.setState(prevState => ({ value: prevState.value + 1 }));
}
render() {
return (
{this.state.value}
);
}
- ͕ؔΩϡʔʹՃ͞ΕΔ
- prevState࠷৽Ͱ͋Δ͜ͱ͕
อূ͞ΕΔ
ҾʹؔΛ͢
Slide 15
Slide 15 text
©2018 Wantedly, Inc.
‣ setState ͕ batching ͞ΕΔͷΠϕϯτϋϯυϥͷத͚ͩ
‣ ΠϕϯτϋϯυϥҎ֎ͩͱ setState ͙͢ʹ࣮ߦ͞Εͯɺ͕ state ʹө͞ΕΔ
‣ ReactDOM.unstable_batchedUpdates Λ͏ͱΉΓΓ batching Ͱ͖Δ
‣ React 17(?) ͔Β ͯ͢ͷ setState ͕σϑΥϧτͰ batching
ಉظతͳsetState
Slide 16
Slide 16 text
©2018 Wantedly, Inc.
‣ setState batch & ඇಉظ
‣ ͨͩ͠ɺΠϕϯτϋϯυϥҎ֎ͩͱɺಉظత
‣ React v17͔Βɺͯ͢ͷ setState ͕ඇಉظʹͳΔ
·ͱΊ