Code Review Mastery Guide

The Golden Rules

Based on engineering practices from Google, Microsoft, and open source giants.

psychology

Be Constructive, Not Critical

Critique the code, not the person. Use "We" instead of "You". Frame feedback as questions ("What if we used...") rather than commands.

compress

Keep It Small

The best reviews happen on changes of 200-400 lines. Massive PRs lead to "LGTM" blindness and cognitive overload.

radio_button_unchecked

Automate The Boring Stuff

Don't waste human brainpower on whitespace or indentation. Use linters (Prettier, ESLint) and CI checks for style.

Two Sides of the Coin

Before you submit...

check_circle Self-Review First: Read your own diff. You'll catch 80% of silly mistakes before anyone else sees them.
description Write a Description: Explain why this change exists, not just what it does. Include screenshots for UI changes.
science Test It: Ensure local tests pass. Include instructions on how the reviewer can verify the fix.

Interactive Tool

Spot the Issues

Hover over the lines in the "Bad Code" to see reviewer comments. Then click "Fix It" to see the refactor.

process_users.js

BEFORE REVIEW
1functiongetData(users) {
                            
                                Naming: Function names should be descriptive. 'getData' is too vague. What data? From where?
                            
2let final = [];
                             
                                Style: Use const for arrays that aren't reassigned. Also, 'final' is a reserved word in some contexts/confusing.
                            
3for (var i = 0; i < users.length; i++) {
                            
                                Modern JS: Avoid var. Use let or better yet, array methods like .map() or .filter().
                            
4if (users[i].age > 18) {
                             
                                Magic Number: What is 18? Extract this to a named constant like MIN_ADULT_AGE.
                            
                            5
                                  final.push(users[i]);
                        
                            6
                                }
                        
                            7
                              }
                        
                            8
                              return final;
                        
                            9
                            }

Why the change?

The original code worked, but it was fragile and hard to read. Hover over the lines on the left to see the issues.

Code reviews aren't just about logic errors—they are about readability and maintainability.

Tone Check

"This loop is garbage. Why did you write it like this?"

The Art of Code Review