Hacker News new | ask | show | jobs
by acemarke 2593 days ago
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].

[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...

2 comments

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.