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
個人開発で徳島大学生60%以上の心を掴んだアプリ、そして手放した話
akidon0000
1
140
実用的なGOCACHEPROG実装をするために / golang.tokyo #40
mazrean
1
290
Compose Multiplatform × AI で作る、次世代アプリ開発支援ツールの設計と実装
thagikura
0
170
AIと私たちの学習の変化を考える - Claude Codeの学習モードを例に
azukiazusa1
11
4.4k
print("Hello, World")
eddie
2
530
Android端末で実現するオンデバイスLLM 2025
masayukisuda
1
170
Cache Me If You Can
ryunen344
2
3k
Ruby Parser progress report 2025
yui_knk
1
460
Deep Dive into Kotlin Flow
jmatsu
1
360
知っているようで知らない"rails new"の世界 / The World of "rails new" You Think You Know but Don't
luccafort
PRO
1
190
The Past, Present, and Future of Enterprise Java
ivargrimstad
0
410
プロパティベーステストによるUIテスト: LLMによるプロパティ定義生成でエッジケースを捉える
tetta_pdnt
0
3.3k
Featured
See All Featured
Building Better People: How to give real-time feedback that sticks.
wjessup
368
19k
Practical Tips for Bootstrapping Information Extraction Pipelines
honnibal
PRO
23
1.4k
GraphQLの誤解/rethinking-graphql
sonatard
72
11k
Bootstrapping a Software Product
garrettdimon
PRO
307
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
61k
Building Flexible Design Systems
yeseniaperezcruz
329
39k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Making the Leap to Tech Lead
cromwellryan
135
9.5k
Visualization
eitanlees
148
16k
Understanding Cognitive Biases in Performance Measurement
bluesmoon
29
1.9k
YesSQL, Process and Tooling at Scale
rocio
173
14k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
113
20k
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