Можно ли использовать ref для хранения данных, кроме ссылок на DOM-элементы?

Можно ли использовать ref для хранения данных, кроме ссылок на DOM-элементы?

• В React ref представляет собой объект с полем .current, предназначенным для хранения значений
• Он подходит не только для DOM-ссылок, но и для любых мутабельных данных
• В отличие от state, изменение ref.current не приводит к ререндеру
• Так хранят таймеры, прошлые значения, кэши и другие данные
• Данные сохраняются между рендерами, не вызывая обновления пользовательского интерфейса
• При этом в ref не следует помещать состояние, от которого зависит визуализация
• На практике это полезно для асинхронных операций и реализации нестейт-маркеров

Подробный ответ

Основной ответ

Да, в React через ref можно сохранять не только ссылки на DOM-элементы, но и произвольные данные. Объект, который возвращает useRef(), сохраняет свое значение между рендерами, а изменение свойства .current не запускает повторную отрисовку. Поэтому ref удобен для хранения mutable-состояний и значений, которые должны оставаться доступными без инициирования обновления компонента.

Ключевые моменты

• Mutable container: вызов useRef возвращает объект со свойством .current. Его можно менять напрямую, не вызывая новый рендер.
• Хранение произвольных данных: в ref можно помещать счетчики, таймеры, предыдущие значения, флаги, веб-сокеты и любые JS-объекты — все, что требуется сохранить между рендерами без влияния на UI.
• Отличие от state: изменение state вызывает перерисовку компонента, тогда как изменение ref — нет. Поэтому ref подходит, когда обновление данных не должно отражаться на визуальном состоянии.

Практический контекст

Распространенный пример — сохранение идентификатора таймера (setTimeout/setInterval) с последующей очисткой через useEffect. Кроме того, ref часто применяют для хранения предыдущих пропсов или состояния: это позволяет сравнивать значения между рендерами без дополнительного ререндеринга. В React 18+ такой подход нередко используют для оптимизации и предотвращения лишних отрисовок.