Issue with using `index` as `key`

Using index as the key prop is not a good idea when the components being rendered are impure (impure components are components that have internal state).

As a example an input with a defaultValue is impure as it internally stores the current value. Using index as the key in this case will result in weird behaviour.

For example, clicking on the remove button next to an item only seems to remove the last item in the list.

App.tsx

import { useState } from "react";
import styles from "./App.module.css";
import { lyrics } from "./lyrics";

export default function App() {
  const [messages, setMessages] = useState(lyrics);

  const removeMessage = (index: number) =>
    setMessages((messages) => messages.filter((_, i) => i !== index));

  return (
    <div>
      {messages.map((message, index) => {
        return (
          <div key={index} className={styles.message}>
            <input className={styles.value} defaultValue={message.value} />
            <button className={styles.button} onClick={() => removeMessage(index)}>
              Remove
            </button>
          </div>
        );
      })}
    </div>
  );
}

Using Custom `key`s

For impure components we can help react understand which components are changed by using a custom unique key, tied to the element that is being rendered.

As an example our lyrics come with an id which we can use to ensure stable re-rendering and removal is items. In the below example we can now reliably remove items at any index.

App.tsx

import { useState } from "react";
import styles from "./App.module.css";
import { lyrics } from "./lyrics";

export default function App() {
  const [messages, setMessages] = useState(lyrics);

  const removeMessage = (index: number) =>
    setMessages((messages) => messages.filter((_, i) => i !== index));

  return (
    <div>
      {messages.map((message, index) => {
        return (
          <div key={message.id} className={styles.message}>
            <input className={styles.value} defaultValue={message.value} />
            <button className={styles.button} onClick={() => removeMessage(index)}>
              Remove
            </button>
          </div>
        );
      })}
    </div>
  );
}

Performance Advantage of Custom Keys

Even for pure component using custom keys is recommended. This will result in fewer re-renders as react can reliably pass the props to only the changed components.

In the below example, if you use key={index} we would have wasteful re-renders. With key={message.id} components don't re-render if their siblings are removed.

App.tsx

import { useState, memo } from "react";
import styles from "./App.module.css";
import { lyrics } from "./lyrics";

export default function App() {
  const [messages, setMessages] = useState(lyrics);

  const removeMessage = (index: number) =>
    setMessages((messages) => messages.filter((_, i) => i !== index));

  return (
    <div>
      {messages.map((message, index) => {
        return (
          <div key={message.id} className={styles.message}>
            <Lyric value={message.value} />
            <button className={styles.button} onClick={() => removeMessage(index)}>
              Remove
            </button>
          </div>
        );
      })}
    </div>
  );
}

const Lyric = memo((props: { value: string }) => {
  console.log('Rendering');
  return (
    <div className={styles.value}>🎵 {props.value}</div>
  );
});

Transcript