К сожалению, useRef недооценен. Он не входит в число самых популярных крючков, но приносит пользу. Зная, как и где его использовать, можно добиться отличных результатов.

Начнем с основ

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

React запомнит значение, которое вы создаете с помощью useRef, независимо от того, создаете ли вы объект JavaScript, ссылающийся на узел в DOM, или простое значение, и оно не будет потеряно во время повторного рендеринга.

Что это нам дает?

1. Доступ к элементам DOM:

   • Вы можете легко получить доступ к элементам в DOM. Например, вы можете получить значение поля ввода, сосредоточиться на определенных элементах, узнать их высоту и ширину, прокрутить до определенной части экрана и многое другое.

2. Сохранение изменяемых значений:

   • Вы можете запомнить любые нужные вам данные без повторного рендеринга компонентов. Например, если вам нужен счетчик или таймер, выберите useRef вместо useState.

Примеры

Вот несколько примеров, иллюстрирующих возможности useRef.

Пример 1: Ссылка на число

import React, { useRef } from 'react';

const Counter = () => {
  const refCount = useRef(0);
  const refInputField = useRef(null);

  const onClick = () => {
    refCount.current = refCount.current   1;
    refInputField.current.focus();
  }

  return (
    
      
        Click me!
      
      >
  );
};

export default Counter;

В этом примере:

• refCount — это изменяемая ссылка на число.
• refInputField — это ссылка на элемент ввода.
• При нажатии кнопки счетчик увеличивается, а поле ввода получает фокус.

Пример 2. Отслеживание предыдущих значений

Другой распространенный вариант использования useRef — отслеживание предыдущих значений.

import React, { useRef, useEffect, useState } from 'react';

const PreviousValue = () => {
  const [count, setCount] = useState(0);
  const prevCountRef = useRef();

  useEffect(() => {
    prevCountRef.current = count;
  }, [count]);

  return (
    

      
Current Count: {count}
      
Previous Count: {prevCountRef.current}
       setCount(count   1)}>Increment
    
  );
};

export default PreviousValue;

В этом примере:

• prevCountRef отслеживает предыдущее значение count.
• Хук useEffect обновляет prevCountRef.current при каждом изменении счетчика.
• Это позволяет отображать как текущие, так и предыдущие счетчики, не вызывая ненужных повторных рендерингов.

Дополнительные советы и рекомендации по использованию useRef

1. Сохраняющиеся значения во всех рендерах

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

Пример: отслеживание количества рендеринга компонента.

import React, { useRef, useEffect } from 'react';

const RenderCounter = () => {
  const renderCount = useRef(0);

  useEffect(() => {
    renderCount.current  = 1;
  });

  return (
    

      
This component has rendered {renderCount.current} times
    
  );
};

export default RenderCounter;

2. Интеграция со сторонними библиотеками

useRef незаменим при работе со сторонними библиотеками, требующими прямого манипулирования элементами DOM, например интеграции с библиотеками диаграмм, управления видеоплеерами или обработки анимации.

Пример: интеграция библиотеки диаграмм.

import React, { useRef, useEffect } from 'react';
import Chart from 'chart.js/auto';

const ChartComponent = () => {
  const chartRef = useRef(null);

  useEffect(() => {
    const ctx = chartRef.current.getContext('2d');
    new Chart(ctx, {
      type: 'line',
      data: {
        labels: ['January', 'February', 'March', 'April'],
        datasets: [{
          label: 'Sales',
          data: [65, 59, 80, 81],
        }],
      },
    });
  }, []);

  return ;
};

export default ChartComponent;

3. Как избежать ненужных повторных рендерингов в сложных приложениях

В сложных приложениях, где производительность имеет решающее значение, использование useRef для хранения изменяемых объектов может помочь избежать ненужного повторного рендеринга.

Пример: сохранение изменяемого объекта состояния.

import React, { useRef } from 'react';

const MutableState = () => {
  const state = useRef({
    name: 'John Doe',
    age: 30,
  });

  const updateName = (newName) => {
    state.current.name = newName;
    console.log('Name updated:', state.current.name);
  };

  return (
    

       updateName('Jane Doe')}>
        Update Name
      
    
  );
};

export default MutableState;

4. Как избежать проблем с закрытием

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

Пример: таймер с useRef, чтобы избежать устаревшего состояния.

import React, { useRef, useState, useEffect } from 'react';

const Timer = () => {
  const [count, setCount] = useState(0);
  const countRef = useRef(count);
  countRef.current = count;

  useEffect(() => {
    const intervalId = setInterval(() => {
      setCount(countRef.current   1);
    }, 1000);
    return () => clearInterval(intervalId);
  }, []);

  return 
Count: {count}
;
};

export default Timer;

Заключение

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

• Доступ к элементам DOM и управление ими.
• Сохранение изменяемых значений, которые не вызывают повторную отрисовку.
• Сохранение значений при рендеринге.
• Интеграция со сторонними библиотеками.
• Избежание ненужного повторного рендеринга в сложных приложениях.
• Устранение проблем с закрытием.

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

Знаете ли вы, что useState не всегда является правильным ответом?