In this tutorial you will find a code review checklist I created for a recent project that I worked on. A sign of a mature software company is consistency. Is the whole team reviewing the code in the same way? This code review checklist isn’t an exhaustive list, however, it will cover 90% of the things that you will likely care about. To level-up the coding standards in your team, make sure this list is passed before approving the PR 👍 ✓ 👌

Naming Conventions

  • Component’s names should be written using pascal case:
  • Non-components should be written using camel case:
  • Unit test files should use the same name as its corresponding file:
  • Attribute name should be camel case:
  • Inline styles should be camel case:
  • Variable names should be camel case. Variable names can contain number and special characters:
  • CSS files should be named the same as the component:

  • If a component requires multiple files (css, test) locate all files within component a folder

  • Use .jsx or .tsx extension a for React components

Bug Avoidance

  • Use optional chaining if things can be null

  • Use the guard pattern/prop types/typescript to ensure your passed in parameters are valid

  • Create PURE functions and avoid side-effects

  • Avoid mutating state when working with arrays

  • Remove all console.log()

  • Treat props as read-only. Do not try to modify them

Architecture & Clean Code

  • No DRY violations. Create utility files to avoid duplicate code

  • Follow the component/presentation pattern where appropriate. Components should follow the single responsibility principle

  • Use Higher Order Components where appropriate

  • Split code into respective files, JavaScript, test, and CSS

  • Create a index.js within each folder for exporting. This will reduce repeating names on the imports

  • Only include one React component per file

  • Favour functionless components

  • Do not use mixins

  • No unneeded comments

  • Methods that are longer than the screen should be refactored into smaller units

  • Commented out code should be deleted, not committed

ES6

  • Can you use spread operator be used instead?

  • Can you use destructuring be used instead?

  • Only use let or const

  • Favour arrow functions

  • Can the spread operator be used instead?

  • Can the optional chain operator be used instead of an explicit null check

  • Can nullish coalescing by used instead of a explicit null comparison

Testing

  • Write tests

  • Define a quality gate using coveralls

  • Don't test more than one thing in a test

  • No logic should exist within your test code

  • Test classes only test one class

  • Code that needs to talk to a network, or, database is mocked

CSS

  • Avoid Inline CSS

  • A naming convention is defined and followed (BEM, SUIT, etc..)

This concludes my recommended ReactJs code review checklist. Happy coding 🤘