Why is it important?

As per the Google report, around 53% of visitors leave the application which takes more than 3s. This means every single second is crucial.

How to improve app performance?

1. Images

Image contributes immensely to high memory usage to react native mobile apps. Also image represent the “heaviest” elements in any website or application.

What can you do

  • Reduce image size.
  • Convert images to Webp format.
  • Use PNG rather than JPEG format.
  • Cache Images wherever it is required.

2. Unnecessary Renders

You need to be very careful while implementing the different state, lifecycle, and props. This helps to prevent you from passing too much work to the reconciler, which may result in the dropping of the thread’s FPS.

Solutions

  1. Create a separate reducer for the different task, don’t merge all in one.
  2. Use shallowEqual with useSelector wherever it is required, so that only related components get rerender.
  3. Create/mutate a state only when it is required.
  4. Use useImperativeHandle to play with children component’s states.

3. Avoid the use of ScrollView to Render a Huge list

Don’t use ScrollView for rendering the large list because it renders all children at once. So use FlatList or VirutalizedList as preferred.

Don’t ignore the Uniqueness of the key for FlatList/ VirtualizedList

These unique keys are what allow the VirtualizedList (which is what FlatList is built on) to track items, cache them, and are really important in terms of efficiency.

The way React Native deals with a change to your list without a key is to delete everything visible on the screen and then look at the new array of data and renders a single element for each one.

We don’t want React Native to rebuild an entire list just because of one small change to the array of data. Ideally, we want React Native to detect specifically the object we deleted or changed and update accordingly, but that will not happen if we do not provide the unique key.

4. Remove Console Statements

Using console.log statements is one of the most common patterns to debug in JavaScript applications in general, including React Native apps. Leaving the console statements in the source code when publishing React Native apps can cause some big bottlenecks in the JavaScript thread.

Source: Medium

Comments are closed.