Skip to content

Conversation

@wo-o29
Copy link
Contributor

@wo-o29 wo-o29 commented Sep 15, 2025

Overview

This PR improves the Separated component by changing the React key used in the mapped children from the array index to the child element’s own key.

Using array indices as keys in React lists is considered an anti-pattern because it can cause issues with component state, performance, and rendering consistency during updates such as insertion, deletion, or reordering.

By leveraging the unique key property provided by React elements via Children.toArray(), this change enhances rendering stability and avoids unnecessary re-renders or UI glitches.

This results in more predictable behavior, better performance, and easier maintenance for components using Separated.

Before After
스크린샷 2025-09-15 오후 8 51 51 스크린샷 2025-09-15 오후 8 51 39
  • example code
<Separated by={<span>|</span>}>
  {["hello", "react", "world"].map((item) => (
    <div key={item}>{item}</div>
  ))}
</Separated>

Checklist

  • Written new or updated existing test cases if necessary
  • Run yarn run fix to format and lint the code and docs
  • Run yarn run test:coverage to confirm coverage completeness
  • Updated JSDoc comments or documentation where applicable

Copilot AI review requested due to automatic review settings September 15, 2025 12:00
@wo-o29 wo-o29 requested a review from choi2021 as a code owner September 15, 2025 12:00
Copy link

Copilot AI left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Pull Request Overview

This PR refactors the Separated component to improve React key usage by replacing array indices with child element keys for better rendering stability and performance.

  • Changes the React key from array index to child.key in the mapped children
  • Improves rendering consistency during updates like insertion, deletion, or reordering
  • Follows React best practices by avoiding array index keys

Tip: Customize your code reviews with copilot-instructions.md. Create the file or learn how to get started.

@codecov-commenter
Copy link

codecov-commenter commented Sep 15, 2025

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 100.00%. Comparing base (5bdb4ff) to head (e903eea).
⚠️ Report is 6 commits behind head on main.

Additional details and impacted files

Impacted file tree graph

@@            Coverage Diff            @@
##              main      #278   +/-   ##
=========================================
  Coverage   100.00%   100.00%           
=========================================
  Files           37        37           
  Lines         1093      1093           
  Branches       324       324           
=========================================
  Hits          1093      1093           
🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

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