React Perf Tuning

Boston ReactJS Meetup 5/25/2016

Transcript

1. PERF TUNING W/ REACT
2. GUS
3. GUS FRONTEND
4. GUS FRONTEND
6. IMMUTABLE.JS MOBX REDUX RESELECT REACT INTERNALS
7. IMMUTABLE.JS MOBX REDUX RESELECT REACT INTERNALS
8. ISN’T REACT ALREADY FAST?
10. UNDERSTANDING
11. UNDERSTANDING MEMOIZATION
12. UNDERSTANDING MEMOIZATION ALT APPROACHES
13. UNDERSTANDING MEMOIZATION ALT APPROACHES
14. CONFIRM YOU HAVE A REAL PROBLEM
15. CONFIRM YOU HAVE A REAL PROBLEM
16. ! WHAT’S A REAL PROBLEM?
17. WATCH OUT FOR RED HERRINGS
19. TRIAGING WITH CPU PROFILING REACT PERF TOOLS
20. TRIAGING WITH CPU PROFILING REACT PERF TOOLS
27. TRIAGING WITH CPU PROFILING REACT PERF TOOLS
28. Perf.start Perf.stop Perf.printWasted
29. Perf.start Perf.stop Perf.printWasted
30. Perf.start Perf.stop Perf.printWasted
31. Perf.start Perf.stop Perf.printWasted
33. UNDERSTANDING MEMOIZATION ALT APPROACHES
34. ! CONFIRM
35. ! CONFIRM TRIAGING
36. UNDERSTANDING MEMOIZATION ALT APPROACHES
37. WHAT DOES
 IT MEAN?
38. fib(100); fib(100);
39. WHAT DOES THIS HAVE TO DO WITH REACT?
40. ui(props, state);
41. ui(props, state); ui(props, state);
42. … … vDOM
43. … … … … … vDOM vDOM vDOM’
44. … … … … … … … vDOM vDOM vDOM’ vDOM
45. shouldComponentUpdate( nextProps, nextState )
46. …
47. …
48. … …
49. shallowCompare/ PureRenderMixin
50. WHY ISN’T THAT THE DEFAULT?
51. MEMOIZING EFFECTIVELY
52. MAINTAIN IDENTITY
53. MAINTAIN IDENTITY // Bad <Item onClick={() => foo()} /> ! ! // Good <Item onClick={this.handeClick} />
54. MAINTAIN IDENTITY // Bad <Item onClick={() => foo()} /> ! ! // Good <Item onClick={this.handeClick} />
55. MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} /> // Good <Item id={item.id} onClick={this.handleClick} /> ! !
56. MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} /> // Good <Item id={item.id} onClick={this.handleClick} /> ! !
57. MAINTAIN IDENTITY // Bad <Item onClick={this.handleClick.bind( null, item.id )} /> // Good <Item onClick={this.partial( this.handleClick, item.id )} /> !
58. MAINTAIN IDENTITY // Bad <User friends={user.friends || []} /> ! // Good (defaultProps) <User friends={user.friends} />
59. MAINTAIN IDENTITY // Bad <User friends={user.friends || []} /> ! // Good (getDefaultProps) <User friends={user.friends} />
60. IMMUTABILITY
61. 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) }); }
62. ABSTRACTION BOUNDARIES
63. ABSTRACTION BOUNDARIES (a, b) => { … }
64. ABSTRACTION BOUNDARIES (a, b) => { … } (a) => { … } (b) => { … }
65. 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> ); }
66. ABSTRACTION BOUNDARIES render() { return ( <div> <TodoInput value={this.props.todoInputValue} /> <TodoList todos={this.props.todos} /> </div> ); }
67. UNDERSTANDING MEMOIZATION ALT APPROACHES
68. UNDERSTANDING MEMOIZATION ALT APPROACHES
69. COMPILE TIME OPTIMIZATIONS
70. react-constant-elements function render() { return <div className='foo' />; }
71. react-constant-elements var foo = <div className="foo" />; function render() { return foo; }
72. react-constant-elements var foo = <div className="foo" />; function render() { return foo; } https://github.com/facebook/react/issues/3226
73. react-inline-elements <div className="foo"> {bar} <Baz key="baz" /> </div>
74. react-inline-elements { type: 'div', props: { className: 'foo', children: [ bar, { type: Baz, props: { }, key: 'baz', ref: null } ] }, key: null, ref: null }
75. RENDER LESS STUFF
76. PAGINATION
77. PAGINATION WINDOWING
78. PAGINATION WINDOWING CANVAS?
79. DECOUPLE LISTS VIEWS FROM ITEM MODELS
80. [{ id: 1, text: 'foo', ...}, ...] … Connect(ListView) ListView ItemView
81. [1, 80, 43, 201, 30, ...] … … { id: 1, text: ‘foo', … } Connect(ListView) ListView Connect(ItemView)
82. RECAP
83. UNDERSTANDING
84. UNDERSTANDING MEMOIZATION
85. UNDERSTANDING MEMOIZATION ALT APPROACHES
86. 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”
87. THANKS