Aller au contenu
Biome
Docs Blog Playground

noArrayIndexKey

Ce contenu n’est pas encore disponible dans votre langue.

Diagnostic Category: lint/suspicious/noArrayIndexKey

Since: v1.0.0

Sources:

Discourage the usage of Array index in keys.

We don’t recommend using indexes for keys if the order of items may change. This can negatively impact performance and may cause issues with component state. Check out Robin Pokorny’s article for an in-depth explanation on the negative impacts of using an index as a key. If you choose not to assign an explicit key to list items then React will default to using indexes as keys.

Source React documentation

Examples

Section titled Examples

Invalid

Section titled Invalid
something.forEach((Element, index) => {
    <Component key={index} >foo</Component>
});
code-block.jsx:2:21 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={index} >foo</Component>
      │                     ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={index} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation. 
  
React.Children.map(this.props.children, (child, index) => (
    React.cloneElement(child, { key: index })
))
code-block.jsx:2:38 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ React.Children.map(this.props.children, (child, index) => (
  > 2 │     React.cloneElement(child, { key: index })
      │                                      ^^^^^
    3 │ ))
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ React.Children.map(this.props.children, (child, index) => (
      │                                                 ^^^^^
    2 │     React.cloneElement(child, { key: index })
    3 │ ))
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation. 
  
something.forEach((Element, index) => {
    <Component key={`test-key-${index}`} >foo</Component>
});
code-block.jsx:2:33 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={test-key-$&#123;index&#125;} >foo</Component>
      │                                 ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={test-key-$&#123;index&#125;} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation. 
  
something.forEach((Element, index) => {
    <Component key={"test" + index} >foo</Component>
});
code-block.jsx:2:30 lint/suspicious/noArrayIndexKey ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━

  ✖ Avoid using the index of an array as key property in an element.
  
    1 │ something.forEach((Element, index) => {
  > 2 │     <Component key={“test” + index} >foo</Component>
      │                              ^^^^^
    3 │ });
    4 │ 
  
  ℹ This is the source of the key value.
  
  > 1 │ something.forEach((Element, index) => {
      │                             ^^^^^
    2 │     <Component key={“test” + index} >foo</Component>
    3 │ });
  
  ℹ The order of the items may change, and this also affects performances and component state.
  
  ℹ Check the React documentation.

Valid

Section titled Valid
something.forEach((item) => {
    <Component key={item.id} >foo</Component>
});
something.forEach((item) => {
    <Component key={item.baz.foo} >foo</Component>
});
Section titled Related links