Блог

Если не передавать обратный вызов дочернему элементу, а просто использовать его в текущем компоненте, есть ли польза в том, чтобы обернуть обратный вызов в a useCallback ? Этот:

  const Foo = (
  const [count, setCount] = useState(500);

  const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
    setCount(Number(e.target.value));
  }, [setCount]);

  return (
    <>
      <div>
        Delay: <input value={count} onChange={onChange} type="number" />
      </div>
    </>
  );
 

Стих Этот:

  const Foo = (
  const [count, setCount] = useState(500);

  const onChange =(e: React.ChangeEvent<HTMLInputElement>) => {
    setCount(Number(e.target.value));
  };

  return (
    <>
      <div>
        Delay: <input value={count} onChange={onChange} type="number" />
      </div>
    </>
  );
 

Codesandbox: https://codesandbox.io/s/loving-stonebraker-48xhs?file=/src/Counter.tsx

Я не вижу в этом никакой пользы при внутреннем использовании, поскольку каждое обновление состояния ( setCount(Number(e.target.value)); ) в любом случае обязательно повторно отправляет компонент, и все, что делает обратный вызов, — это ставит в очередь обновление состояния.

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

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