Understanding React Keys and Their Importance

Mar 10, 2023 - 5 min read

Why are Keys Important?

Let’s consider a React application with two counters (e.g., for milk and tea) Switching between them demonstrates why key is essential.

KeyPropDemonstration.tsx

import React from "react";
const Counter = () => {
  const [count, setCount] = React.useState(0);
  return (
    <div>
      <h1>{count}</h1>
      <button onClick={()=> setCount(count + 1)}>Increment</button>
      <button onClick={()=> setCount(count - 1)}>Decrement</button>
    </div>
  );
};

export default function Page() {
  const [milkOrTea, setShow] = React.useState(true);
  return (
    <div>
      <h1>Key Prop Demonstration</h1>
      <button onClick={()=> setShow(!milkOrTea)}>
        Toggle to {milkOrTea ? "tea" : "milk"}
      </button>
      {/* Switching between components with unique keys */}
      {milkOrTea ? <Counter key="milk" /> : <Counter key="tea" />}
    </div>
  );
}