[React Native] Some ways to improve application performance

The performance problem of React Native applications is a big one. Because if the lag, slow during use, users will definitely not want to touch our application for the second time. In this article, we will learn together some ways to improve the performance of app

Do not handle a time-consuming job in the constructor

If you do something too time-consuming in the constructor, the component class initialization will take a long time, so the render view will also slow down => of course our app will look jerky.

Note: Not only in the constructor, but we should not perform a task for too long in componentWillMount , we should put them in componentDidMount , when the view has been rendered.

Do not use functional props

We consider the following example

We can see that the above code may be very normal, but when each render of the MyComponent above, SomeComplexComponent will also be re-rendered, even though their props have not changed. The main reason is that there is an arrow function in onPress . Every time the render() of MyComponent is called, a new onPress reference will be created, which will cause SomeComplexComponent to be re-rendered. Obviously this is not necessary.

To avoid that, we will do the following

very simple, right

Use PureComponent or shouldComponentUpdate

When using PureComponent , when there are no changes to the state or props, the component will not be re-rendered.

If you want control over props and states, use shouldComponentUpdate

As in the example above, the component will be title, description, imageUrl when one of the 3 props title, description, imageUrl changes.

Note: You can only use one of the two methods above for the same component

Use Native Drive for Animations in the app

In react we have 2 types of animations:

1. JS based: we will do everything through the JS thread and only dispatch the last frame to the native.
2. Purely Native: we will give all animation information to the native, so the processing will be done directly via native => so it will definitely be smoother.

For example:

Some other notes

1. Let’s use Flatlist instead of ListView
2. Remove the console when released, you can use the transform-remove-console to automatically delete all logs, including the library log.
3. Only import type libraries when needed.
4. Sometimes we use native tools to see our app’s CPU, memory, Flow View, etc.

Thanks for reading my writing. Happy coding!