[解決済み] React.useStateでpropsから状態を再読み込みしない

質問

プロップス変更時に状態がリロードされることを期待しているのですが、これがうまくいかず user 変数が更新されないのは、次の useState を呼び出したのですが、どうしたのでしょうか？

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});
  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

コードペン

解決方法は？

useStateに渡される引数は、クラスコンポーネントのコンストラクタで状態を設定するのと同じように初期状態であり、再レンダリング時に状態を更新するために使用されるわけではありません。

プロップチェンジの際に状態を更新したい場合は useEffect フック

function Avatar(props) {
  const [user, setUser] = React.useState({...props.user});

  React.useEffect(() => {
      setUser(props.user);
  }, [props.user])

  return user.avatar ? 
         (<img src={user.avatar}/>)
        : (<p>Loading...</p>);
}

動作デモ