reactjs - 変数によってパスが定義されているネストされたフィールドが、依存関係配列に追加されたときに React.useMemo の更新をトリガーするようにします。

Question

TypeScript 4 と React 17 を使用しています

カスタムフックにこのコードがありました：

  const myValue = useMemo((): string[] => {
    if (someCondition) {
      return (myMap?.field && myMap.field.[subfieldId]) || null
    } else {
      ...
    }
  }, [myMap.field.[subfieldId]])

ESlint は、プログラムでチェックするには myMap.field.[subfieldId] を変数に移動する必要があると訴えました。

だから私はこれに変更しました：

  const currentData: string[] | null = (myMap?.field && myMap.field.[subfieldId]) || null

  const myValue = useMemo((): string[] => {
    if (someCondition) {
      return currentData
    } else {
      ...
    }
  }, [currentData])

レンダリングのたびに変数を上位のスコープに入れ、再計算するのが良い方法かどうかはわかりません。無限ループが作成されるのではないかとさえ心配しています。

ESLInt は、代わりにこれを提案します。これははるかに簡単です。

  const myValue = useMemo((): string[] => {
    if (someCondition) {
      return (myMap?.field && myMap.field.[subfieldId]) || null
    } else {
      ...
    }
  }, [myMap.field])

React が myMap.field[subfieldId] の変更を検出するには、myMap.field で十分でしょうか? きっとそうでしょう。確かに、オブジェクト参照自体は変更されないため、myMap だけを配置した場合、React は何が変更されたかを認識しませんが、以前と新しい myMap.field を比較すると、React はすべてのサブフィールドをチェックします。そうですか？