In ReactJS, using array index as key is said to not work well, but I can't make it not work well?

Question

I can't make it not work well if I use index as the key. The only way is if I mutate the array and use index as the key. But since the docs says not to mutate the state (the array), so if that's the case, I can't make it not work well, contrary to what the docs is stating. How can I show that it may break?

function App() {
  const [arr, setArr] = React.useState(["A","B","C"]);

  function toggleSortOrder() {
    let newArr = [...arr];
    newArr.reverse();
    console.log(JSON.stringify(newArr));
    setArr(newArr);
  }

  return (
    <div>
      <ul>
        { arr.map((e, i) => <li key={i}>{ e }</li>) }
      </ul>
      <button onClick={toggleSortOrder} >Toggle Sort Order</button>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#root"));

<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

I can make it break if I mutate the state, which the docs says should not be done:

function App() {
  const [arr, setArr] = React.useState(["A","B","C"]);

  function toggleSortOrder() {
    arr.reverse();
    console.log(JSON.stringify(arr));
    setArr(arr);
  }

  return (
    <div>
      <ul>
        { arr.map((e, i) => <li key={i}>{ e }</li>) }
      </ul>
      <button onClick={toggleSortOrder} >Toggle Sort Order</button>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#root"));

<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

But I can't even break it if I mutate the state and use index as the key, if it is a class component:

class App extends React.Component {
  state = { arr: ["A","B","C"] };

  toggleSortOrder() {
    this.state.arr.reverse();
    console.log(JSON.stringify(this.state.arr));
    this.setState({ arr: this.state.arr });
  }

  render() {
    return (
      <div>
        <ul>
          { this.state.arr.map((e, i) => <li key={i}>{ e }</li>) }
        </ul>
        <button onClick={this.toggleSortOrder.bind(this)} >Toggle Sort Order</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.querySelector("#root"));

<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

Answer 1

The reality is that using the index of the map function will work, it is not recommended because it is an anti-pattern:

If the array changes via add or removing an element, or modifying the number of elements in the array, React will assume that the DOM element represents the same component as before. Meaning the impact of using index could be unpredictable, such as two array items containing the same id.

It is therefore recommended that:

• If your array elements contain a unique id, or you can form a unique id based on the structure, do so.

• Use a global index such as a counter to help create dynamic ids... for example:

arr.map(elem => {
    counter++;
    return (
        <li key={elem + counter}>{ elem }</li>);
    );
});

This way you ensure the key has a unique identifier.

Answer 2

Keys are primarily about performance. The tell react which old component corresponds to which new one, which in turn helps it quickly determine the minimal set of changes needed to update the dom. See documentation on reconciliation.

So the sense in which your code "breaks" is that react thinks it needs to edit the text inside each of the <li>'s, when it was possible to rearrange them instead. You won't really notice any performance issues with your toy example, but you could construct other examples where it matters a lot more. Here's one where i'm rendering 20,000 rows, and moving one row to the end. Performance isn't great at all, but it's better if keys are used correctly instead of based on the index.

const exampleData = [];
for (let i = 0; i < 20000; i++) {
  exampleData[i] = {
    key: i,
    name: "Element " + i,
  }
}

function App() {
  const [useKeysWell, setUseKeysWell] = React.useState(false);
  const [data, setData] = React.useState(exampleData);

  function move() {
    setData(prev => {
      let newData = [...prev.slice(1), prev[0]];
      return newData;
    });
  }

  const before = Date.now();
  setTimeout(() => {
    console.log('reconciling and committing', Date.now() - before, 'ms (approx)');
  }, 0)

  return (
    <div>
      <button onClick={move}>Move one</button>
      <button onClick={() => setUseKeysWell(prev => !prev)}>Use keys {useKeysWell ? "worse" : "better"} </button>
      <ul key={useKeysWell}>
        { data.map((e, i) => <li key={useKeysWell ? e.key : i}>{ e.name }</li>) }
      </ul>
    </div>
  )
}

ReactDOM.render(<App />, document.querySelector("#root"));

<script src="https://unpkg.com/[email protected]/umd/react.development.js" crossorigin></script>
<script src="https://unpkg.com/[email protected]/umd/react-dom.development.js" crossorigin></script>

<div id="root"></div>

With more complicated code, you could also cause problems if you have components with lifecycle hooks that you are expecting to run, but due to the incorrect keys the components are not being mounted/unmounted/updated the way you expect.