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

Question

Изменение state приводит к ререндеру компонента, а изменение ref — нет. state используется для данных, которые влияют на отображение UI. ref нужен для хранения мутабельных значений, которые должны сохраняться между рендерами, но не участвуют в отрисовке. React не отслеживает изменения ref.current.

YeaHub · Accepted Answer

Определениеstate — реактивное состояние компонента, изменение которого инициирует ререндерref — контейнер для мутабельного значения, изменение которого не влияет на рендерИзменение stateВызывается setState / setXReact планирует ререндерКомпонент перерисовывается с новым состояниемПример:const [count, setCount] = useState(0);

setCount(count + 1); // вызывает ререндер
Изменение refconst countRef = useRef(0);

countRef.current += 1; // рендера не будет
Когда использоватьstateданные для UIрезультат запросафлаги отображенияrefтаймерыпредыдущие значенияссылки на DOMсчётчики без UIВыводЕсли данные должны влиять на интерфейс — используй state. Если нужно сохранить значение между рендерами без перерисовки — ref.