Useref - удобный инструмент для работы с реактивными данными

useRef - это React хук, который позволяет создать изменяемую ссылку на элемент DOM или на другое значение. Это позволяет обновлять и использовать значение, которое сохраняется между рендерами компонента.

Пример использования useRef для доступа к DOM-элементу:

import React, { useRef } from 'react';
function MyComponent() {
   const inputRef = useRef(null);
   const handleClick = () => {
      inputRef.current.focus();
   };
   return (
      

         
         Focus Input
      
   );
}

В этом примере мы создали ссылку на `input` элемент, используя `useRef`. Затем мы передали ссылку через `ref` атрибут. В `handleClick` функции мы используем `inputRef.current` для получения доступа к ссылке на `input` элемент, чтобы вызвать метод `focus()`, который устанавливает фокус на элемент.

Пример использования useRef для хранения значения, которое не должно вызывать повторный рендер:

import React, { useState, useRef } from 'react';
function MyComponent() {
   const [count, setCount] = useState(0);
   const countRef = useRef(count);
   const handleClick = () => {
      countRef.current = count + 1;
      setCount(count + 1);
   };
   return (
      

         
Current count: {count}
         Increment count
         
Previous count: {countRef.current}
      
   );
}

В этом примере мы создали ссылку на `count` значение используя `useRef`. Затем в `handleClick` функции мы обновляем значение на `count + 1` и сохраняем его в `countRef.current`. Это позволяет нам сохранить предыдущее значение `count`, которое мы можем использовать без вызова повторного рендера компонента.