React Frontend Code Review- Checklist (Master Code Review)

codeReview.md

React Frontend Code Review- Checklist (Master 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.