Почему изменение значения ref не вызывает перерендер?

В React есть четкое разделение между данными, влияющими на UI, и вспомогательными значениями.

Определение

ref — это объект с полем current, предназначенный для хранения значений, которые не должны вызывать перерендер.

Почему ref не вызывает ререндер

React не отслеживает изменения ref.current, потому что:

1. ref не участвует в reconciliation

2. ref предназначен для императивных операций

3. Автоматический ререндер снизил бы производительность

Пример:

const countRef = useRef(0);

countRef.current += 1; // ререндер не происходит

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

ref применяется для:

• доступа к DOM-элементам

• хранения таймеров и id

• сохранения предыдущих значений

• работы с внешними библиотеками

Сравнение со state

• state:

  • вызывает ререндер

  • используется для UI

• ref:

  • не вызывает ререндер

  • используется для служебных данных

Вывод

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