Чем отличается изменение state от изменения ref в React

Определение

• state — реактивное состояние компонента, изменение которого инициирует ререндер

• ref — контейнер для мутабельного значения, изменение которого не влияет на рендер

Изменение state

1. Вызывается setState / setX

2. React планирует ререндер

3. Компонент перерисовывается с новым состоянием

Пример:

const [count, setCount] = useState(0);

setCount(count + 1); // вызывает ререндер

Изменение ref

const countRef = useRef(0);

countRef.current += 1; // рендера не будет

Когда использовать

1. state

   • данные для UI

   • результат запроса

   • флаги отображения

2. ref

   • таймеры

   • предыдущие значения

   • ссылки на DOM

   • счётчики без UI

Вывод

Если данные должны влиять на интерфейс — используй state. Если нужно сохранить значение между рендерами без перерисовки — ref.