В чем отличие ref от state?

В React есть два основных хука для хранения данных внутри функционального компонента: useState и useRef. Они служат разным целям, и понимание их отличий критично для написания эффективных и предсказуемых компонентов.

Назначение state

State (состояние) предназначен для хранения данных, которые могут изменяться в течение жизненного цикла компонента и при изменении должны вызывать повторный рендеринг компонента для обновления пользовательского интерфейса. Например, значение поля ввода, флажок или список элементов, которые видны пользователю.

Назначение ref

Ref (ссылка) используется для доступа к DOM-элементам напрямую или для хранения мутируемых значений, которые не должны вызывать ререндер. Ref сохраняет своё значение между рендерами, но его изменение не приводит к обновлению компонента. Это полезно для интеграции с нативными DOM API (например, фокусировка на поле), хранения идентификаторов таймеров или сохранения предыдущего значения состояния.

Практические примеры

Пример использования state для счётчика:

import { useState } from 'react';

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

  return (
    
      Count: {count}
       setCount(count + 1)}>
        Increment
      
    
  );
}

Здесь каждый клик обновляет состояние, и компонент перерисовывается, отображая новое значение.

Пример использования ref для фокусировки на поле ввода:

import { useRef } from 'react';

function InputFocus() {
  const inputRef = useRef(null);

  const handleClick = () => {
    inputRef.current.focus();
  };

  return (
    
      
      
        Focus the input
      
    
  );
}

Здесь ref используется для получения прямого доступа к DOM-элементу input без необходимости перерисовки компонента.

Ключевые различия

• Ререндер: Изменение state вызывает ререндер, изменение ref — нет.
• Обновление значения: State обновляется асинхронно и через функцию setter, ref обновляется синхронно через присваивание ref.current.
• Использование: State — для данных, влияющих на UI. Ref — для DOM-операций, таймеров, хранения предыдущих значений или любых мутаций без ререндера.

Вывод: Используйте state для данных, которые должны синхронизироваться с интерфейсом и вызывать его обновление. Используйте ref, когда вам нужен прямой доступ к DOM или нужно хранить значение, которое не должно влиять на отрисовку компонента.