How to make React Native mobile application faster?

Question

React Native mobile application is working very slow on every click. I am using react native v0.40.0 and following are the dependencies of my proje

Answer 1

This is a very broad and opinion based question, but I'll try to highlight the most common points and suggestions based on the profiler you have listed.

Looking at your stack trace, the main problem lies with the UI Thread inside your package name ie com.fitspot.app.debug.

As mentioned here.

in order to display a frame, all our UI work needs to be done by the end of that 16ms period.

Once the boundary interval is set to 16ms, then you can see that the mqt_js or the JS Thread is taking far longer than 16ms for one cycle, meaning your JS Thread is running constantly.

In the current profiler, it is unclear what processes are executed in your JS Thread, therefore it is clear that the problem lies mainly in your JS Code and not the UI Thread.

There are multiple ways to make the react-native app faster which is well documented in this page. Here's a basic gist to the same.

• Error and warning messages are provided in the mode dev=true, you can disable them across the app for a better performance.

• Remove all the console.log statements from your app, as it causes a bottleneck on the JS Thread. You can use this plugin to remove all the console* statements as mentioned here, in your .babelrc files as

  {
    "env": {
    "production": {
    "plugins": ["transform-remove-console"]
    }
   }
  }
  

• You need to componentize your project structure, and use Pure Components , to rely on props and state only, use immutable data structures for faster comparisons.

• For the slower navigation transitions, you might want to check the navigation library code, since mostly they have a timeout for default transitions. As a workaround you may consider building your own transitioner.

• If you're using Animations in your codebase, you might consider setting nativeDriver=true, which would reduce the load on your JS thread. Here's a well explained example.

• You also might want to check the Profiling, to check the JS Thead and the Main Thread operations, well explained on this page.

• Other stuff includes, not requiring/importing the module, which is not necessary, importing only classes required, and not the whole component.

• Also , you dont need external libraries to make simple UI components, since their performance is much slower than the native elements of react-native. You may consider using styled-components to componentize your UI