Three interesting facts about React Native for you to mull over:
- React Native ranks 6th in the Stack Overflow Developer Survey 2021 with 14.51% votes.
- Giants such as Facebook, Skype, and SoundCloud Pulse chose the React Native framework to build their apps.
- 14.85% of installed apps among the top 500 apps in the U.S. are built with the React Native framework.
You’re convinced that the React Native framework is a big deal. However, before you go and hire a React Native developer to build your app, read this article.
In the next five minutes, the article will discuss 7 ways to improve the performance of a React Native app. The comprehensive guide will discuss:
- How steering clear of ScrollView to render huge lists optimizes the performance of a React Native app
- How steering clear of unnecessary renders optimizes the performance of a React Native app
- How steering clear of passing functions inline as props optimizes the performance of a React Native app
- How steering clear of arrow functions optimizes the performance of a React Native app
- How steering clear of implementing bulk reducers optimizes the performance of a React Native app
- And much more
If you’re someone who is hiring React Native developers, you’ll know what to look for in them to make the best recruit. If you’re a React Native developer, you’ll know what to do to achieve React Native performance optimization.
Without further ado, let’s begin.
7 ways to improve the performance of a React Native app
1. Never use ScrollView to render huge lists
If you want to display items in React Native with scrollable lists, you have two options – ScrollView and FlatList components.
ScrollView is easy to implement. However, it’s also one of the biggest reasons behind the React Native Android slow performance. The issue shows up even more when the number of items on the list is huge.
Thus, you’d do better to use FlatList to handle large amounts of data in the list format. The component displays a scrolling list of changing but similarly structured data. The component works best with long lists of data where the number of items changes over time.
However, note that the items in the FlatList component are lazy-loaded. Thus, the feature can make the app use an excessive or inconsistent amount of memory.
2. Steer clear of unnecessary renders
Steering clear of unnecessary renders is a great way to reduce the overall rendering overhead.
The reason behind this is when you avoid unnecessary renders, a component uses the previously cached properties and renders the JSX view returned by the functional component only once even when the component receives the same set of properties multiple times.
You can achieve the same by using React.memo. The feature handles memorization.
Here’s an example for you to understand this better.
In the example, the Animal component comes with a state variable called leg count. The variable is updated with a number that’s associated with each pair whenever the button is pressed.
When the button is pressed, the WildAnimal component gets re-rendered. The function happens even though the text property of the component doesn’t change with render.
React.memo can optimize the process by wrapping the contents of the WildAnimal component with itself.
3. Steer clear of passing functions inline as props
Never pass a function inline when you need to pass a function as a property to a component. The reason behind this is doing so makes the parent re-render a new reference. The process creates an additional function.
Thus, the child component re-renders without the props changing.
Instead, declare the function as a class method or as a function inside a functional component. The process helps the references get rid of any possibility of across re-renders.
4. Steer clear of arrow functions
If you’re asking “How to check the performance of a React Native app?” checking if you’re using arrow functions is a great way to measure the same.
Arrow functions result in unnecessary re-renders.
That’s why you shouldn’t use arrow functions as callbacks in your functions to render views. Furthermore, the arrow function allows each render to generate a new instance of that particular function.
Therefore, whenever reconciliation happens, the React Native framework compares a difference. The framework never reuses old references if the function reference doesn’t match, thus avoiding unnecessary re-renders.
5. Steer clear of implementing bulk reducers
A brilliant React Native performance KPI is not implementing bulk reducers.
You should always update only the references that need to be updated. If an item comes with the same value as before, you don’t need to save a new reference for the same as it’ll create useless renders.
In Flatlogic we create web & mobile application templates built with React, Vue, Angular and React Native to help you develop web & mobile apps faster. Go and check out yourself!
See our themes!
Thus, if you’re not using Redux with rematch and/or normalize or if you’re writing reducers yourself to an extent, always mutate only the objects that you need to.
Furthermore, when you re-fetch a list of items from the network and save it in the reducer, here’s what the process will look like:
6. Enable the RAM format
You can achieve the same in both Android and iOS platforms.
Enabling the RAM format on the iOS platform will create a single indexed file. Afterward, the React Native framework will load one module at a time.
Furthermore, enabling the RAM format on the Android platform will create a set of files for each module on its own. You can force Android to create a single file similar to iOS as well. However, using several files needs less memory on Android and offers better performance.
Edit the build phase “Bundle React Native code and images”. Before
../node_modules/react-native/scripts/react-native-xcode.sh add export BUNDLE_COMMAND="ram-bundle":
To enable the RAM format in Xcode.
To achieve the same on Android, edit the android/app/build.gradle file. Before the line apply from: “../../node_modules/react-native/react.gradle”, add or amend the project.ext.react block:
Note that if you’re using the Hermes JS engine, you won’t need RAM bundles. When the framework loads the bytecode, the mmap makes sure that the entire file doesn’t get loaded.
7. Opt for uncontrolled inputs
A key difference between React Native performance vs React performance is that uncontrolled inputs in React Native increase the performance; a phenomenon that’s the opposite in React.
The reason behind this is that controlled inputs in the React Native framework lead to rendering glitches while updating the view.
Use uncontrolled inputs. All you need to do to achieve that is remove the value property. Whenever you modify an uncontrolled input, there’ll be no state changes and thus there’ll be no re-renders.
Ways to improve the performance of a React Native app – upskill to stay on top of your game
Glassdoor confirmed a React developer in the U.S. earns $95,641 per year on average. Furthermore, the highest-paying React developers in the U.S. earn $149k.
Thus, the job is a lucrative one. Now that you know the 7 ways to improve the performance of a React native app, you can stay ahead of the game. Read more:
