Open kylpo opened 7 years ago
Also consider using node-based benchmarking.
Reactjs - Speed up Server Side Rendering - Sasha Aickin - YouTube Great talk on 5 rules to speed up react: including using es6’s class instead of createClass
react-server-perf-tricks/benchmarkedFns.js at stage-6 · aickin/react-server-perf-tricks How he benchmarked
Consider merging props without key iteration details at http://techblog.netflix.com/2017/01/crafting-high-performance-tv-user.html
shallowCompare
props in cwrp. Store props
in state so that renders are as simple as possible.
e.g.
export class Style_ extends React.Component<IProps, void> {
componentWillReceiveProps(nextProps) {
//... shallowcompare non-child props
}
render() {
return React.cloneElement(Child, this.state)
}
}
for web, just store the className
returned by glamor, not the whole object of individual props.
Essentially hoists style to the instance level. Note, can't do module level because everything is defined as a prop in a render. spredfast/babel-plugin-transform-hoist-jsx-style: Hoist pure objects passed to 'style' prop hoists to module level.
Remove Spread operator where possible, or ensure that it is the only thing passed in to avoid object.assign
s.
Maybe just remove it completely because it depots https://babeljs.io/docs/plugins/transform-react-inline-elements/ and https://babeljs.io/docs/plugins/transform-react-constant-elements/
Perf is better now that we are using Glamor, but it could be better. See Glamor's implementation of https://github.com/kylpo/glamor/blob/master/src/jsxstyle.js for a faster implementation of what we're doing with View, Style_, etc.