Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (How to Improve the Performance of React Native App?).
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 few most preferred ways as below:
- Use of shouldComponentUpdate method of react-native life cycle
- 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
So Let’s begin.
1. Use of shouldComponentUpdate method of react-native life cycle
Using shouldComponentUpdate method, we can reduce un-necessary 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, we can compare the new props and state with the previous ones. And according to our business logic requirements, we can use the boolean to render the component again.
2. 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 re-render, 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 life cycle 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, we have to use some features which can be done by the native more efficiently. We 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 we will realize while using it.
6. Reduce Application size
In React Native, we use external libraries and components form libraries so it impacts application size.
To reduce the size, we 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 to the blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
You can also follow official website and tutorials of React Native as below links :
If you have any comments, questions, or think I missed something, leave them below in the comment box.
Thanks again Reading. HAPPY READING !!???
