Почему срабатывает правило lint `react-hooks / excustive-deps` для свойств вложенных объектов?

Question

Я пытаюсь использовать перехватчики React для запоминания обратного вызова. Этот обратный вызов специально использует функцию, определенную для объекта.

const setValue = useCallback((value) => {
  field.setValue(key, value);
}, [field.setValue, key]);

Это вызывает правило eslint react-hooks/exhaustive-deps. Он хочет, чтобы я вместо этого прошел[field, key].

Если я затем изменю код на следующий, я не получу предупреждения, хотя он кажется эквивалентным:

const { setValue: setFieldValue } = field;

const setValue = useCallback((value) => {
  setFieldValue(key, value);
}, [setFieldValue, key]);

Почему eslint предупреждает меня в первом примере? Могу ли я спокойно игнорировать это в таких обстоятельствах?

Answer 1

Попробуй это.

const setValue = useCallback((value) => {
  const set = field.setValue;
  set(key, value);
}, [field.setValue, key]);

Но это не рекомендуется. Взгляните на это объяснение. https://github.com/facebook/react/issues/15924