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
20251016_Rails News ~Rails 8.1の足音を聴く~
morimorihoge
2
510
はじめてのDSPy - 言語モデルを『プロンプト』ではなく『プログラミング』するための仕組み
masahiro_nishimi
3
650
CSC509 Lecture 04
javiergs
PRO
0
300
CSC305 Lecture 04
javiergs
PRO
0
270
Six and a half ridiculous things to do with Quarkus
hollycummins
0
180
CSC509 Lecture 05
javiergs
PRO
0
300
私達はmodernize packageに夢を見るか feat. go/analysis, go/ast / Go Conference 2025
kaorumuta
2
600
TFLintカスタムプラグインで始める Terraformコード品質管理
bells17
2
240
コードとあなたと私の距離 / The Distance Between Code, You, and I
hiro_y
0
170
理論と実務のギャップを超える
eycjur
0
140
CSC305 Lecture 06
javiergs
PRO
0
250
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
250
Featured
See All Featured
Rails Girls Zürich Keynote
gr2m
95
14k
Templates, Plugins, & Blocks: Oh My! Creating the theme that thinks of everything
marktimemedia
31
2.5k
[RailsConf 2023 Opening Keynote] The Magic of Rails
eileencodes
31
9.7k
No one is an island. Learnings from fostering a developers community.
thoeni
21
3.5k
Become a Pro
speakerdeck
PRO
29
5.6k
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
657
61k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
10
600
Documentation Writing (for coders)
carmenintech
75
5.1k
How STYLIGHT went responsive
nonsquared
100
5.8k
Optimizing for Happiness
mojombo
379
70k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
10
870
Building Applications with DynamoDB
mza
96
6.7k
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