[React]再レンダリング後にstateが初期化されない件

はじめに

親コンポーネントのstateを変更し、再度同じ子コンポーネントに別のpropsを渡すような処理の場合に、子コンポーネントで管理しているstateが更新されないことがあって困っていました。
そのときに仕方なく下記のようにuseEffectを利用して初期化していましたが

あれ、再レンダリングされる場合コンポーネントって再生成されるんじゃないんだっけ？😇となっていたところ、以下の記事が解決してくれました。
https://beta-reactjs-org-git-you-might-not-fbopensource.vercel.app/learn/you-might-not-need-an-effect#resetting-all-state-when-a-prop-changes

function ProfilePage({ userId }) {
  return (
    <Profile userId={userId}/>
  )
}

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

  useEffect(() => {
    setComment('');
  }, [userId]);
  // ...
}

TL;DR

コンポーネントにkeyアトリビュートを指定してあげるとstateをリセットしてくれます！

function ProfilePage({ userId }) {
  return (
    <Profile 
      userId={userId}
      key={userId} // これでuseEffect使わずに済む！
    />
  )
}

function Profile({ userId }) {
  const [comment, setComment] = useState('');
  // ...
}

なんで起こるのか

Reactは同じコンポーネントを続けてレンダリングする場合に状態を保持しようとするみたいです。つまりstateを更新しません。
ですので、keyとして渡すことでDOMを再作成してくれて、状態を破棄→再作成の流れを作ることができます。

また、ひとつ詳しくなれました。。