React Frontend Code Review- Checklist (Master Code Review)

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

[KevinZ]

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]

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