Skip to content

Conversation

Copy link

Copilot AI commented Nov 20, 2025

Description

Array indices as React keys cause rendering issues when lists are reordered or modified. The DiffChange type includes an id field suitable for use as a stable key.

This PR updates the diff list components to use change.id as the React key instead of array indices, and replaces local Change interfaces with the proper DiffChange type from the domain layer for type safety.

Changes:

  • Use change.id as key prop in PopulatedDiffList.tsx
  • Replace local Change interface with DiffChange type in both PopulatedDiffList.tsx and DiffList.tsx
  • Adopt base branch code style (no semicolons, no React imports)
  • Merge latest refactoring changes from base branch

Before:

{changes.map((change, i) => (
  <DiffListItem
    key={i}
    path={change?.path}
    text={change?.text}
    ...
  />
))}

After:

{changes.map((change, i) => (
  <DiffListItem
    key={change.id}
    path={change?.path}
    text={change?.text}
    ...
  />
))}

Motivation and Context

Addresses code review feedback on PR #607: #607 (comment)

Using array indices as React keys is an anti-pattern that can cause rendering bugs when list items are reordered, added, or removed. The DiffChange schema already includes a unique id field that provides a stable key for each change item.

Screenshots (if appropriate):

N/A

Types of changes

  • Bug fix (non-breaking change which fixes an issue)
  • New feature (non-breaking change which adds functionality)
  • Breaking change (fix or feature that would cause existing functionality to not work as expected)

💬 We'd love your input! Share your thoughts on Copilot coding agent in our 2 minute survey.

Copilot AI self-assigned this Nov 20, 2025
Co-authored-by: ulrikandersen <11440456+ulrikandersen@users.noreply.github.com>
Copy link
Author

Copilot AI commented Nov 20, 2025

Just as a heads up, I was blocked by some firewall rules while working on your feedback. Expand below for details.

Copilot AI changed the title [WIP] WIP Apply feedback on diff sidebar enhancement Use change.id as React key instead of array index Nov 20, 2025
Copilot AI requested a review from ulrikandersen November 20, 2025 13:42
Copilot finished work on behalf of ulrikandersen November 20, 2025 13:42
@ulrikandersen ulrikandersen marked this pull request as ready for review November 20, 2025 15:03
@ulrikandersen
Copy link
Contributor

@copilot Resolve conflicts with base

Co-authored-by: ulrikandersen <11440456+ulrikandersen@users.noreply.github.com>
Copy link
Author

Copilot AI commented Nov 20, 2025

@copilot Resolve conflicts with base

Conflicts resolved in commit a76b31c. The changes now use change.id as the React key while adopting the base branch's code style (no semicolons).

# Conflicts:
#	src/features/sidebar/view/internal/diffbar/components/DiffList.tsx
#	src/features/sidebar/view/internal/diffbar/components/PopulatedDiffList.tsx
Copilot finished work on behalf of ulrikandersen November 20, 2025 15:15
@ulrikandersen ulrikandersen merged commit 850bd84 into openapi-diff Nov 20, 2025
6 of 10 checks passed
@ulrikandersen ulrikandersen deleted the copilot/sub-pr-607 branch November 20, 2025 15:27
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants