Рефы в React

Если мы хотим запомнить какую-то информацию, но не хотим, чтобы ее изменение вызывало рендеринг компонента, то нам пригодятся рефы и соответственно хук useRef, который с ними работает.

Реф (или ссылка) - это обычный JavaScript объект с единственным свойством current, которое вы можете читать или изменять.

Как и стейты, рефы могут хранить любой тип данных - это могут быть числа, строки, объекты и даже функции.

Если ваши данные используются для рендеринга, то храните их в стейте, а если вам не нужен рендеринг, в таком случае использование рефов может стать более эффективным. К тому же в отличие от стейта значение рефа изменяется немедленно.

В целом рефы применяются там, где вам надо отступить от React и взаимодействовать с внешними API - чаще с браузерными, которые не влияют на отображение компонента. Это может быть к примеру хранение id таймера или хранение объекта, для которого не нужно вычислять JSX, но чаще всего это взаимодействие с элементами DOM. Их можно применять для управления фокусом, выделения текста или воспроизведения мультимедиа.

На следующем уроке мы разберем работу с рефами и хуком useRef на практике.