componentWillReceivePropsからgetDerivedStateFromPropsへの書き換えでprevPropsを参照する方法

Reactをプロジェクトの開発に使用しているのですが、最近のバージョンアップによりcomponentWillMountをはじめとする**いくつかのlifecycle methodsがDeprecatedとなってしまいました。**そして、それに伴ってメソッドの書き換えを行っています。

componentWillMountについては、ほぼほぼcomponentDidMountに書き換えることで対処できたのですが、componentWillReceivePropsの書き換えで非常に困ったことが起きています。

例えば以下のコードがあるとします。

componentWillReceiveProps(nextProps) {
  if (nextProps.propName === this.props.propName) {
       this.setState({ stateName: true })
     }
     this.method()
}

このようなコードを新しいライフサイクルメソッドとして推奨されているstatic getDerivedStateFromPropsで書き換え用としているのですが、どう頑張っても上手にできません。

というのも

getDerivedStateFromPropsはstaticメソッドなのでthisへのアクセスが無い（this.propsが取得できず、propsの比較が出来ない）
getDerivedStateFromPropsは引数として(nextProps, prevState)を取り、prevPropsとの比較が出来ない
this.propsをstateにコピーしてprevStateからアクセスする方法はバグになる可能性が高く非推奨になっている

からです。

かといって、**componentDidUpdateを使おうとするとthis.setStateで無限ループに陥ってしまいます。**useEffect()でも同様なので結局使えません。

色々調べてみて、以下の解決策（？）を見つけたのですが説明が十分でなく実際どのように使うのかいイマイチつかめません（下のリンクに関しては結局、stateにpropsをコピーしているようにすら見えます）。
Recommendation: fully controlled component
State derived from props/state

もしこれまでcomponentWillReceivePropsで行ってきたことを他の方法で出来るならご教授願いたいです。
また、開発側がstatic getDerivedStateFromPropsというpropsの比較ができないメソッドを作り上げたことが改悪にしか感じられないのですが、その点に関してもご意見を伺いたいです（一応、公式的には引数にprevPropsを入れるとややこしくなるから、とのことみたいですが…）。稚拙な文章ですが、どうぞよろしくお願いします。

行動規範の内容に同意します

回答1件

ベストアンサー

下のリンクに関しては結局、stateにpropsをコピーしているようにすら見えます

抜本的に作り替えるのでなければ、それで対応させるほかありません。

投稿2019/12/22 05:05

maisumakun

総合スコア145595

maisumakun

2019/12/22 05:13

> 一応、公式的には引数にprevPropsを入れるとややこしくなるから、とのことみたいですが… これは、将来的にレンダリングを非同期化する予定で、現状のcomponentWillReceivePropsの形ではそれに対応できない、というような事情があります。

wannabe

2019/12/22 08:59

ご回答ありがとうございます。そのような事情もあったのですね。知りませんでした。とりあえず出来る範囲で修正しようと思います。追加での質問になってしまい申し訳無いのですが、現状componentWillReceiveProps内でthis.methodと呼び出している場合、どういう風に書き換えるのがよいのでしょう？こちらに関しても、staticメソッドでthisが使えないこともありとても不便に感じています。

maisumakun

2019/12/22 09:21

> 現状componentWillReceiveProps内でthis.methodと呼び出している場合メソッドの処理内容にもよりますが、 * stateの算出をしている場合→そちらのメソッドもstaticな算出だけのメソッドにして、getDerivedStateFromPropsの返り値に混ぜ込む * 副作用のある動作をしている場合→componentDidMount/componentDidUpdateに移す（新しい書き方で副作用が許されるのはこの2つとcomponentWillUnmountだけです）

wannabe

2019/12/26 03:03

返信が遅くなってしまいすみません。なるほど！色々なやり方が存在するのですね。もう一度良く考えてみてメソッドの書き換えを行おうと思います。ありがとうございました！

行動規範の内容に同意します