Можете объяснить, каким образом реализовано использование useRef в React и для чего он нужен?

В React хук useRef используется для создания изменяемого объекта, который сохраняет своё значение между рендерами компонента, но изменение этого значения не вызывает повторный рендер.

Основные применения useRef:

• Хранение ссылки на DOM-элемент для прямого доступа.
• Хранение любого мутируемого значения, которое нужно сохранить между рендерами без триггера обновления.

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

import React, { useRef } from 'react';

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

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

  return (
    <>
      <input ref={inputRef} type="text" />
      <button onClick={focusInput}>Фокус на поле</button>
    </>
  );
}

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

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