A Brief Guide To Conducting React JS Code Reviews

Sshekhar Jha
April 25, 2022

One of the most important steps before launching an app is to test it for any stop-gaps. It can be a time-consuming process since each element of the app has to be thoroughly perused. To help you save a bit of time, we’ve compiled a short checklist of things you need to go through while reviewing your React JS code.

But what could be a few possible reasons for conducting a React JS code review? Here are a few:

  1. Bringing the other developers up to speed on any changes made in the project.
  2. Sharing some best practices or know-how with your team.
  3. Provide a bit of on the job training to less experienced developers.
  4. Try and figure out alternate solutions.
  5. Zero in on any existing or possible future issues.

To go with the reasons for conducting a React review, there are some mandatory pre-launch checks that you have to conduct on seemingly inconspicuous elements before every app launch. Things such as:

  • Overview 
  • Testing
  • Naming

Let’s have a brief look at what each individual test entails to ensure that you don’t miss out on a crucial review.

Overview

  1. Is the code error-free?
  2. Does the project consist of a Readme file filled with instructions on how to run locally, along with other ancillary information?
  3. Is the app working as planned?
  4. Does the app look good on mobile devices?
  5. Is the codebase using eslint? If not, then why so?
  6. Ensuring that no dist files and editor/IDE files are checked in. There should be a .gitignore extension in place instead.

Tests

  1. Are there individual tests for crucial parts of the codebase?
  2. Make sure that you don’t conduct any unnecessary tests. For, eg. Avoid running tests on the Static Data and the framework.

Naming

  1. Do all file names have consistent casings and extensions?
  2. Do all the variables/functions/modules have consistent casings?
  3. Do all the variables/functions/modules have descriptive names?

Even though the above tests are important, the most important test is still testing your React JS code. Below are a few things that you must go through before finalizing the overall framework and giving your app the green light:

  1. Weed out any line of code with side effects from the final render.
  2. To reduce the risk of duplication, see if the code can be split up. Typically, React JS components should be small and based on the Single Responsibility Principle.
  3. Check if your props are de-structured, in case you’re using CS6.
  4. Try to use functional components for the components that don’t use State.
  5. Avoid mix-ins. Preferably use HOCs and compositions.
  6. Be sure that you don’t edit the props within a component, since they are ready only.
  7. In the render method, scale back on logic. Logic is better suited for components, helper methods, or redux actions (if you use them)

Conducting late-stage pre-launch checks can be daunting and exhausting in the best of circumstances. With launch deadlines and product specs mandates to take care of, testing can really be a hectic activity. On the flip side, it also allows you to go through everything you’ve done in the process of making your app, and avoid post-launch hiccups.

Even if you don’t solve all problems, you can always roll out consistent incremental updates or run community-driven beta tests to get direct feedback from the users on where they feel the app is letting up, and then work to fix the problem. Almost every major tech company does that today, so it may not be a bad option to explore.

Related blogs

Start building things faster, better.

Talk to us