Skip to content
Biome
Docs Enterprise Playground
Blog

useUniqueElementIds

Summary

Section titled “Summary”
  • Rule available since: v2.0.0
  • Diagnostic Category: lint/nursery/useUniqueElementIds
  • This rule doesn’t have a fix.
  • The default severity of this rule is error.
  • This rule belongs to the following domains:

Description

Section titled “Description”

Prevent the usage of static string literal id attribute on elements.

In React, hardcoding IDs is discouraged because IDs have to be unique in the DOM. You should use useId to generate unique IDs for accessibility purposes.

Please keep in mind this rule doesn’t check whether ids are actually unique or not, and does check whether static literal id isn’t passed to the elements or not. So you’re encouraged to check by yourself if the ids are actually unique.

Examples

Section titled “Examples”

Invalid

Section titled “Invalid”
<div id="foo">bar</div>;
code-block.jsx:1:1 lint/nursery/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().
  
React.createElement("div", { id: "foo" });
code-block.jsx:1:1 lint/nursery/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

Section titled “Valid”
const id = useId();
<div id={id}>bar</div>;
const id = useId();
React.createElement("div", { id });

Options

Section titled “Options”

The following option is available

excludedComponents

Section titled “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.

{
    "options": {
        "excludedComponents": [
            "FormattedMessage"
        ]
    }
}
<FormattedMessage id="static" />
<Library.FormattedMessage id="static" />

How to configure

Section titled “How to configure”
biome.json
{
  "linter": {
    "rules": {
      "nursery": {
        "useUniqueElementIds": "error"
      }
    }
  }
}
Section titled “Related links”