Когда предпочтительно использовать useRef вместо состояния (useState)?

useRef — для значений, которые нужно сохранять между рендерами, но изменение которых не должно вызывать ре-рендер. Типичные случаи: хранение ссылок на DOM-элементы, таймеров, предыдущих значений, счётчиков рендеров, экземпляров сторонних библиотек. useState — для значений, от которых зависит отображение компонента. Правило: если значение видно пользователю — useState, если нет — скорее всего useRef.