General

• Look for blocks of code with more than a few lines of code that look similar. Is it possible to refactor to reduce duplication? (DRY)
• Remove unused/unreachable code.
• Remove commented out code.
• Remove console.logs (unless you have strong motivation why you need it).
• Constant values should be replaced with const variables with meaningful names

JavaScript

• Use const over let (avoid var).
• Handle JS exceptions (JSON parsing,...) and errors
• Handle promise rejections and api errors properly
• Does a function take too many parameters? If there are more than 4 (or some number set by our team), use an object to avoid the hassle of parameter ordering and null values.
• Are values and data cached? Any string, object, etc., should be cached if it is used more than once. (example, memo() in React) Refer this for detail
• Are variable and function names so short that they are not meaningful at a glance? Longer names (be reasonable, of course) are more likely to be meaningful and self-documenting. Furthermore, searching globally for a longer name will return fewer results, which makes code-digging easier.
• Avoid using nested if/else statements

React

• Please try keeping components small (single responsibility)
• While adding any function, object as dependency to useEffect hook, check if it is stable (to avoid infinite render loops)
• Avoid state updates in loop
• If new library is used for a feature, check for library size (if lightweight library present then check it out)
• If any event listeners are registered in mounting phase, please unregister those in cleanup effects
• If there are any timers (setTimeout, setInterval) register in mounting phase, please unregister those in cleanup effects
• Does component handle empty, default, error and max out states ?
• 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.

Compatibility

• Check how component/page works under different network conditions
  • Slow and Fast 3G
  • No Network (Offline)
• Check how component/page looks in different browsers (Desktop and mobile)
  • Chrome (must) and incognito (if applicable in your case) Firefox, Safari
• If using experimental browser feature, check if it supports chrome, firefox, safari for example, Intersection Observer

References

https://github.com/mgreiler/all-about-code-review
https://gist.github.com/bigsergey/aef64f68c22b3107ccbc439025ebba12
https://tech.ebayinc.com/engineering/effective-front-end-code-review/

Thanks guys for reading, let me know in comment section what process/points you guys follow for great Frontend Code reviews. If you like this content please like, share and comment.