Reactのkey propはリスト以外でも使える

リストをレンダリングするときだけのものだと思ってた。

2023-01-10

Reactでリストをレンダリングしようとした時key propを設定しないとWarningが表示されたり、正しくレンダリングされなかったりするので、key propsはリストを扱うときに使うもの、というイメージでいましたが実はリスト意外のシチュエーションでも使うことができるという話。

You Might Not Need an Effect – React

The library for web and native user interfaces

https://beta.reactjs.org/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes

なんとなく上記のドキュメントを読んでいたら出てきて「なるほど」となったのですが、

export default function ProfilePage({ userId }) {
  const [comment, setComment] = useState('');

  // 🔴 Avoid: Resetting state on prop change in an Effect
  useEffect(() => {
    setComment('');
  }, [userId]);
  // ...
}

上記のような、「propsが変化したら内部ステートをリセットする」というような処理を

export default function ProfilePage({ userId }) {
  return (
    <Profile
      userId={userId}
      key={userId}
    />
  );
}

function Profile({ userId }) {
  // ✅ This and any other state below will reset on key change automatically
  const [comment, setComment] = useState('');
  // ...
}

このように置き換えることができるとのこと。（コードはいずれも前述ドキュメントからの引用）

こうすることで余計なエフェクトを持たないコンポーネントにできるという話でした。

確かに言われてみたら、できて当然のような感じなんですが少なくとも僕は気づいていなかったのでメモ。

まだ知らないことたくさんあるなと思わされてしまった。