8 best practices to follow while developing React Native apps

React Native has been in the market for around 5 years and it is estimated that around 10% of the apps on Play Store as well as App store is developed on React Native. React Native comes in 2 two flavours – An Expokit based app development & A traditional React Native application development.

As far as Development is concerned, Components are considered as the building blocks of a React Native Application. And the continuous upgrades provided by React Native such as Hooks makes it possible to develop a more secure and stable application. Below are some of the most important & basic practices which should be followed by a developer in order to develop a much stable application.

1. Break Down the Components

As we know that Components are the building blocks of a React Native Application, It’s a good idea to break it down primarily into two parts

1. Presentation Component
It depicts how the application looks like to an end user
2. Container Component
It contains the logic behind the presentation component that defines how the view responds to user interaction

2. Assign key to each component of a list

In React, unique keys help identify which items have changed, are added, or are removed. The best way to choose a key is to use a string that identifies a list item among its siblings uniquely. We recommend using IDs from your list item as keys.

3. Separate the Styles

While Developing React Native Applications, We should always consider separating the styles from our main code so that concerns are separated. It not only makes the code look clear & crisp but also provides a helping hand to the reviewer while doing code review.

4. Proper Code Commenting

A proper code commenting method has to be followed so that the comment depicts clearly about the functionality of the specific piece of code without understanding the code. Apart from that one should put a comment only when it is required most to help the cause of making the code cluster free and avoid potential conflict between the code and the comment.

5. Proper Naming Conventions

A proper naming convention has to be followed while defining any class, functions or variables as per the instruction defined in javascript. Improper ways of defining the name to class, function & variable could lead to confusion.

6. Writing test for all code

In any programming language, adequate testing ensures that any new code added to your project integrates well with existing code and does not break existing functionality. It is a good idea to write tests for any new component that you create. As a good practice, we should create a __Test__ directory within our component’s directory to house all relevant tests.

7. Avoid duplicate code (DRY)

A common rule for all coding languages is to keep the code brief and concise & one of the ways to keep it is to avoid the duplication of the code or simply Don’t Repeat Yourself(DRY). You can achieve this by scrutinizing the code for patterns and similarities. If you find any, it’s possible you’re repeating code and there’s scope to eliminate duplication. Most likely, a bit of rewriting can make it more concise.

8. Error & Log Handling

That’s a very important one. Nowadays, both React and external tooling such as Firebase crashlytics, Trackflow.ai etc. have evolved a lot. That being said, we can now handle and also log our app data & errors so that we don’t have to suffer when a critical error occurs.

The best part of developing a react native application is the understanding of the fact that It helps you to develop & build the most complex UI in a much easier and well defined way for both iOS and android with the single code base. With a large Community, It is very much clear that when it comes to Hybrid Application development terms, the craze of React Native is going to stay for many more years.