Как правильно использовать хук useCallback?

Question

У меня есть пользовательский компонент ввода, например:

import React, { useState, useCallback } from 'react'

function MyCustomInput ({value: initialValue = '0'}) {
  const [value, setValue] = useState(initialValue)

  const handleChange = useCallback(
    value => {
     setValue(value)
    },
    [setValue]
  )

  return (
    <SomeInputComponent onChange={handleChange}/>
  )
}

Реализация useCallback в React do c говорит:

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

Теперь как согласно реализации do c правильный путь должен быть следующим:

const handleChange = useCallback(
   value => {
     setValue(value)
   },
   [value] // And not, [setValue]
 )

Но это сделает использование useCallback бесполезным, так как handleChange начнет получать новую забавную ссылку c каждый время обновления состояния value, которое приведет к ненужному повторному отображению моего <SomeInputComponent> компонента. Моя реализация неверна?

Answer 1

Вы должны включить все, что необходимо для создания функции, value передается как обычный параметр при вызове функции.

Единственной зависимостью, необходимой для построения функции в этом случае, является setValue:

const handleChange = useCallback(
  value => {
    setValue(value)
  }, [setValue]
)

Однако, поскольку setState, dispatch (из useReducer) и useRef известно как stati c, вы можете опустить их из списка зависимостей. Правило исчерпывающего ввода 1013 * имеет функцию isDefinitelyStaticDependency(reference), которая ищет и «одобряет» эти функции как stati c. Итак, ваш код должен быть:

const handleChange = useCallback(
  value => {
    setValue(value)
  }, []
)