React Native Performance Profiling – Adam Stanford – Medium

  • React Native Performance ProfilingOver the past six months at WeDo, we have been working on improving the performance our React Native app.
  • */)Tracking Unnecessary RendersThis might easily be the biggest issue we faced for most of our react native performance issues.
  • You can then either log this, display it in your view, or like we did and use React Native Debugger and inspect our components directly.connect(stateToProps, dispatchToProps, null, {renderCountProp: will give you insight into how many times your view is rendering.
  • In our case we use Reselect as much as we can, so for us this wasn’t an issue as new objects are never returned unless the data within them has changed.Redux Level PerformanceMost of our performance issues were not on the Redux layer of our app.
  • Recently tracking components and views performance within a shared spreadsheet helps us track performance for better or worse.

Over the past six months at WeDo, we have been working on improving the performance our React Native app. With any performance issues, profiling is the first step. In this article I will cover what…

React Native Performance ProfilingOver the past six months at WeDo, we have been working on improving the performance our React Native app. With any performance issues, profiling is the first step. In this article I will cover what tools worked for us and how we utilized them to build our baseline for future performance improvements.React Native SlowlogReact Native Slowlog has been our go to when it comes to view rendering performance. What we specifically liked about this library is the able to set a custom threshold.It couldn’t be easier to use. Just add a single line of code in your views constructor and you will be off to profiling.slowlog(this, /.*/)Tracking Unnecessary RendersThis might easily be the biggest issue we faced for most of our react native performance issues. When you have a view unnecessarily rendering it slows everything down. Since we use React Redux within our app we were able to take advantage of a feature on the connection options. When setting the renderCountProp property, React Redux will pass a render count to your view. You can then either log this, display it in your view, or like we did and use React Native Debugger and inspect our components directly.connect(stateToProps, dispatchToProps, null, {renderCountProp: will give you insight into how many times your view is rendering. Can be the first red flag for tracking down unnecessary renders.Tracking State and Prop ChangesWhen trying to narrow down what is causing the unnecessary renders above your first line of defense is to monitor your state and…

React Native Performance Profiling – Adam Stanford – Medium