recharts: Pie chart with animation causes 'non-unique keys' react-dom warning

I have searched the issues of this repository and believe that this is not a duplicate.

Reproduction link

Steps to reproduce

Open codesandbox and open console, see react non-unique key warnings.

What is expected?

All generated sector elements have a unique key in any case.

What is actually happening?

If isAnimationActive is set to true all sectors in the pie chart are initially rendered with the same start and end angle and therefore have the same key prop.

Environment	Info
Recharts	v2.10.2
React	react 18.2.0
System	MacOS 14.1.1
Browser	Chrome 119.0.6045.159

About this issue

Original URL
State: closed
Created 7 months ago
Reactions: 1
Comments: 26 (18 by maintainers)

Commits related to this issue

chore: fix pie sector key value (#4005) ## Description Updates the `key` value for pie sectors ## Related Issue [4004](https://github.com/recharts/recharts/issues/4004) ## Motivation and Co... — committed to recharts/recharts by imagineLife 7 months ago
Chore: Update keys (stop "new bugs") (#4006) ## Description In pursuit of removing all `no-array-index-key` lint-skipping instances, some keys are more complicate to set, particularly - Labels - ... — committed to recharts/recharts by imagineLife 7 months ago
fix(deps): update dependency recharts to v2.10.3 (#5302) [![Mend Renovate logo banner](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates... — committed to SAP/ui5-webcomponents-react by renovate[bot] 7 months ago
feat(odd-platform-ui): bumb recharts to resolve duplicated keys warning (#1590) https://github.com/recharts/recharts/issues/4004 — committed to opendatadiscovery/odd-platform by anatolii-yemets 5 months ago
chore(deps): update dependency recharts to v2.12.1 (#405) [![Mend Renovate](https://app.renovatebot.com/images/banner.svg)](https://renovatebot.com) This PR contains the following updates: | Packag... — committed to specfy/specfy by renovate[bot] 4 months ago

Most upvoted comments

@ckifer I’ve done a little more testing. It seems to show warning when two or more items of data have value property equals zero.

CodeSandbox to check out.

TVYDev on Jan 26, 2024

I have also been facing this warning with PieChart.

recharts: 2.10.4 react: 18.2.0

TVYDev on Jan 26, 2024

Surely 👍

Can this convo be “migrated” to this issue? there are perhaps many keys that need updating that aren’t “throwing” lint errors during development 😕 I can post more based on some of my findings either here or the other issue

imagineLife on Nov 30, 2023

@imagineLife

ckifer on Nov 30, 2023