Reactのkey propはリスト以外でも使える
リストをレンダリングするときだけのものだと思ってた。
日々の作業で出てきた技術メモの切れ端を置いておくページ
リストをレンダリングするときだけのものだと思ってた。
Reactでリストをレンダリングしようとした時key propを設定しないとWarningが表示されたり、正しくレンダリングされなかったりするので、key propsはリストを扱うときに使うもの、というイメージでいましたが実はリスト意外のシチュエーションでも使うことができるという話。
なんとなく上記のドキュメントを読んでいたら出てきて「なるほど」となったのですが、
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('');
// ...
}このように置き換えることができるとのこと。（コードはいずれも前述ドキュメントからの引用）
こうすることで余計なエフェクトを持たないコンポーネントにできるという話でした。
確かに言われてみたら、できて当然のような感じなんですが少なくとも僕は気づいていなかったのでメモ。
まだ知らないことたくさんあるなと思わされてしまった。