React Native Performance Tuning

React Native mobile application efficiency or performance is defined by the user's viewpoint of how well the application performs. Mobile applications must be responsive like how quickly the application starts, how effectively it uses device memory, how efficiently it uses device power.

Here are the tips for tuning the performance of the react native mobile application:

Break big components into various small components

• Fragmenting the larger component will help in preventing the unnecessary update of the component.
• Handle the calculations in necessary components only.

Always use “userNativeDriver” while creating animations.

• Animations are an integrated part of any mobile application, whenever animation is used in React native, the user must use userNativeDriver that will handle animations on native threads instead of JS threads, which will result in smooth animation execution.
• useNativeDriver: true // <-- Add this to your animation

Use Pure components.

• Components that do not re-renders when the value of state and props has been updated with the same values.

In case if we cannot use Pure components then we should use
"shouldComponentUpdate"

• shouldComponentUpdate helps in updating the component only on a conditional basis.
  
   shouldComponentUpdate(nextProps, nextState) {
    if(some_condition_when_component_should_update) {
      return true;
     } else {
     return false;
    }
   }

Proper use of arrow functions

• Well, Arrow functions are very easy to create new functions quickly, but there is also a drawback that this function creates a new function every time it is executed.
  <TouchableOpacity onPress={() => console.log('Hello!')}>
• Use the arrow function only when it is required, which can save your application from unnecessary rerendering.

Use of flatlist rather than ListView or Scrollview

• Flatlist in react native is specifically created to handle the large list, it provides many features to handle the data in the list and performance is much better than of the ScrollView or Listview.

Use profiling for debugging the various aspects like component rendering time, and storage usage, animation frames, etc.

• In IOS we can check the application profiling in Xcode itself.
• In android, we can use the following command to record the profiling and can check all the processes which will help in identifying the memory leaks, component loads, rendering time, etc.
  $ <path_to_android_sdk >/platform-tools/systrace/systrace.py --time=10 -o trace.html sched gfx view -a <your_package_name>

Fetch data API calls should be in componentDidMount

• Calling API in constructor() or componentWillMount() is not a syntax error, but it increases code complexity and hampers performance. Therefore, to avoid unnecessary re-rendering and code complexity, it’s better to call API after render(), i.e componentDidMount()

Compressing and resizing images

• Use only the required size of the images, resize images to the required dimensions, this will definitely help to build the performance of the mobile application.
• Images clicked from the camera are large in size so compress it before uploading.

Use JSON data compression for large JSON data sets

• Well JSON is just a simple text string, we can expect to get up to 90% compression. So use JSON compression wherever possible when communicating with your web services.

Yooo!! Hope this blog helps you identify the parts in your mobile application where and how you can improve the performance.

With little workaround, more than half of React Native's performance problems can be solved. Hope that this sheds some light on enhancing the efficiency of your app. We have react native app development service and performance tuning experts to respond.

Stay tuned for more blogs like this!!