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 cod…


This content originally appeared on DEV Community and was authored by Ritik Banger

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!


This content originally appeared on DEV Community and was authored by Ritik Banger


Print Share Comment Cite Upload Translate Updates
APA

Ritik Banger | Sciencx (2022-06-12T17:23:39+00:00) React Frontend Code Review- Checklist (Master Code Review). Retrieved from https://www.scien.cx/2022/06/12/react-frontend-code-review-checklist-master-code-review/

MLA
" » React Frontend Code Review- Checklist (Master Code Review)." Ritik Banger | Sciencx - Sunday June 12, 2022, https://www.scien.cx/2022/06/12/react-frontend-code-review-checklist-master-code-review/
HARVARD
Ritik Banger | Sciencx Sunday June 12, 2022 » React Frontend Code Review- Checklist (Master Code Review)., viewed ,<https://www.scien.cx/2022/06/12/react-frontend-code-review-checklist-master-code-review/>
VANCOUVER
Ritik Banger | Sciencx - » React Frontend Code Review- Checklist (Master Code Review). [Internet]. [Accessed ]. Available from: https://www.scien.cx/2022/06/12/react-frontend-code-review-checklist-master-code-review/
CHICAGO
" » React Frontend Code Review- Checklist (Master Code Review)." Ritik Banger | Sciencx - Accessed . https://www.scien.cx/2022/06/12/react-frontend-code-review-checklist-master-code-review/
IEEE
" » React Frontend Code Review- Checklist (Master Code Review)." Ritik Banger | Sciencx [Online]. Available: https://www.scien.cx/2022/06/12/react-frontend-code-review-checklist-master-code-review/. [Accessed: ]
rf:citation
» React Frontend Code Review- Checklist (Master Code Review) | Ritik Banger | Sciencx | https://www.scien.cx/2022/06/12/react-frontend-code-review-checklist-master-code-review/ |

Please log in to upload a file.



There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts