Почему важно использовать одну и ту же ссылку на функцию?

В JavaScript функции являются объектами, и при каждом вызове, который создаёт новую функцию (например, () => {} или function() {}), в памяти появляется новый объект с новой ссылкой. Это фундаментальное поведение языка, которое напрямую влияет на работу современных UI-фреймворков, особенно React.

Проблема с новыми ссылками

Рассмотрим типичный React-компонент:

function MyComponent() {
  const handleClick = () => {
    console.log('Clicked!');
  };

  return <ChildComponent onClick={handleClick} />;
}

При каждом рендере MyComponent создаётся новая функция handleClick. Для React-компонента ChildComponent, который использует React.memo или shouldComponentUpdate, пропс onClick будет каждый раз новым объектом, что приведёт к ненужному ререндеру дочернего компонента, даже если его состояние не изменилось.

Как это влияет на хуки

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

useEffect(() => {
  // Выполняется при каждом рендере, если fetchData новая
  fetchData();
}, [fetchData]); // fetchData — новая ссылка каждый раз

const fetchData = () => {
  // Запрос данных
};

Решение: сохранение ссылки

Для стабильности ссылок используют:

• useCallback: Кэширует функцию между рендерами, пока не изменятся указанные зависимости.
• Вынос за пределы компонента: Если функция не зависит от пропсов или состояния, её можно объявить вне компонента.
• useRef: Можно сохранить стабильную ссылку на функцию, которая может меняться.

// Решение с useCallback
const handleClick = useCallback(() => {
  console.log('Clicked!');
}, []); // Пустой массив — функция создаётся один раз

// Вынос за пределы компонента
function stableLog() {
  console.log('Stable!');
}
function Component() {
  return <button onClick={stableLog}>Click</button>;
}

Где это применяется

Этот принцип критически важен в React для оптимизации производительности мемоизированных компонентов (React.memo, PureComponent), корректной работы хуков (useEffect, useMemo, useCallback) и при передаче колбэков вниз по дереву компонентов. Он также актуален в других контекстах, например, при отписке от событий, где нужно передать ту же функцию, что и при подписке.

Вывод: Сохранение ссылки на функцию — это ключевая оптимизация для предотвращения лишних вычислений и ререндеров в реактивных приложениях. Её стоит применять всегда, когда функция передаётся как пропс в оптимизированные дочерние компоненты или используется в массиве зависимостей хуков.