Sooner or later, the corporate I paintings in made up our minds that it wanted a cell app. Our front-end staff volunteered to lend a hand with this attention-grabbing venture. As everyone knows, React Local is one of the simplest ways to begin growing cell apps in case you are a front-end developer, particularly in case you are growing by means of the use of the React library. That is how we set to work on our WMS app.

So far as the app used to be rising, we began enthusiastic about its functionality checking-up and techniques to optimize it.

Our plan used to be:

1. Outline drawback puts
2. Measure what’s measurable (no guesswork)
3. Analyze it
4. Fortify it if it is wanted
5. Stay it underneath keep an eye on

By means of that point, our utility contained two giant portions — navigation and scrollable lists. We used other equipment to test the functionality of each and every one.

Principally, in maximum performance-checking equipment, inexperienced signifies that it is if truth be told excellent, yellow — there’s a position for development, however the app may just nonetheless paintings with it, and crimson signifies that your app screams for lend a hand in conjunction with its shoppers.

We outlined some issues, and the primary one used to be most commonly associated with rendering time of the Drawer part chargeable for navigation:

App profiler by means of React DevTools

We additionally checked the functionality of our app:

App functionality by means of Flipper + RN Perf observe

We noticed that functionality sagged to nearly 0 in navigation. The issue has been recognized for a very long time and it’s described within the documentation. In a nutshell, when a brand new display screen is driven, React Navigation to begin with renders it off-screen and animates it into position in a while. So if there’s a display screen with a large number of elements, it’ll simply take a couple of hundred milliseconds to render is driven.

We had a large number of nesting navigators throughout the app, so we confronted this drawback. Ahead of fixes from the React Navigation library are launched, there may be one solution to keep away from this drawback — do not use too many navigators and reduce nesting up to imaginable. Additionally you’ll be able to attempt to delay heavy calculations with InteractionManager.

2d drawback used to be associated with our scrollable record:

Scrollable record profiler by means of React DevTools

Scrollable record

Throughout the scrolling, we measured functionality, and it confirmed us the following outcome:

Scrollable record functionality by means of Flipper + RN Perf observe

No longer that unhealthy, however needless to say, there have been a couple of puts for optimizing. We started with the code and elements. Principally, we had a FlatList part with rendered information. The very first thing to test used to be how we used memoization there. For instance, we needed to scan the barcode and fetch the precise information, and according to this knowledge, it confirmed a related record. If we scanned the similar barcode, the entire display screen used to be re-rendered as it idea that there used to be some new information coming. To keep away from this, we had to analyze what elements had been re-rendered most commonly and attempted to memoize purposes, variables, and props by means of the use of sure strategies similar to useCallback, useMemo, and React.memo. However take note to make use of it in the community best the place it is if truth be told wanted as a result of over-memoization would possibly degrade your app functionality much more. So you wish to have to make use of useMemo best on pricey computations, wrap part in React.memo provided that this part re-renders frequently with the similar props and part is fairly giant in measurement, and use useCallback provided that part accepts your serve as is determined by the referential equality. After all, it is not the entire use instances however the not unusual ones.

The following factor used to be to test how our primary part of the scrollable record used to be applied:

    <FlatList
      information={skuInfo}
      renderItem={({ merchandise: sku }) => <SkuCard {...sku} />}
      keyExtractor={sku => sku.identity}
    />

We were given again to documentation and refreshed our reminiscence. There used to be recommendation to not use an arrow serve as in renderItem assets. Additionally, a renderItem part is meant to be a memoized dumb part to keep away from pointless re-renders.

  // Fixes for SkuCard part
  export default memo(SkuCard);

  // Fixes for renderItem assets of FlatList
  const renderItem = useCallback(
    ({ merchandise: sku }: { merchandise: SKUInfo }) => <SkuCard {...sku} />,
    [],
  );

  // How FlatList seems like after fixes
  <FlatList
    information={skuInfo}
    renderItem={renderItem}
    keyExtractor={sku => sku.identity}
  />

We checked the profiler of the scrollable record after the ones adjustments:

Scrollable record profiler by means of React DevTools

It helped to optimise rendering section so much. Additionally, we had a have a look at functionality:

Scrollable record functionality by means of Flipper + RN Perf observe

Alright, significantly better now. For that second, we had a small utility, and the extra it grows, the extra we will be able to wish to observe functionality. 

Additionally, needless to say you have got some great equipment from Shopify, similar to FlashList that you’ll be able to attempt to enforce to your app.

Conclusion

1. Steer clear of the use of a considerable amount of navigators and reduce nesting up to imaginable.
2. Defer computation and heavy rendering with InteractionManager to keep away from them affecting the functionality of the UI
3. Take a look at rendering placeholders for the heavy portions of your displays at the first render, after which after the animation finishes, exchange them with precise content material
4. Profile other puts of your app and notice what’s taking more often than not to outline if it is React Navigation, or is it your app elements good judgment that may be optimized
5. Use exterior libraries moderately. Examine functionality prior to and after making use of a particular library and come to a decision what’s the easiest to your app.