Rule idea: jsx-unique-key

[silverwind]

I'd like to propose a rule that triggers when duplicate key properties are defined in on the same JSX nesting level or in arrays containing JSX at the top-level element.

React depends on unique keys and will render very unexpected results when duplicate keys are present which shoult to my knowledge almost never be intentional.

Examples where the rule would trigger an error:

const div = (
  <div>
    <span key="notunique"/>
    <span key="notunique"/>
  </div>
);

const spans = [
  <span key="notunique"/>,
  <span key="notunique"/>,
];

[ljharb]

That seems like something jsx-key should report on, either by default or behind an option.

[ljharb]

The first example shouldn't warn because key is irrelevant there, because it's not inside an array.

[ljharb]

I'm going to solve this by adding a warnOnDuplicates option.

[silverwind]

The first example shouldn't warn because key is irrelevant there, because it's not inside an array.

I think any HTML sibling nodes can be affected by key conflicts.

[ljharb]

@silverwind can you provide a react codesandbox that illustrates such a problem? if so, I can try to include it in the warnOnDuplicates option prior to release.

[silverwind]

I think the worst that can happen with non-array cases is unnecessary re-renders. That said, React does warn at runtime for the first example I provided above.

Warning: Encountered two children with the same key, notunique. 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.

React docs say:

The key only has to be unique among its siblings, not globally unique.

[ljharb]

Ok thanks, I’ll reopen this then to cover the first case with the new option.

[tido64]

@ljharb: Since f51ec45, jsx-key is now being triggered for all elements inside a React.Fragment. Is that intentional? Our CI fails with 7.29: https://github.com/microsoft/rnx-kit/runs/5333921004?check_suite_focus=true

The code that it trips on: https://github.com/microsoft/rnx-kit/blob/main/packages/test-app/src/App.native.tsx#L39

[Lexe003]

It triggers now on all elements inside my React app - also on elements that are not in an array.

[stefcameron]

With this, I have now 7195 new lint errors for things that are completely not related to an array that never tripped before. For example:

            <Fragment>
              <div data-testid={`${testId}-message`}>{error.message}</div>
              <div data-testid={`${testId}-stack`}>{error.stack}</div>
            </Fragment>

Causes:

  49:15  error  Missing "key" prop for element in array  react/jsx-key
  49:15  error  Missing "key" prop for element in array  react/jsx-key
  50:15  error  Missing "key" prop for element in array  react/jsx-key
  50:15  error  Missing "key" prop for element in array  react/jsx-key

[ljharb]

@stefcameron yes, thank you. that's #3215.

[ljharb]

@tido64 if you're getting a different problem than #3215, please file a new issue.