Find out how to use dedicated higher-ordered React Native components to improve user experience and performance of your apps.

Introduction

The following article is focused on the second point of The Ultimate Guide to React Native Optimization tactics: using dedicated components for certain layouts.

Why do we consider this aspect important?

Using specialized components will always make your app work as fast as possible. It has a significant impact on the performance of your app which leads to better user experience.
Going further, by applying the practices described in the following article, you will increase the revenue-generating efficiency of your products and increase their ROI.
What’s more, in this article we will tell you how to save yourself a lot of time reimplementing the most common UI patterns from the ground up. Thanks to that, you will be able to implement future updates faster.

This article is a part of The Ultimate Guide to React Native Optimization. Previously we described how important is to pay attention to UI re-renders.

Now, let’s find out how to use higher-order React Native components to achieve the best possible performance of your apps.

Use dedicated React Native components for certain layouts

Issue: You are unaware of higher-order components that are provided with React Native

In React Native application, everything is a component. At the end of the component hierarchy, there are so-called primitive components, such as Text, View or TextInput. These components are implemented by React Native and provided by the platform you are targeting to support most basic user interactions.

When we’re building our application, we compose it out of smaller building blocks. To do so, we use primitive components. For example, in order to create a login screen, we would use a series of TextInput components to register user details and a Touchable component to handle user interaction. This approach is true from the very first component that we create within our application and holds true the final stage of its development.

illustration of a login screen

On top of primitive components, React Native ships with a set of higher-order components that are designed and optimized to serve a certain purpose.

Being unaware of them or not using them in all the places can potentially affect your application performance, especially as you populate your state with real production data. Bad performance of your app may seriously harm the user experience. In consequence, it can make your clients unsatisfied with your product and turn them towards your competitors.

Not using specialized higher-ordered components will affect your performance and UX as your data grows

If you’re not using specialized components, you are opting out from performance improvements and risking degraded user experience when your application enters production. It is worth noting that certain issues remain unnoticed while the application is developed, as mocked data is usually small and doesn’t reflect the size of a production database.

Illustration showing a wireframe of mobile application with a list of items and is in "pulled to refresh" mode.

Specialized components are more comprehensive and have broader API to cover the vast majority of mobile scenarios.

Solution: Always use specialized component, e.g. FlatList for lists

Let’s take long lists as an example. Every application contains a list at some point.

The fastest and dirtiest way to create a list of elements would be to combine ScrollView and View primitive components.

However, such an example would quickly get into trouble when the data grows. Dealing with the large data-sets, infinite scrolling, and memory management was the motivation behind FlatList – a dedicated component in React Native for displaying and working with data structures like this.
Compare the performance of adding new list element based on ScrollView,

Read more: https://snack.expo.io/qjtEVHrdV

to list based on FlatList.

Read more: https://snack.expo.io/1muB1wKya

The difference is significant, isn’t it? In the provided example of 5000 list items, ScrollView version does not even scroll smoothly.

At the end of the day, FlatList uses ScrollView and View components as well – what’s the deal then?

Well, the key lies in the logic that is abstracted away within the FlatList component. It contains a lot of heuristics and advanced JavaScript calculations to reduce the number of extraneous renderings that happen while you’re displaying the data on screen and to make the scrolling experience always run at 60 FPS.

Just using FlatList may not be enough in some cases. FlatList performance optimizations relay on not rendering elements that are currently not displayed on the screen. The most costly part of the process is layout measuring. FlatList has to measure your layout to determine how much space in the scroll area should be reserved for upcoming elements. For complex list elements, it may slow down interaction with a flat list significantly. Every time FlatList will approach to render the next batch of data it will have to wait for all new items to render to measure their height.

illustration presenting the concept of windowing

However, you can implement getItemHeight() to define element height up-front without the need for measurement. It is not straight forward for items without constant height. You can calculate the value based on the number of lines of text and other layout constraints. We recommend using react-native-text-size library to calculate the height of the displayed text for all list items at once. In our case, it significantly improved responsiveness for scroll events of FlatList on android.

Benefits: Your app works faster, displays complex data structures and you opt-in for further improvements

Thanks to using specialized components, your application will always run as fast as possible. You automatically opt-in to all the performance optimizations done by the React Native so far and subscribe for further updates to come.

At the same time, you also save yourself a lot of time reimplementing the most common UI patterns from the ground up. Sticky section headers, pull to refresh – you name it. These are already supported by default if you choose to go with FlastList.

Summary

Using dedicated, higher-order React Native components for certain layouts also has a huge impact on the business side of your app. It allows you to improve the user experience and performance what directly increases the ROI of your products.

Note: If you would like to read more about how user experience influences the business side of the apps, read this article.

In the next part of our guide, we will tell you how to choose external libraries that make your apps load faster.

Callstack

We are the official Facebook partners on React Native. We’ve been working on React Native projects for over 5 years, delivering high-quality solutions for our clients and contributing greatly to the React Native ecosystem. Our Open Source projects help thousands of developers to cope with their challenges and make their work easier every day.

Contact us if you need help with cross-platform or React Native development. We will be happy to provide a free consultation.