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
230
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
180
Other Decks in Programming
See All in Programming
Deno に Web 標準 API を実装する / Implementing Web Standard API to Deno
petamoriken
0
350
脱・初心者!脱・マネコン!AWS CDKを使ってみませんか!?
har1101
0
120
DDDはなぜ難しいのか / 良いコードの定義と設計能力の壁
pospome
24
7.3k
15分間でふんわり理解するDocker @ Matsuriba MAX
ukwhatn
PRO
1
340
自動テスト実行結果の目的を整理する / Organizing objectives of automated test results
twada
PRO
10
2.1k
ドメイン・ファーストで考える問題解決に役立つモデル設計 / Domain First Model Design
suzushin54
1
1.4k
品質が高いコードって何?Rev2.1
ickx
1
490
document.write再考
brn
5
2.5k
オブジェクト指向は必要なのか / Is object-oriented needed?
kishida
27
19k
Material 3で Material 2ぽい見た目にする
numeroanddev
2
250
AppDeveloperCon 2024 EU: Building polyglot developer experiences in 2024
salaboy
0
380
Learning PHP and Static Analysis with PHP Parser
inouehi
1
250
Featured
See All Featured
Documentation Writing (for coders)
carmenintech
59
3.8k
Code Reviewing Like a Champion
maltzj
512
39k
The Brand Is Dead. Long Live the Brand.
mthomps
48
21k
Done Done
chrislema
178
15k
Keith and Marios Guide to Fast Websites
keithpitt
407
22k
"I'm Feeling Lucky" - Building Great Search Experiences for Today's Users (#IAC19)
danielanewman
219
21k
Designing on Purpose - Digital PM Summit 2013
jponch
109
6.4k
Making the Leap to Tech Lead
cromwellryan
123
8.4k
Build your cross-platform service in a week with App Engine
jlugia
223
17k
What the flash - Photography Introduction
edds
64
11k
Helping Users Find Their Own Way: Creating Modern Search Experiences
danielanewman
19
1.9k
ReactJS: Keep Simple. Everything can be a component!
pedronauck
657
120k
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