tips chips

日々の作業で出てきた技術メモの切れ端を置いておくページ

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

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

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

You Might Not Need an Effect
A JavaScript library for building 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(''); // ... }

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

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

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

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