With its ability to work fully-fledged on both Android and IOS platform with a single codebase, React native is often considered as the best cross-platform for mobile app development as it has a great ecosystem of tools and libraries. Created by Facebook, the platform however is not without it short-comings and challenges. Developers are prone to rookie mistakes which can increase the time spent on development. In this article, we are going to look at React Native Challenges and Common Mistakes
Unoptimized images: – While the size of the unoptimized image may not be colossal, an app loading dozens of such images will experience a lag and slow performance. The correct image format and actual rendered size needed are to be kept in mind by the developers.
Speedy app loading and quick rendering time is crucial for user engagement and is often a challenging task for the developers in react native. When images are not optimized, they often show up misaligned in the display page where they are called. When there are hundreds of thousands of images, they definitely need to be optimized in order to enhance the scalability and performance. Images should always be delivered with caching headers.
Dependance on native app developers: – Due to Javascript based framework, react native developers sometimes have to work in conjunction with the native developers which can be very challenging. Heavy computational operations often are offloaded to the native part of the app and this is where expertise of the native developers come into play at times.
Working with Abstraction layer: – Abstraction layers are needed in order to get more functionalities however, they come with their own set of challenges in React Native such as high-dependence on third party services and libraries and getting hold of bugs in the abstraction layer is difficult.
Common challenges in React Native
Wrong Estimations: – Reusing the code has been the main advantage of react native. However, with the different layout of IOS and android, developers may not be able to decipher the accurate estimations for completing the project as there are no. of considerations such as different databases and backend points in both IOS and Android platform.
Avoiding Unit Testing: – Individual components of the app need to be tested in isolation so that errors and bugs can be patched in the earliest developmental stage only. If left unchecked, they creep up later which requires extensive human resources and therefore more time to launch the app. Unit testing may not appear of paramount importance at the beginning, it can prevent many costly challenges in react native later on.
As the codebase becomes bigger and more complex, it becomes increasingly important to opt for unit testing. It ensures a reliable engineering environment that prevents the lengthier time frame of app testing life cycle. Once all the individual components have undergone thorough testing, it allows for least probability for the emergence of errors in the full deployment of the service.
Unit testing is an important aspect of Agile development and helps the developers to identify the quality of the code before it is deployed for integration testing. Developers often avoid unit testing as it takes longer to build each unit however, the overall time, from code conception to app deployment is significantly shorter. React Native applications can be unit tested by a number of tools such as Webdriver, Nightmare, Jest, Mocha and Jasmine.
Ignoring set of codes in the external modules: – Developers often take the help of the external modules in order to speed up their development. Many times, the devs have not gone through the complete code and therefore can encounter unexpected errors during unit or app deployment. Codes in the external modules can interfere with the existing code and affect the functionality. This defies the purpose of using them in the first place.
No support for multiprocessing or parallel threading: – Due to a single Javascript thread, it is not possible to build apps in react native without slow performance. Multiple processes cannot occur at the same time until a component has completely rendered. Therefore, performance is generally below par if there is a need to perform multiple tasks together.
Choosing wrong redux store layout: – Redux often requires many lines of code in order to write functionality changes in the application. This is against the direct-mapping principle according to which small functional changes should call for small code changes. Also, Redux is a global store to store the data, therefore it provides no encapsulation. A prop can be visible to every component once it has been put inside the global store.
Getting used to the terminologies, and entities such as reducers, middlewares, thunk etc. is not easy and requires time and patience from the side of the developer. When the store is not set up properly, it can mess up the logic tests, debugging and data flow.
Left ‘console.org’: – When it comes to debugging the app, the statements in the console log often come in handy. However, deleting the log’s statement is essential as leaving it there often causes congestion, creating a bottleneck in the Javascript thread thereby making the app slow to respond.
Using stateless components: – Stateless components simply take the arguments and make testing easy, however, choosing pure components makes more sense as stateless components are not ideal for every scenario. On the other hand, a pure component performs a shallow compare and therefore requires lesser resources for rendering. Pure components also do not re-render upon the re-rendering of the parent component. Extra care has also to be given to set up the initial state properly in advance. Not doing so often results in poor performance of the app.
Conclusion
React native has been a boom for speedy, reliable and cost-effective cross-platform app development. However, it is not without its set of challenges and less-experienced developers often commit unintentional rookie mistakes. Glitches, project structure and external modules all can contribute to messy coding in react native if not paid attention.
