6 Simple ways to speed up your react native app.

October 13, 2017 0 Comments

6 Simple ways to speed up your react native app.

 

 

In my previous article I have talked about hacking event loop for improving performance of your app. Your goal is to retain 60 FPS throughout. All of that applies to react or react native app as well. So if you haven’t read it yet, maybe its the right time to do so.

Here are few things you can do if you are using react or react native, to maintain higher FPS.

PureComponent in react don’t have state, they just render your component based on the data passed via props. It re-renders only if props change. 
shouldComponentUpdate life-cycle method is used in regular non pure React Component to cancel the re-render by returning false in certain scenarios.

Following two code samples do the same thing.

class MyComponent extends React.PureComponent {
//
}
class MyComponent extends React.Component {
//
shouldComponentUpdate(nextProps, nextState) {
if(this.props.firstProp = nextProps. firstProp &&
this.props.secondProp
= nextProps.secondProp) {
return false;
}
return true
}
//
}

Both of the above examples can help you save some wasted renders. First example implements the shouldComponentUpdate logic for you already. The second example gives you a bit more control. You can maintain state in component and stop re-rendering if the state doesn’t change. Like this

class MyComponent extends React.Component {
shouldComponentUpdate(nextProps, nextState) {
if(this.state.isLoading === nextState. isLoading) {
return false;
}
return true
}
}

List is the most commonly used thing in any application. If you don’t specify unique key for every list item, react will re-render every item when any item is added or removed from the list. Having a unique key on every list item, saves react re-rendering it again.

class MyComponent extends React.PureComponent {
render() {
return this.props.data.map((item, i) => {
return <Text key={item.id}>{item.title}</Text>
});
}
}

Do this

class MyComponent extends React.PureComponent {

constructor(props) {
super(props);
this.doWork = this.doWork.bind(this);
}
  doWork() {
// doing some work here.
// this.props.dispatch....
}

render() {
return <Text onPress={this.doWork}>Do Some Work</Text>
}

}

Don’t do this inside render.

<Text onPress={ () => this.doWork() }>Do Some Work</Text>

or

<Text onPress={ this.doWork.bind(this) }>Do Some Work</Text>

Because render is called very often and every time you do any of the two things above, a new function is created.

componentWillUpdate lifecycle method is used to prepare for an update, not trigger another one. If you want to set state or dispatch any redux actions, do them in componentWillReceiveProps instead.

As per react native docs, FlatList has to be faster since it uses lesser memory footprint. But in my case I found it otherwise. It feels like FlatList isn’t production ready yet. As soon as I switched from FlatList to ListView in my app, performance improved drastically. I also found these open bugs on github

https://github.com/facebook/react-native/issues/13649

https://github.com/facebook/react-native/issues/13413

https://github.com/facebook/react-native/issues/12884

So its not just me, I think you should give both a try before settling down on any of these. And in the mean time keep an eye on FlatList updates by react native team.

Open up developer tools and enable perf monitor. Now when you start interacting, navigating or scrolling your app, you might see FPS drops sometimes. And mostly its on JS thread and not on the native UI thread. So start looking for the pain points, where FPS is dropping. You might be setting state or dispatching redux actions at wrong place. Or doing too much synchronous work on the JS thread.

Will share more advanced techniques in my next article about react native. You may follow me to get updates when new stories are published :)
If you want add anything, please post it in comments section.


Tag cloud