Using JSDiff for Code Review

Code reviews often involve comparing JSON configurations, API contracts, or data structures. JSDiff makes it easy to see exactly what changed, helping reviewers provide better feedback and catch issues early.

Common Code Review Scenarios

1. Configuration File Changes

When reviewing changes to configuration files (package.json, tsconfig.json, etc.), JSDiff helps you quickly see what was added, removed, or modified.

Example: Compare package.json before and after dependency updates to ensure no breaking changes.

2. API Contract Changes

Review API contract changes by comparing the old and new API response schemas. This helps identify breaking changes or new features.

Example: Compare OpenAPI/Swagger JSON schemas to see what endpoints or fields changed.

3. Data Structure Modifications

When code changes affect data structures, compare sample JSON to understand the impact on existing data.

Example: Compare database migration JSON schemas to verify backward compatibility.

4. Test Data Comparison

Compare expected vs actual test results in JSON format to identify test failures or regressions.

Example: Compare test output JSON to identify what changed when a test fails.

How to Use JSDiff in Code Review

Step 1: Extract JSON from Code Changes

Copy the JSON content from the code changes you're reviewing. This could be from:

Configuration files (package.json, config.json, etc.)
API response examples in code comments
Test data or fixtures
Database schema definitions

Step 2: Compare with Previous Version

Use Git or your version control system to get the previous version of the JSON, then compare both versions in JSDiff.

Tip: You can use git show HEAD:path/to/file.json to get the previous version from Git.

Step 3: Review Differences

Analyze the highlighted differences:

Check if removed fields will break existing functionality
Verify that new fields are properly documented
Ensure data type changes are intentional and safe
Look for potential breaking changes

Step 4: Provide Feedback

Use the comparison results to provide specific, actionable feedback in your code review comments.

Integrating with Git Diff

While Git's built-in diff works well for code, JSDiff is better for JSON because it performs semantic comparison. Here's how to combine both:

Workflow:

Use Git diff to see which files changed
For JSON files, copy the old and new versions
Paste both into JSDiff for semantic comparison
Use the visual diff to understand the changes better

This approach gives you the best of both worlds: Git's file-level tracking and JSDiff's semantic JSON comparison.

Team Collaboration Tips

Share Comparison URLs: While JSDiff doesn't support URL sharing yet, you can copy the diff results and paste them in code review comments.
Document Changes: Use JSDiff results to create clear documentation of what changed in your pull request description.
Standardize Review Process: Establish a team practice of using JSDiff for JSON-related code reviews.
Mobile Reviews: Since JSDiff works on mobile, team members can review JSON changes on the go.

Real-World Example

Imagine you're reviewing a pull request that updates the API configuration:

Before (Old Configuration):

{
  "api": {
    "version": "v1",
    "timeout": 5000,
    "retries": 3
  }
}

After (New Configuration):

{
  "api": {
    "version": "v2",
    "timeout": 10000,
    "retries": 3,
    "cache": true
  }
}

JSDiff will highlight:

Version changed from "v1" to "v2" (potential breaking change!)
Timeout increased from 5000 to 10000
New "cache" field added

This visual comparison makes it immediately clear what changed, helping you ask the right questions in your code review.

Best Practices for Code Review

Always Use JSON Mode: Select "JSON" mode for semantic comparison that ignores property order.
Check for Breaking Changes: Pay special attention to removed fields or changed data types.
Verify Documentation: Ensure new fields or changes are properly documented.
Test Compatibility: Consider how changes affect existing code that uses the JSON.
Review Incrementally: For large JSON files, compare specific sections to focus your review.

Improve Your Code Reviews Today

Start using JSDiff in your code review process to catch issues faster and provide better feedback. Free, private, and works offline.

Try JSDiff Now →