React の非同期レンダリングの実装の一部として、React 17 で廃止されるライフサイクル メソッドがいくつかあります (React Blog を参照ください)。 よく使用されるものに componentWillReceiveProps があります。 ほとんどの場合、コンポーネントの
プロパスの変更を処理するために使用されます。

では、どうしたらよいでしょうか。

1 つの解決策は static getDerivedStateFromProps メソッドを使用することです。 Larry Price 氏による素晴らしい「HowTo」dev.to Post があります。

別の解決策は、React Hooks、特に useEffect() Hook を使用することです。 これは、小さなコンポーネントがあり、この変更内で機能的なコンポーネントに切り替えたい場合に、良いソリューションとなるかもしれません。 項目のリストを持つテーブル コンポーネントをレンダリングしていると想像してください。 すべての項目は、最初に doSomething() メソッドを実行しなければなりません。

以前のコード

doSomething (items) { // some code to sort items ... return items}state = { items: this.props.items}componentWillReceiveProps (nextProps) { this.setState({ items: doSomething(nextProps.items) })}

Hooks

const doSomething = (items) => { // some code to sort items ... return items}const = useState(doSomething(props.items))useEffect(() => { setItems(defaultSorting(items))}, )

デフォルトですべてのレンダーで実行する useEffect() Hook を使用することができます。 不必要な呼び出しを避けるために、2 番目のパラメーターとして を使用します。

重要なお知らせ

getDerivedStateFromProps() または useEffect() に切り替える前に、このプロパティ処理が本当に必要であるかどうかを確認する必要があります。 よくあるバグやアンチパターンについては、この公式の React ブログポストをご覧ください。

必要がない場合でも、いくつかのプロパティを状態に書き込むことがあります。 たとえば、プロパティから来るリストをソートする必要がある場合、レンダリング中にそれを行い、コンポーネントの状態にそれを書き込まないようにします。