React Frontend Code Review- Checklist (Master Code Review)
Ritik Banger

Ritik Banger @ritikbanger

About: I am a Full Stack Javascript Engineer with robust problem-solving skills and proven experience in creating and designing web apps in a test driven environment and deploy them to cloud servers.

Location:
Jaipur, India
Joined:
May 8, 2022

React Frontend Code Review- Checklist (Master Code Review)

Publish Date: Jun 12 '22
40 2

Many authors write tons of paragraphs and explain the main content in between them, let me not create nuisance here and get directly to the point so that without wasting a second, you geeks out here can utilise this checklist and become a master in code review.

  • Keep the components small, If the size exceeds 200-300 lines then create child components.
  • JSX markup should be no more than 50 lines.
  • Every function should have comments over it describing what it do.
  • Code has no linter errors.
  • If there are any React warnings reported in console, please solve that for example, Provide a key prop with a unique value for each element in array.
  • Do not repeat your code (DRY).
  • Code is in sync with existing code patterns.
  • No unused props are being passed.
  • Naming conventions followed for variables, file names, translations.
  • Styles in components over a common styling file is preferred.
  • No hardcoded values, use constants values.
  • Group similar values under an enumeration (enum).
  • Proper interfaces should be there with proper names.
  • Extend interfaces and types wherever required.
  • Create service in frontend for API calls.
  • No console.logs.
  • Use Promises or Asyns/Await. Handle API rejections.
  • Use destructuring assignment for arrays and objects.
  • Removed unused packages from NPM.
  • Create custom hooks.
  • Use useCallback with useEffect for function calls with proper dependencies.
  • No infinite API callings inside loops.
  • Create helper function (common function) if function is repeated somewhere else too.
  • Consider generic functions and classes.
  • Exception handling and clean-up (dispose) resources.
  • Don’t use dangerouslySetInnerHtml
  • If new library is used for a feature, check for library size (if lightweight library present then check it out)
  • If there are any timers (setInterval) register in mounting phase, please unregister those in clean-up effects
  • alt for images, an HTML attribute for alternative text which is used for non-visual browsers.
  • Git Commits messages are small and understandable.

You can add more pointers in the discussion!

Comments 2 total

  • KevinZ
    KevinZAug 9, 2022

    Most of these points can be automated in CI though, like "Code has no linter errors.".

    Do we need to check them manually?

    • Ritik Banger
      Ritik BangerAug 9, 2022

      If you are using DevOps, many points can be automated. Some basic are linting, and jest tests.

Add comment