This article is an excerpt from The Ultimate Guide to React Native Optimization. It focuses on the dos and don’ts of choosing external libraries for your next React Native project.
Why is it important?
External libraries might be one of the most important factors affecting the size and speed of your React Native app. That's why you should be extremely careful when selecting the one for your project. Here, you will learn how to find the library that has all the desired functionalities but at the same time does not degrade the performance of your app.
In other blog posts based on The Ultimate Guide to React Native Optimization, we touch on the following topics related to improving performance through understanding the React Native implementation details:
- Optimizing battery drain with mobile-dedicated libraries
- Animating at 60FPS
- Improving React Native performance with high-order components
Why you should think twice before picking external library
This type of ecosystem has many advantages, but also some serious drawbacks. One of them is that developers can find it hard to choose from multiple libraries supporting the same use case.
When picking the one to use in the next project, they often research the indicators that tell them if the library is healthy and well maintained, such as the Github stars, the number of issues, contributors, and PRs.
Truth is – they will not, as mobile development is fundamentally different and has its own set of rules. For example, while the size of assets is crucial in the case of web applications, it is not equally important in React Native, where assets are located in the filesystem.
The key difference lies in the performance of the mobile devices and the tooling used for bundling and compiling the application.
How complex libraries hamper the speed of your apps
While that happens, the application remains in the loading state. We often describe this process as TTI – time to interactive. It is a time expressed in (well, hopefully) milliseconds between when the icon gets selected from the application drawer and when it becomes fully interactive.
Unfortunately, Metro – the default React Native bundler – doesn’t support tree shaking as of now. It means that all the code that you pull from npm and import to your project will be present in your production bundle, loaded into the memory and parsed. What’s worth pointing out is that it’s not the case with Hermes engine, which automatically pages only necessary <rte-code>bytecode<rte-code> into memory.
How to analyze bundle size
Keeping tabs on your bundle size is very important. We can make use of the react-native-bundle-visualizer to analyze the bundle with the help of GUI. We can get the details of any added library in the bundle; hence deciding if it’s worth keeping or removing that library. This package produces output using the app bundle in the following form:
Be more selective and use smaller, specialized libraries
The easiest way to overcome this issue is to employ the right strategy for architecturing the project upfront.
If you are about to pull a complex library, check if there are smaller alternatives that have the functionality you’re looking for.
Here’s an example: One of the most common operations is manipulating the dates. Let’s imagine you are about to calculate the elapsed time. Rather than pulling down the entire <rte-code>moment.js<rte-code> library (67.9 Kb) to parse the date itself:
Parsing date with moment.js
You can use <rte-code>day.js<rte-code> (only 2Kb) which is substantially smaller and offers only the functionality you were seeking.
Parsing date with day.js
If there are no alternatives, the rule of thumb is to check if you can import a smaller part of the library.
For instance, many libraries such as <rte-code>lodash<rte-code> have already split themselves into smaller utility sets and support environments where dead code elimination is unavailable.
Let’s say you want to use <rte-code>lodash<rte-code> map. Instead of importing the whole library, as presented here:
Using lodash map by importing the whole library
You could import only a single package:
Using lodash map by importing only a single function
As a result, you can benefit from the utilities that are a part of the <rte-code>lodash<rte-code> package without pulling them all into the application bundle.
If you’d like to have constant insight into your dependencies' size impact, we highly recommend the import-cost VSCode extension. Or using the Bundlephobia website.
Faster loading means better business results
Mobile is an extremely competitive environment, with lots of applications designed to serve similar purposes and fighting over the same customers. Faster startup time, smoother interactions and overall look and feel might be your only way to stand out from the crowd.
According to Akamai’s report on online retail performance, just one-second delay in mobile load times can cut the conversion rates by up to 20%. That’s why you shouldn’t downplay the importance of choosing the right set of libraries. Being more selective with third-party dependencies may seem irrelevant at first. But all the saved milliseconds will add up to significant gains over time.
Are you struggling with choosing the right tool set for your project? Trust our React Native development company to match the technology with your business objectives!