2-й параметр useCallback hook

Question

Многие хуки React имеют 2-й параметр, от которого зависит хук.

1. Опускает ли второй параметр то же самое, что и пустой массив?

2. Какая польза от использования функции useState, например setFoo чем переменная?

      const [foo, setFoo] = useState('')
   
      const cb = useCallback(() => {
      // do somethin
      }, [setFoo])
   

Answer 1

Опускание второго параметра аналогично предоставлению пустого массива?

Нет, совсем нет.

Хуки вызываются при каждом рендеринге, но в зависимости от Значения зависимостей пересчитывают или вызывают их обратный вызов. Указание пустого массива гарантирует, что ловушка будет вызвана один раз и никогда больше, как функция жизненного цикла componentDidMount компонента класса. Однако полное исключение массива зависимостей будет просто вызывать эффект при каждом рендеринге.

Для чего-то вроде useCallback это полностью сведет на нет цель запоминания функции обратного вызова, поскольку каждый цикл рендеринга получит новую ссылку обратного вызова.

Какая польза от предоставления функции useState, например setFoo

Чтобы обеспечить стабильную ссылку обратного вызова, которая предположительно вызывает установщик состояния. Но это не имеет особого смысла, так как useCallback по существу таков:

const memoizedCallback = useCallback(
  () => {
    doSomething(a, b);
  },
  [a, b],
);

Примечание

Массив зависимости не передаются в качестве аргументов для обратного вызова. Концептуально, однако, это то, что они представляют: каждое значение, указанное в обратном вызове, должно также появиться в массиве зависимостей. В будущем достаточно продвинутый компилятор может создать этот массив автоматически.

Установщик useState не является стабильной ссылкой на функцию, что означает, что для каждого цикла рендеринга он переопределяется, что означает, что любой запомненный обратный вызов также пересчитывается. , Если сеттер используется компонентом, просто используйте его.

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