“Boost Up” Your React Native Apps
React Native has always been in limelight among mobile developers. And too often they compare it with look, feel and performance with native applications. So after a few months of playing around with React Native, I just came away with few points that would help you to boost up your app’s performance.
Make Reusable Components
Small independent reusable components always make your work a lot more easier for you. More Independent a component is, More it can be reused.
Reuse The CSS, Use StyleSheet
Separate CSS from the JS code and reuse the styling for your components. Making a stylesheet from a style object makes it possible to refer to it by ID instead of creating a new style object every time. Also, It makes your code look good.
Make sure to remove all the console.log statements from your code. Console statements affect your code performance.
Use a Linter
A linter can be annoying, but it’s not so bad if you get on board early. It prevents you from doing lots of stupid invalid stuff that doesn’t actually cause errors.
Avoid Inline Declarations
Most often we declare inline callback functions, objects, arrays etc. This leads to recreation of these entities in memory, again and again, actually seems to noticeably slow down the UI. Always create these entities separately and just use the reference wherever required.
Use Flex for designing your Application’s Layout. React Native’s support for flex-box means you can use the exact same layout code for Android, iOS and web, instead of learning three different engines.
Special Care For Android
Margins and Paddings on Text/TextInput elements more or less doesn’t work on android, so really try to avoid them! Also, You may find unexpected behaviour of some react native components on Android.
Encourage Logical Operators Instead Of Conditional Operators
Use of Logical Operators reduces a lot of time, and improves component’s performance and rendering drastically.
Use Objects Instead Of Arrays
Objects play a very key role for improving your application’s performance. Data stored in form of objects can be created/updated/deleted in one go. Avoid traversing Arrays for creation/updation/deletion of data.
Encourage Stateless Functional Components
Its good to use components that can have no internal state.
Avoid Unnecessary Re-renderings
Always look, How often your components re-render. Maintain your state responsibly. Lots of state updation may slow your application performance dramatically.
Redux, A state management layer that maintains the state of an entire application in a single immutable state tree with uni-directional data flow. Few benefits of Redux may include- Predictability of outcome, Maintainability, Organised Code, Ease of testing, etc.
Discourage Third Party Libraries
You really work so hard to make your code efficient and optimal, and third party libraries may ruin it. Not all the time, we see how things work under the hood.
That’s all it is!
Thanks for reading this article, please Share and 👏, if this article is helpful for you.