Simple ways to speed up your react native app

This this tutorial we are going to discuss simple ways to speed up react or react native application. Hope this method helps to improve the performance of your react and react native application. Lets see the below simple guide to tweak performance of react and react native application.

1. Use PureComponent or shouldComponentUpdate

• PureComponent in react do a shallow comparison of props and state before updating the component. It re-renders only if there is shallow change in props or state.
• shouldComponentUpdate life-cycle method is used in regular non pure React Component to cancel the re-render by returning false in certain scenarios.

Lets see the example for PureComponent and shouldComponentUpdate react life-cycle hook :

PureComponent :

class MyComponent extends React.PureComponent {
  //
}

shouldComponentUpdate :

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

This example helps to protect react component from re-render unnecessarily. Lets check another example which maintain state in component and stop re-rendering if the state doesn’t change

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

2. Use key attribute on list items

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>
    });
  }
}

3. Bind early and don’t create functions inside render.

Most of the time you need to bind the component inside the constructor block of your component and this is not a only way in react we can bind the function in different ways.

Best ways : 

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>
  }
  
}

Bad ways :

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

OR

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

4. Don’t update state or dispatch actions in componentWillUpdate

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

5. Use VirtualizedList, FlatList and SectionList for large data sets.

As per react native docs, VirtualizedList, FlatList and SectionList are performant interface for rendering lists, since they use lesser memory footprint. So if you have a list with hundreds of rows, not all of them are loaded on to the screen until you scroll down.
VirtualizedList is the base for both FlatList and SectionList. And if you have immutable data set, you should use VirtualizedList directly.

These are the simple ways to speed up react or react native. Thank you for reading this article, and if you have any problem, have a another better useful solution about this article, please write message in the comment section.