Вопрос с собеседования · Frontend

Чем useRef отличается от useState?

JuniorReact
Ещё спрашивают так:
  • Когда хранить значение в ref?
Коротко

Оба сохраняют значение между рендерами, но изменение ref.current не вызывает перерисовку, а setState — вызывает. Ref — «ящик» для значений, которые не влияют на вывод: id таймера, предыдущее значение, флаг «уже отправлено», экземпляр сторонней библиотеки, DOM-элемент. Если значение нужно показать — это state. ref.current меняют напрямую, синхронно.

  • Читать и писать ref в обработчиках и эффектах, не при рендере
  • Значение ref одно на экземпляр компонента
  • Ref в массиве зависимостей эффекта не помогает — его изменение не перезапускает эффект

А ещё Счётчик, отображаемый на экране, в ref не обновится на экране

Подробно

const timer = useRef<number | null>(null);
function start() { timer.current = window.setInterval(tick, 1000); }
function stop() { if (timer.current) clearInterval(timer.current); }

Что хотят услышать

  • Ref не вызывает перерисовку.
  • Что хранить в ref.
  • Отображаемое — в state.

Проверьте себя

Один верный вариант. Подумайте, потом откройте ответ.

Показать варианты и ответ
  • ✗Изменение ref.current перерисовывает компонент, как и setState, но без батчинга обновлений
  • ✓Оба переживают рендеры, но изменение ref не перерисовывает — для таймеров и DOM
  • ✗Ref не сохраняется между рендерами и сбрасывается при каждом новом вызове функции компонента
  • ✗Отображаемый на экране счётчик лучше хранить в ref, чтобы не было лишних рендеров

Связанные вопросы

Партнёр платформы

Разбор собеседования с sotto

После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.

Разбор собеседования