Для чего использует ref?

ref (сокращение от reference) — это способ работы с элементами DOM или сохранения значений между рендерами без их участия в процессе обновления интерфейса. В React ref создаётся с помощью функции useRef или компонента React.createRef.

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

• Доступ к DOM-элементам
  Когда нужно управлять DOM-элементами напрямую, например, устанавливать фокус, прокручивать элементы или изменять их размеры.

• Хранение изменяемых данных
  Если нужно сохранить значение, которое не должно вызывать повторный рендер (например, идентификаторы таймеров).

• Интеграция с библиотеками
  Когда React-компонент взаимодействует с библиотеками, которые требуют прямого доступа к DOM (например, анимации с помощью сторонних библиотек).

Пример использования для управления DOM

import React, { useRef } from "react";

function App() {
	const divRef = useRef(null);
	const highlight = () => {
		divRef.current.style.backgroundColor = "yellow";
	};
	return (
		<div>
			<div ref={divRef}>Это элемент</div>
			<button onClick={highlight}>Подсветить</button>
		</div>
	);
}

Пример для хранения изменяемого значения

import React, { useRef, useState } from "react";

function Counter() {
	const countRef = useRef(0);
	const [renderCount, setRenderCount] = useState(0);

	const increment = () => {
		countRef.current += 1; // Изменение значения без рендера
		console.log("Текущее значение:", countRef.current);
	};

	const reRender = () => setRenderCount((prev) => prev + 1);

	return (
		<div>
			<button onClick={increment}>Увеличить счётчик</button>
			<button onClick={reRender}>Перерисовать</button>
		</div>
	);
}

Пример интеграции с библиотекой

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

function ChartComponent() {
	const canvasRef = useRef(null);

	useEffect(() => {
		new Chart(canvasRef.current, {
			type: "bar",
			data: {
				labels: ["A", "B", "C"],
				datasets: [{ label: "Данные", data: [10, 20, 30] }],
			},
		});
	}, []);

	return <canvas ref={canvasRef}></canvas>;
}

Особенности использования ref

• Не изменяет поток данных React
  Использование ref обходит механизм React, так как оно работает напрямую с DOM.

• Изменение через current
  Значение ref хранится в объекте ref.current. Это значение можно изменять, не вызывая повторного рендера.

•  Поддержка классовых компонентов
  Для классовых компонентов используется React.createRef для создания рефа:

class MyComponent extends React.Component {
	constructor(props) {
		super(props);
		this.myRef = React.createRef();
	}
	componentDidMount() {
		console.log(this.myRef.current);
	}
	render() {
		return <div ref={this.myRef}>Привет!</div>;
	}
}

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

• Если задачу можно решить через стейт или пропсы.

• Для управления данными, которые должны вызывать рендер.

• Если прямое взаимодействие с DOM не требуется.

ref — инструмент для решения задач, связанных с DOM или сохранением значений между рендерами. Однако его использование должно быть оправданным, чтобы не усложнять архитектуру приложения.