React Native is an awesome, open-source framework for creating native, cross-platform mobile applications, but coding in React Native can be quite daunting.
In this article, we will go over some tips and techniques when building a React Native application that can make your work easier and more efficient.
Tips for React Native Application Building
- Use Hermes
- Optimize Images
- Upgrade JSC
- Console Statements
- Inline Functions
1. Use Hermes
Hermes is an open-source, lightweight, JavaScript engine for running React Native applications. Using Hermes in building React Native applications is not just an option.
It is the option.
Enabling Hermes improves start-up time, decreases memory usage, and optimizes app performance.
Formerly, Hermes was available only on Android, but with the latest release of React Native 0.64, Hermes is now available on both Android and iOS. It doesn’t come by default but can be enabled on the application.
2. Optimize Images
Image is a core component of React Native. They can be processed from the local directory or an external source. For best optimization, it is best to process images from a server level, hosted by a CDN and called with an API.
Images should also be scaled down and adjusted before being loaded into the app. It is also best to use PNG instead of JPG format.
3. Upgrade JSC (JavaScriptCore)
JSC is a JavaScript Webkit-based engine. What it does is convert JavaScript code into native code. JSC for Android was formerly an older version, which meant modern changes in JavaScript were not implemented.
To get the best of JSC, it is wise to upgrade it to the latest version, or use a newer version of React Native.
4. Console Statements
The console is a necessary debugging tool for JavaScript codes, including React Native. Debugging statements in the console should only be used for development purposes. If the statements are not removed before the application is bundled, it could cause serious bottlenecks.
A third-party package like babel-plugin-transform-remove-console can be used to track and remove console statements.
5. Inline functions Should Not Be Passed as Props
React Native uses reference checks to re-render functions that are passed to child components. Anytime the parent re-renders a new reference, the inline function is created again and again as a reference to the passed prop. This promotes garbage collection and performance loss.
Functions should instead be declared as a class method or a function inside a functional component.