[解決済み] React useEffectフックによるcomponentWillUnmountの実装

質問

どのようにすれば useEffect フック (あるいは他のフック) を使って componentWillUnmount ?

従来のクラスコンポーネントでは、次のようなことをします。

class Effect extends React.PureComponent {
    componentDidMount() { console.log("MOUNT", this.props); }
    componentWillUnmount() { console.log("UNMOUNT", this.props); }
    render() { return null; }
}

を使うと useEffect フックを使います。

function Effect(props) {
  React.useEffect(() => {
    console.log("MOUNT", props);

    return () => console.log("UNMOUNT", props)
  }, []);

  return null;
}

(完全な例です。 https://codesandbox.io/s/2oo7zqzx1n )

で返される "cleanup"関数を使用するため、これはうまくいきません。 useEffect で返される &qu;cleanup" 関数はマウント時のプロップをキャプチャし、アンマウント時のプロップの状態ではないため、これは動作しません。

のプロップの最新版を取得するにはどうしたらよいでしょうか？ useEffect をクリーンアップします。 を使わずに を実行することなく、プロップが変更されるたびに関数本体（またはクリーンアップ）を実行しますか？

似たような 質問 は、最新の小道具にアクセスできるという部分には触れていません。

は react docs の状態になります。

エフェクトを実行し、一度だけ（マウントとアンマウント時に）クリーンアップしたい場合、第二引数に空の配列（[]）を渡すことができます。これはReactに、あなたのエフェクトがpropsやstateからのいかなる値にも依存しないことを伝えるので、決して再実行する必要はありません。

しかしこの場合、私はpropsに依存しています...しかし、クリーンアップの部分だけです...。

どのように解決するのですか？

useRefを利用し、render useEffect return callbackメソッドなどのクロージャ内に使用するpropsを格納することができます。

function Home(props) {
  const val = React.useRef();
  React.useEffect(
    () => {
      val.current = props;
    },
    [props]
  );
  React.useEffect(() => {
    return () => {
      console.log(props, val.current);
    };
  }, []);
  return <div>Home</div>;
}

デモ

しかし、より良い方法は、第二引数を useEffect に渡すことで、希望するプロップの変更時にクリーンアップと初期化が行われるようになります。

React.useEffect(() => {
  return () => {
    console.log(props.current);
  };
}, [props.current]);