Hey, that's my links list! :) Hope that's helpful!
While it's probably not 100% relevant, you might also want to glance at some of the things I've done trying to benchmark performance for the React-Redux library itself, including running benchmarks in Puppeteer and capturing metrics like render times and FPS [0].
Now, my experience has been that I have to deliberately crank up the number of components on screen and dispatch absurd numbers of Redux actions a second just to get the FPS to drop below 60FPS, so I'm not sure how much that would be applicable to real-world apps, but at least you can see how I've tried to capture the values.
As a general observation, I'd highly encourage folks to use the Profiler that's built into the React DevTools to view render behavior and find components that may be re-rendering when it wasn't necessary [1] [2].
Also, Brian Vaughn has been working on a major rewrite of the React DevTools to both improve internal speed and add new features, and you can play around with it now [3].
Finally, if you _really_ want to get fine-grained, there's a little-known profiling/tracing API that can be used to capture render times in parts of your app [4] [5] [6].
Amazing list! Thanks! Just pinged you on Twitter too. I'll add a note here for anyone interested that I've been looking at performance testing as part of our functional/regression testing strategy. Haven't used it yet, but this Jest library with puppeteer looks promising: https://github.com/jj4th/jest-puppeteer-performance
Even better these days, just use the profiler in Chrome. It’ll show you which components are mounting and rendering. I find that I can isolate troublesome components at a glance now.
While it's probably not 100% relevant, you might also want to glance at some of the things I've done trying to benchmark performance for the React-Redux library itself, including running benchmarks in Puppeteer and capturing metrics like render times and FPS [0].
Now, my experience has been that I have to deliberately crank up the number of components on screen and dispatch absurd numbers of Redux actions a second just to get the FPS to drop below 60FPS, so I'm not sure how much that would be applicable to real-world apps, but at least you can see how I've tried to capture the values.
As a general observation, I'd highly encourage folks to use the Profiler that's built into the React DevTools to view render behavior and find components that may be re-rendering when it wasn't necessary [1] [2].
Also, Brian Vaughn has been working on a major rewrite of the React DevTools to both improve internal speed and add new features, and you can play around with it now [3].
Finally, if you _really_ want to get fine-grained, there's a little-known profiling/tracing API that can be used to capture render times in parts of your app [4] [5] [6].
[0] https://github.com/reduxjs/react-redux-benchmarks
[1] https://reactjs.org/blog/2018/09/10/introducing-the-react-pr...
[2] https://www.netlify.com/blog/2018/08/29/using-the-react-devt...
[3] https://github.com/bvaughn/react-devtools-experimental
[4] https://github.com/bvaughn/rfcs/blob/profiler/text/0000-prof...
[5] https://gist.github.com/bvaughn/8de925562903afd2e7a12554adcd...
[6] https://gist.github.com/bvaughn/25e6233aeb1b4f0cdb8d8366e54a...