"A compelling reason for using React Native instead of WebView-based tools is to achieve 60 frames per second and a native look and feel to your apps."
Performance issues in React Native apps have been noticeable to developers, Even though the React Native team is trying their best, Most of these have to do with React itself and how it works. Rendering at 60FPS (Frame Per Seconds) is possible but due to some unethical coding style can make state and render very very expensive, Rendering and loading of assets can draw back React Native app Speed, Overall app performance will also take some hit.
We are going to look into 8 simple ways we can increase the speed of React Native application, These are derived from what other developers have done and my experience with React Native.
1. Use PureComponent When Possible
Use stateless function or user Pure component to avoid unnecessary re-rendering, React.PureComponent changes the life-cycle method shouldComponentUpdate and adds some useful logic to automatically check whether a re-render is required for the component. This allows a PureComponent to call method render only if it detects changes in state or props, hence, one can change the state in many components without having to write extra checks like:
if (this.state.someVal !== computedVal)
{
this.setState({ someVal: computedVal })
}
PureComponent will save you time and help to avoid writing redundant code.{
this.setState({ someVal: computedVal })
}
2. Avoid Inline StylesSheet
Inline stylesheet is good but to further reduce the rendering time of your components Object StyleSheet is better, According to documentation.- Making a Stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time.
- It also allows to send the style only once through the bridge. All subsequent uses are going to refer an ID (not implemented yet).
3. Don't Declare Function Inside The Render Method
Function declared inside the render method will be redeclared each time the render method is called, this will make the view of your app lag and performance will suffer a big hit. Functions like this:
render(){
const setValue = (val) => this.setState({ search: val });
return (<TextInput onChangeText={setValue} placeholder="Type here to translate!" />);
}
The example above define such situation where rendering will be very expensive every time there is a need to re-render.
It's better to handle it like this:
const setValue = (val) => this.setState({ search: val });
return (<TextInput onChangeText={setValue} placeholder="Type here to translate!" />);
}
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}
/>);
}
}
constructor(props) {
super(props);
}
...
...
...
setValue = (val) => this.setState({ search: val })
render() {
return ( <TextInput style={{height: 40}}
placeholder="Type here to translate!"
onChangeText={this.setValue}
/>);
}
}
4. Do expensive Tasks Asynchronously
React Native app views and functions are written in JavaScript, JS is single threaded but highly demanding tasks like API calls should be done asynchronously to avoid blocking other activities, It's recommended to use promise or use async.5. Optimize Static Image Performance
When loading assets from the Javascript package, React Native requires the asset file from the package and then sends it across the bridge to the UI Layer to be rendered. Static images can be optimized by loading it from the app package via Xcode asset catalogs or in the Android drawable folder against the JavaScript package. When the asset is already within the app package, React can just tell the UI layer to render the specific image without having to require or transfer the image data across the bridge.Adding Static assets for iOS
To add your static asset images, simply click on your asset catalog in Xcode i.e project (Images.xcassets) and drag your asset files into it. Or once the asset catalog is open in Xcode, you can use the plus button in the lower left-hand corner to add assets.Adding Static assets for Android
Add your static asset images to the drawable folder of the android project (android/app/src/main/res/drawable). Keep this folder single level, anything placed in subdirectories android won't see. Make sure every file name starts with a letter or you will get an error when compiling the project.Usage in Javascript
You can now load the image in your JS code like below:
<Image source="{{uri:"my_image"}} />
Note: Without the extension.
6. Use Global State
Calls to setState can be very very expensive and your app performance can drop very fast, It's better to use libraries like Redux for managing states in your app, apart from making your app state sync with your views Redux state also update your props making your views render only when necessary. If you are writing a component where you only need the props an no state it better to use React.PureComponent.7. Don't Bind Methods inside Render
Binding action/ function inside render method is as dangerous as declaring function inside the render method.
<TextInput onChangeText={this.textChanged.bind(this)} />
or
<TextInput onChangeText={()=>this.textChanged()} />
Such functions get created each time your view get re-rendered, It's better done inside the constructor like so:
or
<TextInput onChangeText={()=>this.textChanged()} />
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}
/>);
}
}
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}
/>);
}
}
8. Use Immutable Attributes
When using React.PureComponent it only updates when props change, If you are using immutable it has an added advantage because object don't just change unless they need to, immutable data cannot be changed once created. Immutable Js provides many Persistent Immutable data structures including List, Stack, Map, OrderedMap, Set, OrderedSet, and Record. PureComponent only does shallow comparison which means it doesn't compare internal attributes of an object, Immutable attributes and PureComponents are the good matches when you only need to re-render views only when necessary.
Thanks!
Your feedback helps us improve tutorials.
Thanks
ReplyDelete