useUniqueElementIds (JavaScript)

Language JavaScript (and super languages)

Summary

Rule available since: v2.0.0
Diagnostic Category: lint/correctness/useUniqueElementIds
This rule isn’t recommended, so you need to enable it.
This rule doesn’t have a fix.
The default severity of this rule is error.
This rule belongs to the following domains:
- react

How to configure

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "useUniqueElementIds": "error"
6
      }
7
    }
8
  }
9
}

Description

Disallow static id values on elements outside SVG contexts.

IDs must be unique in the rendered page. A component with a hard-coded ID can create duplicate IDs when it is rendered more than once, which can break links between labels and controls or other accessibility features. Use React’s useId to generate stable, unique IDs.

This rule reports static literal IDs. It does not compare IDs across elements or verify that dynamically generated IDs are unique.

Examples

Invalid

1
<div id="foo">bar</div>;

code-block.jsx:1:1 lint/correctness/useUniqueElementIds ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ id attribute should not be a static string literal. Generate unique IDs using useId().
  
  > 1 │ <div id="foo">bar</div>;
      │ ^^^^^^^^^^^^^^
    2 │ 
  
  ℹ In React, if you hardcode IDs and use the component multiple times, it can lead to duplicate IDs in the DOM. Instead, generate unique IDs using useId().

1
React.createElement("div", { id: "foo" });

code-block.jsx:1:1 lint/correctness/useUniqueElementIds ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ id attribute should not be a static string literal. Generate unique IDs using useId().
  
  > 1 │ React.createElement("div", { id: "foo" });
      │ ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
    2 │ 
  
  ℹ In React, if you hardcode IDs and use the component multiple times, it can lead to duplicate IDs in the DOM. Instead, generate unique IDs using useId().

Valid

1
const id = useId();
2
<div id={id}>bar</div>;

1
const id = useId();
2
React.createElement("div", { id });

Static IDs are allowed in SVG contexts:

1
<svg>
2
    <defs>
3
        <pattern id="dots" width="10" height="10" />
4
    </defs>
5
    <rect fill="url(#dots)" width="100%" height="100%" />
6
</svg>

Options

The following option is available.

`excludedComponents`

List of unqualified component names to ignore. Use it to list components expecting an id attribute that does not represent a DOM element ID.

Default: empty list.

1
{
2
  "linter": {
3
    "rules": {
4
      "correctness": {
5
        "useUniqueElementIds": {
6
          "level": "on",
7
          "options": {
8
            "excludedComponents": [
9
              "FormattedMessage"
10
            ]
11
          }
12
        }
13
      }
14
    }
15
  }
16
}

1
<FormattedMessage id="static" />

1
<Library.FormattedMessage id="static" />