Гарантирует ли React стабильность ссылки на setter из useState между рендерами?

Стабильность ссылки на setter из useState

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

Почему это важно

Стабильность ссылки критична для оптимизации производительности в React. Когда вы передаёте setter в качестве пропса дочернему компоненту или используете его в массиве зависимостей хука useEffect, стабильная ссылка предотвращает ненужные ререндеры и повторные вызовы эффектов. Если бы ссылка менялась каждый рендер, это приводило бы к бесконечным циклам или избыточным вычислениям.

Пример кода

import React, { useState, useEffect } from 'react';

function Counter() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    // setCount стабилен, эффект выполнится только один раз
    console.log('Effect runs');
  }, [setCount]);

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(c => c + 1)}>Increment</button>
    </div>
  );
}

В этом примере setCount передаётся в зависимости useEffect. Благодаря стабильности ссылки эффект выполняется только при монтировании компонента, а не при каждом изменении count.

Исключения и особенности

• Стабильность гарантируется только для setter из useState. Другие хуки, например useReducer, также возвращают стабильный dispatch.
• Если компонент размонтируется и монтируется заново (например, при изменении ключа), setter будет новым.
• В строгом режиме React (StrictMode) может вызывать рендеры дважды, но ссылка на setter остаётся стабильной в рамках одного монтирования.

Вывод

Стабильность ссылки на setter из useState — это фундаментальная особенность React, которая упрощает оптимизацию и предотвращает баги, связанные с изменяющимися ссылками. Используйте это свойство для безопасной передачи setter в дочерние компоненты или в зависимости эффектов, не опасаясь лишних ререндеров.