- 필수 기능
- 시작하기
- Glossary
- 표준 속성
- Guides
- Agent
- 통합
- 개방형텔레메트리
- 개발자
- Administrator's Guide
- API
- Datadog Mobile App
- CoScreen
- Cloudcraft
- 앱 내
- 서비스 관리
- 인프라스트럭처
- 애플리케이션 성능
- APM
- Continuous Profiler
- 스팬 시각화
- 데이터 스트림 모니터링
- 데이터 작업 모니터링
- 디지털 경험
- 소프트웨어 제공
- 보안
- AI Observability
- 로그 관리
- 관리
",t};e.buildCustomizationMenuUi=t;function n(e){let t='
",t}function s(e){let n=e.filter.currentValue||e.filter.defaultValue,t='${e.filter.label}
`,e.filter.options.forEach(s=>{let o=s.id===n;t+=``}),t+="${e.filter.label}
`,t+=`ID: tsx-react/tsx-no-duplicate-key
Language: TypeScript
Severity: Error
Category: Error Prone
This rule identifies issues where JSX elements are assigned duplicate key
properties. In React and similar JSX-based frameworks, the key
prop is essential for efficiently identifying and managing list items during updates. Using identical keys for multiple elements can lead to unpredictable UI behavior, rendering glitches, and performance degradation. This includes cases where elements in a static array literal have the same key, or when elements generated in dynamic loops (like map
or Array.from
) are assigned a constant key
value, resulting in all generated items having the identical key.
To remediate this, ensure that every JSX element within a list or iteration block has a key
prop whose value is unique among its immediate siblings. For static lists, each element should have a distinct, hardcoded key. When rendering dynamic lists (e.g., using map
), use a stable and unique identifier from the data item itself (e.g., item.id
or item.uuid
). Avoid using static or constant values as keys within loops, as this defeats the purpose of keys. While array indices (index
) can be used as a last resort, they are only appropriate if the list’s items are truly static and their order will never change, as reordering or filtering can lead to unexpected behavior.
[<Hello key="one" />, <Hello key="one">foo</Hello>, <Hello key="one" />];
[<Hello key={"foo"} />, <Hello key={`foo`}>foo</Hello>];
[<Hello key={a} />, <Hello key={a} />];
data.map(x => <Hello key="a" />);
data.map(x => <Hello key={1}>{x}</Hello>);
data.map(x => <Hello key={"1" + "2"}>{x}</Hello>);
data.map(x => { return <Hello key={true}>{x}</Hello>});
data.map(function(x) { return <Hello key={[]}>{x}</Hello>});
Array.from([1, 2, 3], (x) => <Hello key={{}}>{x}</Hello>);
[<Hello key="first" />, <Hello key="second">foo</Hello>, <Hello key="thrid" />];
data.map(x => { return <Hello key={`prefix-${x}`}>{x}</Hello>});