Performance Profiling a Redux App
Redux apps are generally pretty easy to optimize for performance. Redux is default-fast, to an extent. By enforcing immutability, it offers a lot of areas for simple optimizations by === equality checks. Simple equality checks means it’s easy to memoize functions, allowing your app to avoid redundant work.
The hard part of optimization within large applications, is finding out what parts of your code are the most expensive to run. The Chrome devtools offers pretty advanced profiling tools that help you analyze your code, but it can be difficult to tell the difference between the code you’ve written and the code that comes from libraries.
Below is a flame chart from the real-world Redux example after submitting a search.
Most of the functions names there are coming from React. Functions like dispatch, recomputeStates, and onStateChange, and performUnitOfWork don’t go very far to help you determine what you can do to speed things up.
React’s dev mode helps you out by hooking into the standard “user timing API” to tell you what components are associated with what parts of the flame chart. This can be immensely helpful for identifying what…
