Reactのkey propはリスト以外でも使える
リストをレンダリングするときだけのものだと思ってた。
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('');
// ...
}
このように置き換えることができるとのこと。(コードはいずれも前述ドキュメントからの引用)
こうすることで余計なエフェクトを持たないコンポーネントにできるという話でした。
確かに言われてみたら、できて当然のような感じなんですが少なくとも僕は気づいていなかったのでメモ。
まだ知らないことたくさんあるなと思わされてしまった。