React Native is an open-source mobile software developed by Facebook. It is used to build software for Android TV, macOS, Web, UWP, Android, iOS, tvOS, and Windows by letting developers implement a framework of React along with native channel capabilities.
React Native was launched in 2015 and in just a couple of years, it rose to the top solutions for mobile development. Some of the world’s powerful apps such as Facebook, Skype, and Instagram are powered by React Native.
There are several reasons responsible for the global success of React Native, including React-a hugely popular JavaScript library, its cross-platform functionality for both Android & iOS by creating code only once, and empowering frontend developers to work on mobile-based technologies.
Let us have a look at a few tips & tricks to improve the speed of React Native application.
1.PREVENT INLINE STYLESHEETS
An inline stylesheet is workable. However, to further lessen the rendering time of your components, the Object stylesheet is a better option, as per documentation.
-It only lets to forward the style, only once through the bridge. All further applications need to refer to an ID.
-With an Object style sheet, there is no need to create a new style object every time. Referring to ID makes it possible to build a style sheet from a style object.
2.ASYNCHRONOUSLY PERFORM EXPENSIVE TASKS
React Native software has its functions and views written in JavaScript. However JS is single-threaded, but the highly challenging activities such as API calls should be done in an async manner to prevent blocking other tasks.
3.APPLY GLOBAL STATE
Calls to ‘setState’ must be avoided, as they drop the performance very fast as well as prove to be expensive. Rather, libraries like ‘Redux’ must be used to manage states in your app in a better way. ‘Redux’ not only syncs your app state with your views but also updates your props letting your views render only when required. If you are writing a component where only props are needed then go for React.PureComponent.
4.IMPLEMENT IMMUTABLE ATTRIBUTES
With the use of React.PureComponent, updates are only made when props change. Rather with the immutable attributes, the object changes when required and the immutable data once created can’t be changed. Immutable JavaScript offers several persistent data structures like Stack, OrderedMap, OrderedSet, Record, List, Map, and Set. While PureComponent does not compare the internal features of an object. However, both the former and latter are good matches when only re-rendering the views is required.
5.WHEN POSSIBLE USE PURECOMPONENT
To avoid unnecessary re-rendering, PureComponent or stateless function must be used. React.PureComponent reforms the life-cycle method and put in some workable logic to automatically know when re-rendering the component is needed. Thus, PureComponent will not only save you time but also help in avoiding redundant code.
6.DON’T REVEAL THE TASK INSIDE THE RENDER METHOD
Each time the render method is called, the task proclaimed under the render method will be re-proclaimed. This will result in making the view of your app lag and the performance will also be suffered to some extent.
Tasks like this:
render(){
const setValue = (val) => this.setState({ search: val });
return (<TextInput onChangeText={setValue} placeholder=”Type here to translate!” />);
}
In the above task, rendering will prove to be very expensive as it would require re-rendering at each step. It should rather be handled in the following manner:
class MyApp extends React. Component{
constructor(props) {
super(props);
}
…
…
…
setValue = (val) => this.setState({ search: val })
render() {
return ( <TextInput style={{height: 40}}
placeholder=”Type here to translate!”
onChangeText={this.setValue}
/>);
}
}
7.OPTIMIZE THE PERFORMANCE OF STATIC IMAGE
Static images can be optimized by loading them from the app package through the ‘Android drawable folder’ or ‘Xcode asset catalogs’ against the JS package.
Putting in static assets for Android: Keeping your static asset images to the drawable folder of the Android portfolio (android/app/src/main/res/drawable). This folder should be kept on a single level, Android won’t be able to see anything kept in subdirectories. To avoid error while compiling the project, the file name should begin with a letter.
Adding static assets for iOS: You can simply add your static asset images by selecting the asset catalog in Xcode that is, project (Images. cassettes) or you can just drag your files into it. Also, there is a plus button in Xcode to add the assets.
Usage in JS: Image can be loaded in JavaScript code as following:
<Image source=”{{uri:”my_image”}} />
Note: Without the extension.
8.AVOID BINDING METHODS IN RENDER
It can be very dangerous to bind functions under render method.
<TextInput onChangeText={this.textChanged.bind(this)} />
or
<TextInput onChangeText={()=>this.textChanged()} />
Every time your view gets re-rendered, such tasks get to build. Inside the constructor, it can be done in a better way like:
class MyApp extends React. Component{
constructor(props) {
super(props);
this.setValue = this.setValue.bind(this);
}
…
…
…
setValue(val) {
this.setState({ search: val });
}
render() {
return ( <TextInput style={{height: 40}}
placeholder=”Type here to translate!”
onChangeText={this.setValue}
/>);
}
}
CONCLUSION
The React Native coding will get more efficient and quicker using the tricks discussed above. Nevertheless, before looking for optimization, it must be understood how the React elements function, knowing their diffing algorithms, and how rendering functions in React. This conceptual knowledge will help you work in the right direction.