DEV Community

Cover image for React Native Code Review - A Checklist
Mariusz for Pagepro

Posted on • Originally published at pagepro.co

React Native Code Review - A Checklist

Did you ever want to do a code review of React Native app by yourself?

If yes, let me guide you through the whole process, step-by-step with our own checklist.

But if you are quite new to the subject of code review, let's start from the basics.

What is Code Review?

Code review is a form of deep and profound analysis of the existing codebase. It comes with a set of specific activities and checklist points that leads you step-by-step through the process of identifying and uncovering current and potential bugs and problems.

When Should I Do a React Native Code Review?

Different React Native Developers face different scenarios, but it doesn't matter if:

  • you just took over an app from a different developer, or
  • someone asked you to improve the existing app, or
  • you just built an app and want to make sure it’s flawless…

…you need to have a deep understanding of what’s inside and where the potential source of errors may be hidden.

And if you think about it, there may be many areas that code review will appear to be highly recommended, if not absolutely necessary.

Improve Performance

First of all, code review is extremely important if it comes to app performance.

While talking about React Native and the cross-platform applications in general, their performance and user-interface is considered sometimes as the biggest challenge.

The goal is to make the final experience native-like. Which means performance has to be outstanding.

And this is when the code review is a great idea, as it is able to uncover many flaws and areas of improvement.

Scale Easier

Planning your future app improvement demands a deep understanding of its architecture.

The analysis of a fundamental app functionalities will help you plan how actually you can improve it later on.

After Changes and Improvements

As you know it’s almost impossible to build and release an app without few changes here and there. React Native apps are no different.

Keeping a code review checklist on your sight makes it easier to keep your app in shape despite the changes you have made.

React Native Bug Fixing

Even if you went through and passed many different tests, it doesn’t really mean your app is totally ready to hit the market.

Unfortunately many bugs are becoming visible only after a bit heavier usage by the final users.

Deep analysis of your code is able to spot them, before they arrive.

Detect Platform-based Functionalities

While building React Native applications, you will probably have things working on one platform (f.e. iOS), but not working on the other (Android).

Code audit helps you detect those “platform-based” features and functionalities, and fix them at an early stage.

Before Final Release

React Native code review is also a great way (and quite obvious) for a “final checkup”.

Before the release you may want to check if all works fine, and if the code is following the latest development standards.

Reasons Summary

To sum it up, React Native code review may be helpful to:

  • Find areas of improvement for your app performance
  • Get a deep understanding of the app architecture to scale it easier
  • Identify and uncover existing and potential bugs and problems
  • Identify “platform-based” functionalities
  • Keep your app in shape despite constant changes
  • Prepare your app to be released with no flaws
  • Making sure your app is following the latest development standards

How To Do a React Native Code Review?

If you want to do your code review well, I suggest to start going with the following order:

  • Primary audit - in this stage you go through the app structure and the fundamental functionalities.
  • Automatic analysis - in this stage you push the code through the most popular automatic test engines to uncover the most frequent issues and common violations.
  • In-depth analysis - this is the manual part, where you extensively go through our list to uncover bugs, performance issues, potential future problems, security vulnerabilities, etc.

React Native Code Review Checklist

Enough theory.

Let’s get to work. Here’s your React Native app Health Checklist, step-by-step:

1. Versions

First, check if:

  • React Native version is up to date.
  • All dependencies are up to date.
  • Dependencies (that use RN linking) are not deprecated and supporting latest RN version.
  • Dependencies in package.json are meeting the industry standards.

2. Development

Then, check if:

  • App is ejected/use Expo.
  • App got own native modules written (no support from npm).

3. Code Quality:

After that, check if:

  • Tests are written.
  • There is a typing solution implemented (TypeScript / Prop Types / Flow).
  • Code follow best practices.
  • Eslint and/or prettier is added.
  • Codebase has consistent code style.
  • Code is easy to understand (self describing) so we can make changes without trying to understand logic for a week.
  • Check imports through files (unused imports).
  • Check most common usage native files and code quality in it (MainApplication etc).

4. Test Run

Finally, check if:

  • Development tasks are running.
  • Build is working for any platform (Android, iOS).
  • There are no problems with putting apps in stores.
  • There are any CI/CD processes implemented.

Summary

React Native Code Review may appear an important step in your app development process.

It helps you understand the app taken over from another developer, helps you uncover the potential problems and bugs, and finally, makes your app ready for the market.

If you do it well, you can save yourself tons of work, and will make your app working well for a long time.

Top comments (0)