blog.jakoblind.no

Checklist for reviewing your own React code

Would you like an expert to review your React app to give you feedback and suggestions for improvement?

Reviewing a whole application, even if it’s small, is time-consuming. Highly skilled React professionals are busy people with limited time to do extensive code reviews and provide feedback. Especially for free.

That’s why I created this checklist.

Go through this checklist step by step, to get constructive feedback on your project.  Find the areas where your app is lacking and then work actively to fill in the gaps.

Checklist

Overview

  • Does the project have a Readme file with instructions how to run locally and other useful info?
  • Does the code run without errors?
  • Does the application work as intended?
  • Does it look good on mobile?
  • Does the codebase use eslint? If not, why?
  • Make sure no dist files, editor/IDE files, etc are checked in. There should be a .gitignore for that.

Test

  • Are there unit tests for crucial parts of the codebase?
  • Remove any unnecessary tests. For example:
    • Tests that test React framework (or other frameworks).
    • Tests that test static data.

Naming

  • Do filenames have consistent casing and extension?
  • Do variables/functions/modules have consistent casing?
  • Do variables/functions/modules have descriptive names?

Code

  • Look for blocks of code with more than a few lines of code that look similar. Is it possible to refactor to reduce duplication?
  • Simplify “too smart” and over-engineered code.
  • Remove unused/unreachable code.
  • Remove commented out code.
  • Remove console.logs (unless you have strong motivation why you need it).
  • Remove unnecessary comments: comments that describe the how.
  • Add necessary comments where needed. Necessary comments are comments that describe the why.

ES6

  • Can you use spread operator?
  • Can you use destructuring?
  • Change all var to let or const (prefer const)
  • Be consistent in your usage of arrow function
  • Are you using lodash, ES6 or old fashioned Javascript for data transformations? Be consistent.

React

  • Minimize logic in the render method. Logic should be in helper methods, container components or in Redux actions (if used)
  • Move all code with side effects (for example Ajax calls) out from the render methods
  • Check if you can split up React components to reduce duplication. React components should be small and follow single responsibility principle
  • If using ES6, are you doing destructuring of props?
  • Use functional components for components that don’t use state
  • Don’t use mixins, prefer HOC and composition
  • Make sure you don’t edit props within a component (they are read-only)

Redux

That’s it!

Use this checklist on your project today. Print out a copy and put it on your wall for your future code reviewing needs.

Follow me on Twitter to get real-time updates with tips, insights, and things I build in the frontend ecosystem.

tags: