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

[lennartfranke]

• 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

[ckifer]

@imagineLife

[ckifer]

@imagineLife it looks like there are more instances of this. Can you go through the demo and look for all instances? They don't show on the storybook for some reason...

npm run demo -> ComposedChart - produces another duplicate set of keys for tooltip

[ckifer]

same with legend item

[imagineLife]

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

[ckifer]

Summarized over there

[ckifer]

This should be resolved in the latest (see sandbox https://codesandbox.io/s/pie-chart-of-straight-angle-forked-rvsnly)

We'll try to be more careful when making key changes!

[HHongSeungWoo]

Unfortunately, it seems that Bar also need to be reverted

[imagineLife]

Unfortunately, it seems that Bar also need to be reverted

Hi @HHongSeungWoo 👋 Do you have &/or can you put together an example showing the key error, like a code sandbox? :/ The bar tests all pass and the demo bar charts all render without key errors, I'd love to see what props and/or features cause the key issue! (and likely reset the recent key-change back to index-based until more thorough testing is done on cases like this!)

[HHongSeungWoo]

Hello~! It seems that errors may occur when directly controlling the axis.
For example, <XAxis type="number" domain={[0, 100]} />

It appears that in some cases, entry.x or entry.y could become null or NaN.
An error occurs when the values are the same in such situations.

[DiegoZan]

Hi!
I am also having this warning.
Code is very straightforward:

<ResponsiveContainer width='100%' height='100%'>
   <BarChart
      data={dataPercentage}
      layout='vertical'
      margin={{ top: 5, right: 10, left: 10, bottom: 5,}}
   >
      <CartesianGrid strokeDasharray='3 3' fill='#eee' />
      <XAxis type='number' />
      <YAxis type='category' dataKey="name" tick={{ fontSize: 12 }} />
      <Tooltip content={<CustomTooltip />} />
      <Legend wrapperStyle={{fontSize: 12, fontWeight: 600}} formatter={renderColorfulLegendText} iconSize={12} />
      <Bar dataKey="inSLA" stackId="a" fill="#007700" maxBarSize={10} />
      <Bar dataKey="outSLA" stackId="a" fill="#cc0000" maxBarSize={10} />
   </BarChart>
</ResponsiveContainer>

The warning only shows when two bars have the exact same values. E.g.:

{
   name: 'Service 1',
   inSLA: 5,
   outSLA: 7
}
 
{
   name: 'Service 2',
   inSLA: 5,
   outSLA: 7
}

Warnings are:

Warning: Encountered two children with the same key, `rectangle-164.62-5-83,100`. 
Keys should be unique so that components maintain their identity across updates. 
Non-unique keys may cause children to be duplicated and/or omitted — the 
behavior is unsupported and could change in a future version.

[ckifer]

Is this after updating to 2.10.4?

[DiegoZan]

It happens with both 2.10.3 and 2.10.4.

[ckifer]

Thanks - sorry about this, these key issues are hard to manage...

[ckifer]

@imagineLife - I don't think its possible to use your approach for key in pie sectors, we'll have to add the index in there to prevent bugs like this

[imagineLife]

Hello all 👋
here's a fork+branch showing no errors using the example in the above comment, sans legend and tooltip, as some code is not in that snippet.

@ckifer @DiegoZan can a separate issue+codesandbox be made to show the key error?

[TVYDev]

I have also been facing this warning with PieChart.

recharts: 2.10.4
react: 18.2.0

[ckifer]

Can you provide us the data that causes this?

[TVYDev]

@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.

[ckifer]

@imagineLife

[sudojoseph]

following

[ckifer]

re-added index in 2.12. Not the end of the overall issue but should resolve the errors

[viniciusrad]

I had this problem for a whole day, it took my sleep, the next day after a lot of research I partially understood the reason for the problem/warning and managed to make it stop

I used a trick that may not be the best solution, but at least the warning disappeared

I used
import dynamic from "next/dynamic";
const NoSSR = dynamic(() => import('../componentes/NeedleChartComponent'), { ssr: false })
I don't know why but 'use client' in the files involved wasn't enough

and on return I used
<NoSSR charValue={40} labelTitle='Cpu Usage'/>

Maybe everyone should try this approach when the problem arises.

[ckifer]

it took my sleep

😅 - hoping that this issue doesn't take anyone else's sleep

@viniciusrad can you share the code and the data that made the chart throw the key error? You shouldn't have to do that work-around. Does this happen when not using next?

[TimonSotiropoulos]

I am having the same issue, basically I am rendering 2 Scatter datasets because i want the resulting points to be different sizes (and there doesn't seem to be a way to get access to that within the Scatter Cells, or at least not in the documentation).

The easiest way to solve this would be to add the key from the parent Scatter component down onto the actual Layer that is wrapping each ScatterPoint render:

  renderSymbolsStatically(points: ScatterPointItem[]) {
    const { shape, activeShape, activeIndex } = this.props;
    const baseProps = filterProps(this.props, false);

    return points.map((entry, i) => {
      const isActive = activeIndex === i;
      const option = isActive ? activeShape : shape;
      const props = { key: `symbol-${i}`, ...baseProps, ...entry };

      return (
        <Layer
          className="recharts-scatter-symbol"
          {...adaptEventsOfChild(this.props, entry, i)}
          // eslint-disable-next-line react/no-array-index-key
          key={`symbol-${entry?.cx}-${entry?.cy}-${entry?.size}-${i}`} // <---- Update this line to pass the key from the scatter parent
          role="img"
        >
          <ScatterSymbol option={option} isActive={isActive} {...props} />
        </Layer>
      );
    });
  }

This would need to be done in the animation part of the component as well, but this is a pretty big issue at the moment as you can't have 2 different sized datasets without doing some weird transformations on the data.

Heres a subset of what I have in my codebase that doesn't work if you want to attempt to recreate:

<RECHARTS.ScatterChart
            width={_props.width}
            height={_props.height}
            margin={{
                top: 0,
                right: 0,
                bottom: 0,
                left: 0,
            }}
        >
            <RECHARTS.XAxis
                dataKey="extent_v"
                type="number"
                name="Extent"
                unit=""
                height={xAxisHeight}
                domain={[0, 100.05]}
                ticks={[0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100, 105]}
                tick={false}
                axisLine={<line x1="0" y1="100" x2="100" y2="20" stroke={C.THEME.Colours.White[0]} strokeWidth={1} />}
            >
                <RECHARTS.Label position={'center'} style={{ fill: C.THEME.Colours.White[0], fontSize: fontSize }}>
                    {xLabel}
                </RECHARTS.Label>
            </RECHARTS.XAxis>
            <RECHARTS.YAxis
                dataKey="severity_v"
                type="number"
                name="Severity"
                domain={[0, 0.55]}
                ticks={[0.1, 0.2, 0.3, 0.4, 0.5]}
                tick={false}
                unit=""
                axisLine={<line x1="0" y1="100" x2="100" y2="20" stroke="white" strokeWidth={1} />}
            >
                <RECHARTS.Label
                    angle={-90}
                    position={'center'}
                    style={{ fill: C.THEME.Colours.White[0], fontSize: fontSize, textAnchor: 'middle' }}
                >
                    {yLabel}
                </RECHARTS.Label>
            </RECHARTS.YAxis>
            <RECHARTS.ZAxis zAxisId={'dataSetCurrent'} range={[300, 301]} />
            <RECHARTS.ZAxis zAxisId={'dataSetHistory'} range={[100, 101]} />
            <RECHARTS.ZAxis zAxisId={'dataSetTimeseries'} range={[10, 11]} />
            <RECHARTS.ReferenceArea x1={0} x2={100} y1={0} y2={0.5} fill={C.THEME.Colours.Red[0]} fillOpacity={1} />
            <RECHARTS.ReferenceArea x1={0} x2={70} y1={0} y2={0.4} fill={C.THEME.Colours.Yellow[0]} fillOpacity={1} />
            <RECHARTS.ReferenceArea x1={0} x2={50} y1={0} y2={0.2} fill={C.THEME.Colours.Green[0]} fillOpacity={1} />
            {dataSetLegacyHistory ? (
                <RECHARTS.Scatter
                    key={'dataSetLegacyHistory'}
                    name="Waterbody Analysis - Timeseries"
                    id={'dataSetLegacyHistory'}
                    zAxisId={'dataSetTimeseries'}
                    data={dataSetLegacyHistory}
                    isAnimationActive={false}
                ></RECHARTS.Scatter>
            ) : null}
            {dataSet1stHistory ? (
                <RECHARTS.Scatter
                    name="Waterbody Analysis - Recent 1st Result"
                    id={'dataSet1stHistory'}
                    zAxisId={'dataSetHistory'}
                    data={dataSet1stHistory}
                    isAnimationActive={false}
                > </RECHARTS.Scatter>
            ) : null}
            {dataSetCurrent ? (
                <RECHARTS.Scatter
                    name="Waterbody Analysis - Current"
                    id={'dataSetCurrent'}
                    zAxisId={'dataSetCurrent'}
                    data={dataSetCurrent}
                    isAnimationActive={false}
                ></RECHARTS.Scatter>
            ) : null}
        </RECHARTS.ScatterChart>

[ckifer]

@TimonSotiropoulos feel free to create a PR if you have something that makes sense

[TimonSotiropoulos]

@ckifer

#4434 is the idea, i'm sure it can be improved.