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
GC25 Recap: The Code You Reviewed is Not the Code You Built / #newt_gophercon_tour
mazrean
0
110
contribution to astral-sh/uv
shunsock
0
530
Things You Thought You Didn’t Need To Care About That Have a Big Impact On Your Job
hollycummins
0
250
釣り地図SNSにおける有料機能の実装
nokonoko1203
0
200
デミカツ切り抜きで面倒くさいことはPythonにやらせよう
aokswork3
0
260
品質ワークショップをやってみた
nealle
0
630
オンデバイスAIとXcode
ryodeveloper
0
130
Domain-centric? Why Hexagonal, Onion, and Clean Architecture Are Answers to the Wrong Question
olivergierke
3
970
モテるデスク環境
mozumasu
3
1.3k
O Que É e Como Funciona o PHP-FPM?
marcelgsantos
0
200
AI 駆動開発におけるコミュニティと AWS CDK の価値
konokenj
5
240
理論と実務のギャップを超える
eycjur
0
180
Featured
See All Featured
Mobile First: as difficult as doing things right
swwweet
225
10k
Designing for Performance
lara
610
69k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
21
1.2k
Documentation Writing (for coders)
carmenintech
75
5.1k
Java REST API Framework Comparison - PWX 2021
mraible
34
8.9k
Embracing the Ebb and Flow
colly
88
4.9k
The Art of Delivering Value - GDevCon NA Keynote
reverentgeek
16
1.7k
The Power of CSS Pseudo Elements
geoffreycrofte
80
6k
Optimizing for Happiness
mojombo
379
70k
Gamification - CAS2011
davidbonilla
81
5.5k
Into the Great Unknown - MozCon
thekraken
40
2.1k
Building a Modern Day E-commerce SEO Strategy
aleyda
44
7.8k
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