Description
With React 16 and React Native 0.45.1 we lost a couple of really important tools for performance profiling on React Native.
Previously there were different ways to profile performance bottlenecks:
- Via Systrace on Android and iOS we saw the flame graph within the Chrome tracing view.
RCTRenderingPerf
/react-addons-perf
: We were able to determine the wasted render count and time of components.
Unfortunately ...
... Systrace on iOS broke with the introduction of the CxxBridge: TypeError: global.nativeTraceBeginSection is not a function (Systrace)
... RCTRenderingPerf
is not available with React 16 anymore as react-addons-perf
was removed due to Fiber: Plan for Addons in React 16 and RCTRenderingPerf
was recently removed completely from React Native: Remove unused RCTRenderingPerf.
With React on the web it's not such a big deal, as you can use the Chrome Timeline to get at least a bit of insights how long a component needs to render (Fiber Performance measurements) and it's the recommended way based on the feedback from the React Core Team.
Unfortunately this is not available in React Native. If you use react-dev-tools
or remote debugging, you only see the performance timeline of the react-dev-tools
. Still it's not really possible to see the wasted render time per component as we saw before with react-addons-perf
.
Currently this is a big issue for us, as we are kind of blind to determine the reason for performance issues or if we just would like to profile certain components.
One very promising PR is this one from @gaearon : Not for Merge - Disable ReactPerf and Update Systrace React Integration #12797 - that hopefully would give us some transparency of components render cycle back. Work needs to be pickup though.
Maybe to mention is that we are very comfortable with Xcode Instruments or Android Profiling tools, but in there it's not possible to the fine granularity of profiling like e.g. we had with react-addons-perf
.
- What are the future plans for React Native Performance Profiling?
- Are there any other best practices available?