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.
Top comments (0)