Убедитесь, что вложенные поля, в которых путь определяется переменным триггером 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])

Будет ли myMap.field достаточно, чтобы React узнал об изменении myMap.field[subfieldId]? Думаю, так и будет. Действительно, React не узнает, что изменилось, если я помещу только myMap, потому что сама ссылка на объект не изменится, но при сравнении предыдущего и нового myMap.field React проверит все подполя. Имеет ли это?

Answer 1

Согласно реагирующему линтеру крюка:

React Hook React.useMemo имеет ненужную зависимость: myMap. Либо исключите его, либо удалите массив зависимостей. Значения внешней области, такие как myMap, не являются допустимыми зависимостями, потому что их изменение не приводит к повторной визуализации компонента. (реагировать-крючки / исчерпывающие-глубины)

Так что вам должно быть хорошо с этим:

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