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
React Perf Tuning
Search
gusvargas
May 26, 2016
Programming
1
240
React Perf Tuning
Boston ReactJS Meetup 5/25/2016
gusvargas
May 26, 2016
Tweet
Share
More Decks by gusvargas
See All by gusvargas
React Perf Tuning w/ notes
gusvargas
1
200
Other Decks in Programming
See All in Programming
テストコードはもう書かない:JetBrains AI Assistantに委ねる非同期処理のテスト自動設計・生成
makun
0
540
アプリの "かわいい" を支えるアニメーションツールRiveについて
uetyo
0
280
HTMLの品質ってなんだっけ? “HTMLクライテリア”の設計と実践
unachang113
4
2.9k
時間軸から考えるTerraformを使う理由と留意点
fufuhu
16
4.8k
より安全で効率的な Go コードへ: Protocol Buffers Opaque API の導入
shwatanap
2
760
RDoc meets YARD
okuramasafumi
4
170
GitHubとGitLabとAWS CodePipelineでCI/CDを組み比べてみた
satoshi256kbyte
4
250
Kiroで始めるAI-DLC
kaonash
2
630
ProxyによるWindow間RPC機構の構築
syumai
3
1.2k
Reading Rails 1.0 Source Code
okuramasafumi
0
250
さようなら Date。 ようこそTemporal! 3年間先行利用して得られた知見の共有
8beeeaaat
3
1.5k
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Featured
See All Featured
A Modern Web Designer's Workflow
chriscoyier
696
190k
Context Engineering - Making Every Token Count
addyosmani
3
60
ピンチをチャンスに:未来をつくるプロダクトロードマップ #pmconf2020
aki_iinuma
127
53k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
The MySQL Ecosystem @ GitHub 2015
samlambert
251
13k
How to train your dragon (web standard)
notwaldorf
96
6.2k
Building Adaptive Systems
keathley
43
2.7k
For a Future-Friendly Web
brad_frost
180
9.9k
Large-scale JavaScript Application Architecture
addyosmani
513
110k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
15
1.7k
The Cost Of JavaScript in 2023
addyosmani
53
8.9k
A designer walks into a library…
pauljervisheath
207
24k
Transcript
PERF TUNING W/ REACT
GUS
GUS FRONTEND
GUS FRONTEND
None
IMMUTABLE.JS MOBX REDUX RESELECT REACT INTERNALS
IMMUTABLE.JS MOBX REDUX RESELECT REACT INTERNALS
ISN’T REACT ALREADY FAST?
None
UNDERSTANDING
UNDERSTANDING MEMOIZATION
UNDERSTANDING MEMOIZATION ALT APPROACHES
UNDERSTANDING MEMOIZATION ALT APPROACHES
CONFIRM YOU HAVE A REAL PROBLEM
CONFIRM YOU HAVE A REAL PROBLEM
! WHAT’S A REAL PROBLEM?
WATCH OUT FOR RED HERRINGS
None
TRIAGING WITH CPU PROFILING REACT PERF TOOLS
TRIAGING WITH CPU PROFILING REACT PERF TOOLS
None
None
None
None
None
None
TRIAGING WITH CPU PROFILING REACT PERF TOOLS
Perf.start Perf.stop Perf.printWasted
Perf.start Perf.stop Perf.printWasted
Perf.start Perf.stop Perf.printWasted
Perf.start Perf.stop Perf.printWasted
None
UNDERSTANDING MEMOIZATION ALT APPROACHES
! CONFIRM
! CONFIRM TRIAGING
UNDERSTANDING MEMOIZATION ALT APPROACHES
WHAT DOES IT MEAN?
fib(100); fib(100);
WHAT DOES THIS HAVE TO DO WITH REACT?
ui(props, state);
ui(props, state); ui(props, state);
… … vDOM
… … … … … vDOM vDOM vDOM’
… … … … … … … vDOM vDOM vDOM’
vDOM
shouldComponentUpdate( nextProps, nextState )
…
…
… …
shallowCompare/ PureRenderMixin
WHY ISN’T THAT THE DEFAULT?
MEMOIZING EFFECTIVELY
MAINTAIN IDENTITY
MAINTAIN IDENTITY // Bad <Item onClick={() => foo()} /> !
! // Good <Item onClick={this.handeClick} />
MAINTAIN IDENTITY // Bad <Item onClick={() => foo()} /> !
! // Good <Item onClick={this.handeClick} />
MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} />
// Good <Item id={item.id} onClick={this.handleClick} /> ! !
MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} />
// Good <Item id={item.id} onClick={this.handleClick} /> ! !
MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} />
// Good <Item onClick={this.partial( this.handleClick, item.id )} /> !
MAINTAIN IDENTITY // Bad <User friends={user.friends || []} /> !
// Good (defaultProps) <User friends={user.friends} />
MAINTAIN IDENTITY // Bad <User friends={user.friends || []} /> !
// Good (getDefaultProps) <User friends={user.friends} />
IMMUTABILITY
IMMUTABILITY // Bad handleAddItem(item) { this.state.items.push(item); this.setState({ items: this.state.items });
} ! // Good handleAddItem(item) { this.setState({ items: this.state.items.concat(item) }); }
ABSTRACTION BOUNDARIES
ABSTRACTION BOUNDARIES (a, b) => { … }
ABSTRACTION BOUNDARIES (a, b) => { … } (a) =>
{ … } (b) => { … }
ABSTRACTION BOUNDARIES render() { return ( <div> <input type="text" onChange={this.handleChange}
value={this.props.todoInputValue} /> <ul> {this.props.todos.map(todo => ( <Todo todo={todo} /> ))} </ul> </div> ); }
ABSTRACTION BOUNDARIES render() { return ( <div> <TodoInput value={this.props.todoInputValue} />
<TodoList todos={this.props.todos} /> </div> ); }
UNDERSTANDING MEMOIZATION ALT APPROACHES
UNDERSTANDING MEMOIZATION ALT APPROACHES
COMPILE TIME OPTIMIZATIONS
react-constant-elements function render() { return <div className='foo' />; }
react-constant-elements var foo = <div className="foo" />; function render() {
return foo; }
react-constant-elements var foo = <div className="foo" />; function render() {
return foo; } https://github.com/facebook/react/issues/3226
react-inline-elements <div className="foo"> {bar} <Baz key="baz" /> </div>
react-inline-elements { type: 'div', props: { className: 'foo', children: [
bar, { type: Baz, props: { }, key: 'baz', ref: null } ] }, key: null, ref: null }
RENDER LESS STUFF
PAGINATION
PAGINATION WINDOWING
PAGINATION WINDOWING CANVAS?
DECOUPLE LISTS VIEWS FROM ITEM MODELS
[{ id: 1, text: 'foo', ...}, ...] … Connect(ListView) ListView
ItemView
[1, 80, 43, 201, 30, ...] … … { id:
1, text: ‘foo', … } Connect(ListView) ListView Connect(ItemView)
RECAP
UNDERSTANDING
UNDERSTANDING MEMOIZATION
UNDERSTANDING MEMOIZATION ALT APPROACHES
RESOURCES http://benchling.engineering/performance-engineering-with- react/ ! http://benchling.engineering/deep-dive-react-perf-debugging/ ! https://facebook.github.io/react/docs/advanced- performance.html ! https://www.youtube.com/watch?v=GXzbbkiJZsY
- Daniel Hejl - “Advanced React Performance”
THANKS