React Native Performance Improvement

1. Reduce Redundant Re-Render

1.1 Use PureComponent / React.memo()

• React.PureComponent is a more performant version of Component, it handles the shouldComponentUpdate method for you. It always does a shallow comparison of values, so use React.memo or PureComponent only when the data can be flattened.

• ImmutableJS combined with PureComponent can greatly reduce the number of applications of re-render, which can greatly improve performance.ImmutableJS returns a new Object each time the data is modified.

• Class components can bail out from rendering when their input props are the same using PureComponent or shouldComponentUpdate. Now you can do the same with function components by wrapping them in React.memo.

const MyComponent = React.memo(function MyComponent(props) {
         /* only re-renders if props change */ 
});

1.2 Use shouldComponentUpdate

• when the data can not be flattened, React.PureComponent and React.memo will be ineffective. Because once you use it, you won't be able to duplicate the method shouldComponentUpdate to avoid unnecessary rendering. So if we have a complex data structure like Arrays and Objects, we should handles the shouldComponentUpdate to Improve performance.

2. Modularization

• With use redux, through Modularization to reduce the effects of unrelated props to reduce the number of unnecessary re-render.

• When using Modularization, pay attention to a problem, the constant value that the component needs to calculate, do not write in its own render, avoid to calculate every time.

• Through Granulation( Modularization ) to improve the reusability of the component, try to make the necessary part of the component re-render, reduce the re-render of the entire component.Ï

3. requestAnimationFrame / InteractionManager.runAfterInteractions

• requestAnimationFrame causes the code to execute immediately on the next frame，increase response speed.

• Sometimes，some seemingly bug problems can be solved by requestAnimationFrame .For example:

scrollToEnd can be problematic without requestAnimationFrame.

componentDidUpdate(prevProps , prevState) {  
// this._scrollViewRef && this._scrollViewRef.scrollToEnd({ animated: false }); 
  requestAnimationFrame(() => this._scrollViewRef && this._scrollViewRef.scrollToEnd({ animated: false }));   
} }

• Schedule some of the longer tasks until all the InteractionManager.runAfterInteractions or animations are complete. This can ensure the smooth running of JavaScript animation.

4. The optimization of FlatList / Partial Loading LargeList

• When the list is very large, you can load the data in batches, such as first loading a small portion and then loading the rest, or loading N pieces at a time.

• However, there is no mature solution for react native when the amount of data is really huge, so I will try more methods.

• https://github.com/filipemerker/flatlist-performance-tips

5. Data flattening

• Try to flatten the data.When modifying data, consolidate only the props or states that are needed, not the extra calculations and merges.For example, in FlatList, do not set the key property on the item component because FlatList provides the keyExtractor property.

• Data flattening at the same time, also want to let action flatten. For example, when a page has multiple actions, each of which corresponds to a different action and state, it is necessary to avoid writing these actions in one action, which will generate unnecessary calculation. What we need to do is to try to make each action correspond to one action.

6. Use attributes key wisely

• In the List of components, including map method generated and List, try not to use index as the key of the component unless the List is unchanged.

• Improper use of key will cause a component to be re-rendered or re-generated, increasing rendering time.

• Where you need to use the key attribute:

① In an array of components generated by method of map or other operation, each item component sets the key attribute. This is beneficial for RN to identify subcomponents and improve the reusability of components.

② When you need a component rebuild. For example, for a large list of search function, to make the list after each search to scroll to the top, similar scrollToTop method experience is not good, so we can give our FlatList set a key properties, such as the state of searchText as the key, so the content changes of each search, FlatList will be regenerated, and regenerate the data, the default is at the top.

7. Other ways

• To simplify the layout . Minimize nesting of layouts.

• Delayed loading layout. When the layout does not need to be displayed immediately, a delayed load can be adopted to reduce the first rendering time and improve the speed of page display.

• For layouts that require frequent switching, preload and then change width and height to switch between show and hide to avoid frequent component destruction and reconstruction. If this approach is adopted, the above lazy loading method can be combined to improve the rendering speed of the first screen components. In addition, LayoutAnimation can improve the speed of component switching by setting short animations for component width and height changes. Of course, the above approach depends on demand.

• When changing the height of a component to control the display and hiding of the component, you can speed up the display and hiding of the component by adding a short animation to the component.

• Merge state. When an event causes multiple states of a component to change, the component should be exposed to all state changes at the same time, rendering is completed at one time, so as to avoid multiple rendering caused by multiple new states.

• Try not to use anonymous functions, which are regenerated every time they are re-rendered. For example:

// The wrong way to write it
<Button onPress={() => {}}/>

// The correct way to write it
<Button onPress={this.onChange}/>
onChange =()=>{}

• Release resources in time, such as listener ,timer, etc. Otherwise, a memory leak may result.

• Avoid using throttle. If you do, remember to release throttle.

//In some places
this._throttle = throttle(this.func ,100);

//release throttle When the interface is destroyed
componentWillUnmount = () => {
    this._throttle.cancel();
}

• Disable the console. In general, we will configure to disable console in our index.js entry file, In particular, don't forget the assert method, which can cause your app to crash, as shown below：

if (!global.__DEV__) {
  global.console = {
    info: () => {},
    log: () => {},
    warn: () => {},
    debug: () => {},
    error: () => {},
    //Don't forget. It may appear in third-party plugins.
    assert: () => {},
  };
} 

8. Redux Improvement

9. Routing / Navigation

• React Navigations

• React Native Navigations