В React хук useRef — это мощный инструмент, который позволяет нам создавать ссылки на элементы DOM и другие значения и управлять ими. Он предоставляет способ прямого доступа к элементам и манипулирования ими без необходимости дополнительного состояния или повторного рендеринга. В этой статье мы рассмотрим различные варианты использования и продемонстрируем, как использовать перехват useRef в TypeScript.

1. Основное использование:
   Хук useRef можно использовать для создания изменяемого объекта ref. Вот простой пример:

import React, { useRef } from 'react';
const MyComponent: React.FC = () => {
  const inputRef = useRef<HTMLInputElement>(null);
  const handleClick = () => {
    if (inputRef.current) {
      inputRef.current.focus();
    }
  };
  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={handleClick}>Focus Input</button>
    </div>
  );
};

1. Управление предыдущими значениями.
   Еще одно полезное применение useRef — сохранение и доступ к предыдущим значениям переменной или состояния. Вот пример, демонстрирующий, как этого добиться:

import React, { useRef, useEffect } from 'react';
const MyComponent: React.FC = () => {
  const previousValue = useRef<number>(0);
  const currentValue = 42;
  useEffect(() => {
    previousValue.current = currentValue;
  }, [currentValue]);
  return (
    <div>
      <p>Previous Value: {previousValue.current}</p>
      <p>Current Value: {currentValue}</p>
    </div>
  );
};

1. Кэширование дорогостоящих вычислений:
   Хук useRef также можно использовать для кэширования дорогостоящих вычислений во время циклов рендеринга. Это гарантирует, что вычисление выполняется только один раз. Вот пример:

import React, { useRef } from 'react';
const MyComponent: React.FC = () => {
  const result = useRef<number | null>(null);
  const computeExpensiveValue = (): number => {
    // Perform expensive computation here...
    return 42;
  };
  if (result.current === null) {
    result.current = computeExpensiveValue();
  }
  return <div>Result: {result.current}</div>;
};

1. Управление отменой подписки и очисткой.
   В сценариях, когда вам необходимо отказаться от подписки на событие или выполнить очистку, useRef может помочь сохранить ссылки на функции, которые обрабатывают эти задачи. Вот пример:

import React, { useRef, useEffect } from 'react';
const MyComponent: React.FC = () => {
  const unsubscribeRef = useRef<() => void>(() => {});
  useEffect(() => {
    const subscription = subscribeToEvent(() => {
      // Handle event here...
    });
    unsubscribeRef.current = () => {
      subscription.unsubscribe();
      // Perform cleanup tasks...
    };
    return () => {
      unsubscribeRef.current();
    };
  }, []);
  return <div>My Component</div>;
};

Хук useRef в TypeScript предоставляет ряд возможностей для управления значениями и элементами в компонентах React и манипулирования ими. В этой статье мы рассмотрели различные методы использования useRef, включая базовое использование, управление предыдущими значениями, кэширование вычислений, а также управление задачами отмены подписки и очистки. Используя возможности useRef, вы можете оптимизировать свои компоненты React и повысить их производительность.

Не забудьте импортировать необходимые зависимости и настроить примеры кода в соответствии с вашими конкретными случаями использования.