> В чем разница useRef и useState в React (React)

Основное различие между useRef и useState в React заключается в том, как они влияют на рендеринг компонента и как хранят данные.

• useState: возвращает пару [значение, setter]. При вызове setter-функции React обновляет состояние и запускает повторный рендер компонента. Изменение состояния всегда приводит к перерисовке UI. Значение состояния сохраняется между рендерами, но его изменение синхронизируется с жизненным циклом компонента.

• useRef: возвращает объект с свойством .current, который можно изменять напрямую (например, ref.current = newValue). Изменение ref.current не вызывает повторный рендер. Рефы используются для хранения мутируемых значений, которые не должны влиять на отображение (например, ссылки на DOM-элементы, таймеры, предыдущие значения).

Когда что использовать:

• Используйте useState, если изменение данных должно обновлять интерфейс (например, текст инпута, счетчик, список).

• Используйте useRef, если нужно хранить данные, которые не влияют на рендер (например, идентификатор setInterval, фокус на элементе, предыдущее значение для сравнения).

Пример:

JSX
function Component() {
  const [count, setCount] = useState(0); // изменение -> ререндер
  const countRef = useRef(0); // изменение -> НЕТ ререндера

  const handleClick = () => {
    setCount(count + 1); // UI обновится
    countRef.current += 1; // UI не изменится
  };
}

Ключевой момент: useRef - это "мутабельный контейнер", который не участвует в цикле рендеринга, а useState - реактивное состояние, управляющее отображением.