Optimize performance!

[gaearon]

This project is ripe for performance optimizations. There’s a ton of low hanging fruit here. I think we can get 10x better performance if somebody just spends a day with ReactPerf and finds where all the wasted renders are coming from, and optimizes allocations from inline styles that almost never change. Any volunteers?

Guide to optimizing React performance: http://benchling.engineering/deep-dive-react-perf-debugging/

[gaearon]

Note: many optimizations can probably done right in https://github.com/chibicode/react-json-tree although components in this project should also have optimizable parts.

[andrewcoelho]

Hey Dan, I'll try to spend some time on this tomorrow. I've used these tools a ton and would really like to give back. I can't promise a pull request but I'll give it a shot.

[sergesemashko]

Hey Dan, I'm willing to spend a day on this tomorrow too. @andrewcoelho, let me know if you find anything that we could split.

[andrewcoelho]

@sergesemashko, I'm on a phone now so I haven't gotten a chance to look at the source, I'll ping you tomorrow if I come across anything.

[sotayamashita]

@andrewcoelho @sergesemashko I am also just beginning to do it but I'll take much time because it hard to make sufficient time to do it.

[lindskogen]

I guess this just comes around to me being a noob at npm, but what would be the best way to set up the development environment for this? Creating a project, then importing this as a dependency (local or from npm) will use the compiled files and I would need to run npm build every time I changed something.

[sergesemashko]

@lindskogen, I would suggest to look into ready to use boilerplates or projects with redux-devtools setup for a quick start. (e.g. https://github.com/erikras/react-redux-universal-hot-example/)

[Mistereo]

@lindskogen, not sure that this is a best option but you can start babel in watch mode:

npm run build -- --watch

[lindskogen]

@sergesemashko that is not for development, though?

[sergesemashko]

@lindskogen, there should be a redux application context where you can play with redux-devtools-log-monitor and test its performance. For example, you can take any boilerplate with redux-devtools-log-monitor and execute 300+ actions, and after that you can notice slowness in sidebar panel on state changes.

Not sure if following approach is the best one, but to debug redux-devtools-log-monitor and check if it gets any better:

1. you'll need to run npm install once from node_modules/redux-devtools-log-monitor;
2. after every update inside node_modules/redux-devtools-log-monitor run npm run build;
3. refresh the page, test the performance;
4. iterate from 2 to 3 😄

[phamcharles]

@sergesemashko, in #46 (if approved), will allow you to export the 300+ actions and import them after you made performance changes to the internal. That way you can test against the same dataset every time. This 300+ actions would also be beneficial to stress testing the importing/exporting functionality.

[sotayamashita]

@lindskogen If you are still looking for the way to debug, I just add devtool to redux example. Here is forked repo. https://github.com/sotayamashita/redux/tree/debug/redux-devtools-log-monitor