Если несколько функций внутри компонента зависят от разных наборов значений состояния, что произойдёт при изменении одного из этих значений?

Как работает повторный рендеринг

Когда в компоненте изменяется одно из значений состояния (например, через setState), React запускает повторный рендеринг всего компонента. Это означает, что весь код внутри функции компонента выполняется заново, включая объявления всех функций, которые зависят от состояния или нет.

Представьте, что у вас есть компонент с двумя состояниями: count и name. Если вы измените только count, React перерисует компонент, и обе функции — та, что использует count, и та, что использует name — будут пересозданы. Это происходит потому, что функции объявлены внутри тела компонента и не имеют собственного механизма отслеживания зависимостей.

Пример

function MyComponent() {
  const [count, setCount] = useState(0);
  const [name, setName] = useState('Alice');

  function increment() {
    setCount(count + 1);
  }

  function updateName() {
    setName('Bob');
  }

  // Обе функции пересоздаются при каждом рендере
  return (
    <div>
      <p>{count} - {name}</p>
      <button onClick={increment}>Increment</button>
      <button onClick={updateName}>Change Name</button>
    </div>
  );
}

При нажатии на кнопку Increment изменится только count, но обе функции increment и updateName будут созданы заново. Это не проблема для простых функций, но если функции выполняют тяжелые вычисления или используются в хуках типа useCallback, это может повлиять на производительность.

Оптимизация

Чтобы избежать лишних пересозданий, можно использовать useCallback с зависимостями. Например, если функция зависит только от count, вы можете обернуть её в useCallback с массивом зависимостей [count]. Тогда при изменении name функция не будет пересоздана, если её зависимости не изменились.

const increment = useCallback(() => {
  setCount(c => c + 1);
}, []); // нет зависимостей, так как используем функциональное обновление

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

Вывод

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