I just went through a rather large profiling/optimization run on the my site, BitMEX (we're a Bitcoin derivatives exchange). Performance is paramount in trading, so our site has to be fast. Here's some additional tips:
0. shouldComponentUpdate (SCU) is everything. Consider creating a base React.Element extension class. I define a base shouldComponentUpdate and some useful utilities on it. Having it in one place is really useful because you can log its output from every component and watch how your whole application updates. It makes it easy to see useless rerenders.
- One very helpful addition in our app has been a static 'SCUSelector' property, which tells our shallow shouldComponentUpdate to ignore certain props/state/context. This helps in combination with rich componentWillMount() or getInitialState() functions to precalculate expensive data that updates rarely/never.
1. It seems the `connect(component, selector)` model [0] encouraged by Redux to hook up application data to deep(er) components is much better for performance. You want to avoid renders in as many tree branches as possible. To this day, the root element (`<App>`) still holds most of our data and fans it out to the Router, Header, Sidebar, etc. This root-level render must be extremely fast because it runs on every tick. Hoisting any and all data that can be made constant is a huge help.
2. We saw massive (50%+) performance gains from Babel's constant-elements and inline-elements optimizations [1]. Careful with it - there's is a nasty bug [2] that only manifests in production you need to be aware of if you're deploying this.
3. Immutable-JS is kind of a wash. I'm not a big fan of the API or how easy it is to nest mutable objects and arrays inside immutables. The new array/object spread syntax in ES6 makes it easier to construct unique objects every time data updates, so you can do a shallow shouldComponentUpdate.
4. Watch out for function identity because it will blow SCU [3]. Either ignore the property explicitly, or use a binding helper like the one I posted on that issue [4].
5. If you're doing expensive data computation, such as update/insert/delete/image on websockets, profile it. If you're accidentally causing deopt, you'll feel it. Make sure the libraries you use don't cause deopt either. A few simple tweaks [5] can give you 2-10x performance boosts on hot functions [6].
6. If you haven't already, watch videos on how V8 optimizes. It will help you write fast code in the future.
7. Keep watching your app! The new React devtools can highlight components as they update. This is really useful to see what work is being done and how you can improve.
0. shouldComponentUpdate (SCU) is everything. Consider creating a base React.Element extension class. I define a base shouldComponentUpdate and some useful utilities on it. Having it in one place is really useful because you can log its output from every component and watch how your whole application updates. It makes it easy to see useless rerenders.
- One very helpful addition in our app has been a static 'SCUSelector' property, which tells our shallow shouldComponentUpdate to ignore certain props/state/context. This helps in combination with rich componentWillMount() or getInitialState() functions to precalculate expensive data that updates rarely/never.
1. It seems the `connect(component, selector)` model [0] encouraged by Redux to hook up application data to deep(er) components is much better for performance. You want to avoid renders in as many tree branches as possible. To this day, the root element (`<App>`) still holds most of our data and fans it out to the Router, Header, Sidebar, etc. This root-level render must be extremely fast because it runs on every tick. Hoisting any and all data that can be made constant is a huge help.
2. We saw massive (50%+) performance gains from Babel's constant-elements and inline-elements optimizations [1]. Careful with it - there's is a nasty bug [2] that only manifests in production you need to be aware of if you're deploying this.
3. Immutable-JS is kind of a wash. I'm not a big fan of the API or how easy it is to nest mutable objects and arrays inside immutables. The new array/object spread syntax in ES6 makes it easier to construct unique objects every time data updates, so you can do a shallow shouldComponentUpdate.
4. Watch out for function identity because it will blow SCU [3]. Either ignore the property explicitly, or use a binding helper like the one I posted on that issue [4].
5. If you're doing expensive data computation, such as update/insert/delete/image on websockets, profile it. If you're accidentally causing deopt, you'll feel it. Make sure the libraries you use don't cause deopt either. A few simple tweaks [5] can give you 2-10x performance boosts on hot functions [6].
6. If you haven't already, watch videos on how V8 optimizes. It will help you write fast code in the future.
7. Keep watching your app! The new React devtools can highlight components as they update. This is really useful to see what work is being done and how you can improve.
---
Links:
0. https://github.com/rackt/react-redux/blob/master/docs/api.md...
1. https://babeljs.io/docs/plugins/transform-react-inline-eleme...
2. https://github.com/facebook/react/issues/5138
3. https://github.com/facebook/react/issues/5197
4. https://github.com/facebook/react/issues/5197#issuecomment-1...
5. https://github.com/petkaantonov/bluebird/wiki/Optimization-k...
6. https://github.com/AmpersandJS/ampersand-state/pulls?utf8=%E...