[Discussion] Benchmark components

[EloB]

I've done a benchmark page between material-ui and react-toolbox because I wanted evaluated the alternatives that might have better performance. I will be happy if you guys could do some PRs with more benchmarks. I think you can get some benefit by doing this because you can see who performant your components are and also how good they are compared to the other material design frameworks and if you score well it might be good for marketing.

https://github.com/EloB/benchmark-material

I been having some problems with performance especially from lists (thats why I made my repo is the first place). I've discovered that passing "bad props" like passing new instances have really bad impact on the performance. This is not really good documented on your site or the on React site but it's more or less a React issue.

Also that having a iterator component could improve the performance alot! If you can include that somehow in your repo that could be really good.

[nathanmarks]

@EloB We're working on big performance improvements for 0.16.0. We're tackling styles first as that is a global perf issue, and then going to look component-by-component at specifics caused by other issues.

It's unlikely that we're going to want to make a big song and dance about benchmark results until the big known issues are resolved.

I also made a little benchmark component a while back to check wasted time in re-renders. I intend on doing more in that area once they release 15.1.0 with the react-perf revamp: facebook/react#6046

The best way to incorporate benchmark components here would be to add a benchmarking section to the test suite which compares against some control values.

[EloB]

@nathanmarks I seen that you guys do mergeStyle({ some: 'css', properties: 'here' }, this.props.style) and inside that method it does Object.assign({}, ...args). A easy win could be to just return the first argument if you don't have any this.props.style or the args is an empty array. So you don't create a new object all the time that doesn't pass a shallowEqual.

[liesislukas]

I've built 4 projects where I heavily use material-ui and because of performance issues during each project I have to remove some elements and recreate those by myself or just make some simplified version of node.

• Before i had issues that clicking on TextInput redraw was made for also surrounding elements, not only input.
• Right now i have issue with too many dom nodes & listeners with Toggle element. Removing it completely and making other UI decisions.
• I think buttons could also be made with less nodes. It's super popular component and used in tables a lot where you have rows and rows of buttons.

Haven't detected other components to have these issues, because i haven't tested those too much. I believe you should make some testing of how many nodes/listeners each component create and is it possible to reduce those numbers. Thanks for your hard work.

[oliviertassinari]

Wow, I have just discovered that thread. Interesting.
I'm really surprised that Material-UI outperforms React Toolbox. It's 30 FPS when scrolling vs 15 FPS and a first paint 10% sooner.
Seriously, I don't understand what's explaining that different. I would love to see the same benchmark with the next branch. Would you mind giving it a shot 👼 ?