< H / $ > Хак/Собесов

Перейти на PRO

В чем разница между useRef и useState при хранении значения

«В чем разница между useRef и useState при хранении значения» — вопрос из категории React, который задают на 10% собеседований Frontend Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Тип вопроса: React Вероятность: 10% Категория: Frontend Разработчик

Ответ

useRef и useState оба могут хранить значения, но с ключевыми отличиями:

Рендер компонента:
- useState при изменении значения вызывает ререндер компонента.
- useRef не вызывает ререндер при изменении .current.
Синхронность обновлений:
- useState обновления асинхронны (состояние может быть не актуально сразу после вызова setState).
- useRef обновляет .current синхронно.
Использование:
- useState — для данных, влияющих на UI.
- useRef — для мутабельных значений, не требующих отрисовки (таймеры, DOM-элементы).

function Example() {
  const [count, setCount] = useState(0); // Вызовет ререндер
  const countRef = useRef(0); // Не вызовет

  const handleClick = () => {
    countRef.current += 1; // Изменение без ререндера
    setCount(prev => prev + 1); // Вызовет ререндер
  };

  return <button onClick={handleClick}>Click</button>;
}