A Short Note – How to Improve the Performance of React Native App?

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series.

In this note series, we will understand about the pro tips to improve the performance of the React Native app. There are so many ways to do this but here we will discuss about few most preferred ways as below:

  • Use of shouldComponentUpdate method of react-native lifecycle
  • Use Pure Components of React
  • Use Memo from Hooks API
  • Build the module with native whenever it is possible
  • Remove the console logs before building the application
  • Reduce Application size
the pro tips to improve the performance of the React Native app


So Let’s begin.


1. Use of shouldComponentUpdate method of react-native lifecycle

Using shouldComponentUpdate method, we can reduce unnecessary re-rendering of components.

shouldComponentUpdate returns the boolean value and according to that components will re-render. For example, if it returns true then it will re-render and if it returns false then it will not re-render component.

So, on state update or on new props to the component this method will be called with two arguments called nextState and nextProps. So, you can compare the new props and state with the previous ones. And according to your business logic requirements, you can use the boolean to render the component again.


2. Use Pure Components of React

The pure component of React helps to render only the specific props that have been changed or the state has updated.

For example, if we are using a flatlist which is rendering 1000 rows. Now, on every rerender that 1000 data will be rendered again.

Using Flatlist in the pure component we can ensure that only the change on required props, components will re-render again.


3. Use Memo from Hooks API

React Hooks provide the lifecycle of components to functions.

Memo from react helps to do a shallow comparison on upcoming changes. So, it allows re-rendering functions only if the props get changed.


4. Build the module with the native driver whenever it is possible

Here, We are not talking about not using React Native. Sometimes, it happens that we have to use some features which can be done by the native more efficiently. At that time, we have to build that module in native one and can use the feature from the React Native by creating a bridge.


5. Remove the console logs before building the application

It has been identified that the console logs are taking some amount of time for logging purposes. So, it is good to use at the time of development but in the production build, it should be removed which will help to improve the performance of the app which you will realize while using it.


6. Reduce Application size

In React Native, you use external libraries and components form libraries so it impacts application size.

To reduce the size, you have to optimize the resources, use ProGaurd, create different app sizes for different device architectures, and make sure to compress the graphics elements, i.e. images.

The components on the JavaScript side use a bridge to communicate with the Native side. Reduce the load on the bridge and improve the app’s performance.


Conclusion

In this note series, We understood about the pro tips to improve the performance of the React Native app.

Thanks for reading ! I hope you enjoyed and learned about the React Native app Performance Improvement pro tips. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe us on this blog and and support us in any way possible. Also like and share the article with others for spread valuable knowledge.

If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.

Thanks again Reading. HAPPY READING !!😊😊😊

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s