Как вынести функцию-обработчик за пределы компонента и в каких случаях это оправдано?

Зачем выносить функцию-обработчик за пределы компонента?

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

Когда это оправдано?

• Функция не использует состояние или пропсы компонента (является чистой и статической).
• Функция не зависит от замыканий на внутренние переменные компонента.
• Компонент часто ререндерится, и дочерние компоненты используют React.memo или PureComponent.

Пример кода

// Неоптимизированный вариант: функция создается каждый раз
function MyComponent() {
  const handleClick = () => {
    console.log('Clicked');
  };
  return <button onClick={handleClick}>Click</button>;
}

// Оптимизированный вариант: функция вынесена за пределы
const handleClick = () => {
  console.log('Clicked');
};

function MyComponent() {
  return <button onClick={handleClick}>Click</button>;
}

Когда не стоит выносить?

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

Вывод

Вынос функций-обработчиков за пределы компонента — простой и эффективный способ оптимизации, который стоит применять для статических обработчиков, не зависящих от внутреннего состояния компонента.