React Native Code Review - A Checklist

Tags: reactnative, webdev, codequality, mobileapp
Published: 2020-08-04 13:34:47

<p>Did you ever want to do a code review of <a href="https://pagepro.co/react-native-development.html">React Native app</a> by yourself? </p>
<p>If yes, let me guide you through the whole process, step-by-step with our own checklist.</p>
<p>But if you are quite new to the subject of code review, let's start from the basics.</p>
<h2><b>What is Code Review?</b></h2>
<p>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.</p>
<h2><b>When Should I Do a React Native Code Review?</b></h2>
<p>Different <a href="https://pagepro.co/" target="_blank" rel="noreferrer noopener">React Native Developers</a> face different scenarios, but it doesn't matter if:</p>
<ul><li>you just took over an app from a different developer, or</li><li>someone asked you to improve the existing app, or</li><li>you just built an app and want to make sure it’s flawless…</li></ul>
<p>…you need to have a deep understanding of what’s inside and where the potential source of errors may be hidden.</p>
<p>And if you think about it, there may be many areas that code review will appear to be highly recommended, if not absolutely necessary. </p>
<h3><b>Improve Performance</b></h3>
<p>First of all, code review is extremely important if it comes to app performance.</p>
<p>While talking about React Native and the cross-platform applications in general, their performance and user-interface is considered sometimes as the biggest challenge.</p>
<p>The goal is to make the final experience native-like. Which means performance has to be outstanding.</p>
<p>And this is when the code review is a great idea, as it is able to uncover many flaws and areas of improvement.</p>
<h3><b>Scale Easier</b></h3>
<p>Planning your future app improvement demands a deep understanding of its architecture.</p>
<p>The analysis of a fundamental app functionalities will help you plan how actually you can improve it later on.</p>
<h3><b>After Changes and Improvements</b></h3>
<p>As you know it’s almost impossible to build and release an app without few changes here and there. <a href="https://reactnative.dev/" target="_blank" rel="noreferrer noopener nofollow">React Native</a> apps are no different.</p>
<p>Keeping a code review checklist on your sight makes it easier to keep your app in shape despite the changes you have made.</p>
<h3><b>React Native Bug Fixing</b></h3>
<p>Even if you went through and passed many different tests, it doesn’t really mean your app is totally ready to hit the market.</p>
<p>Unfortunately many bugs are becoming visible only after a bit heavier usage by the final users.</p>
<p>Deep analysis of your code is able to spot them, before they arrive.</p>
<h3><b>Detect Platform-based Functionalities</b></h3>
<p>While building React Native applications, you will probably have things working on one platform (f.e. iOS), but not working on the other (Android).</p>
<p>Code audit helps you detect those “platform-based” features and functionalities, and fix them at an early stage.</p>
<h3><b>Before Final Release</b></h3>
<p>React Native code review is also a great way (and quite obvious) for a “final checkup”.</p>
<p>Before the release you may want to check if all works fine, and if the code is following the latest development standards.</p>
<h2><b>Reasons Summary</b></h2>
<p>To sum it up, React Native code review may be helpful to:</p>
<ul><li>Find areas of improvement for your app performance</li><li>Get a deep understanding of the app architecture to scale it easier</li><li>Identify and uncover existing and potential bugs and problems</li><li>Identify “platform-based” functionalities</li><li>Keep your app in shape despite constant changes</li><li>Prepare your app to be released with no flaws</li><li>Making sure your app is following the latest development standards</li></ul>
<h2><b>How To Do a React Native Code Review?</b></h2>
<p>If you want to do your code review well, I suggest to start going with the following order:</p>
<ul><li><strong><span class="has-inline-color has-vivid-red-color">Primary audit</span></strong> - in this stage you go through the app structure and the fundamental functionalities.</li><li><strong><span class="has-inline-color has-vivid-red-color">Automatic analysis</span></strong> - in this stage you push the code through the most popular automatic test engines to uncover the most frequent issues and common violations.</li><li><strong><span class="has-inline-color has-vivid-red-color">In-depth analysis</span></strong> - this is the manual part, where you extensively go through our list to uncover bugs, performance issues, potential future problems, security vulnerabilities, etc.</li></ul>
<h2><b>React Native Code Review Checklist</b></h2>
<p>Enough theory.</p>
<p>Let’s get to work. Here’s your React Native app Health Checklist, step-by-step:</p>
<h3><b>1. Versions</b></h3>
<p>First, check if:</p>
<ul><li>React Native version is up to date.</li><li>All dependencies are up to date.</li><li>Dependencies (that use RN linking) are not deprecated and supporting latest RN version.</li><li>Dependencies in package.json are meeting the industry standards.</li></ul>
<h3><b>2. Development</b></h3>
<p>Then, check if:</p>
<ul><li>App is ejected/use Expo.</li><li>App got own native modules written (no support from npm).</li></ul>
<h3><b>3. Code Quality:</b></h3>
<p>After that, check if:</p>
<ul><li>Tests are written.</li><li>There is a typing solution implemented (TypeScript / Prop Types / Flow).</li><li>Code follow best practices.</li><li>Eslint and/or prettier is added.</li><li>Codebase has consistent code style.</li><li>Code is easy to understand (self describing) so we can make changes without trying to understand logic for a week.</li><li>Check imports through files (unused imports).</li><li>Check most common usage native files and code quality in it (MainApplication etc).</li></ul>
<h3><b>4. Test Run</b></h3>
<p>Finally, check if:</p>
<ul><li>Development tasks are running.</li><li>Build is working for any platform (Android, iOS).</li><li>There are no problems with putting apps in stores.</li><li>There are any CI/CD processes implemented.</li></ul>
<h2><b>Summary</b></h2>
<p>React Native Code Review may appear an important step in your app development process.</p>
<p>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.</p>
<p>If you do it well, you can save yourself tons of work, and will make your app working well for a long time.</p>