Использование хука 'useRef' в React для взаимодействия с DOM-элементами

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

Пример использования useRef

Вот простой пример того, как может использоваться хук useRef в React:

import React, { useRef } from 'react';

function ExampleComponent() {
  const inputRef = useRef(null);

  const onButtonClick = () => {
    inputRef.current.focus();
  };

  return (
    <div>
      <input ref={inputRef} type="text" />
      <button onClick={onButtonClick}>Фокус на инпут</button>
    </div>
  );
}

export default ExampleComponent;

В этом примере useRef используется для создания ссылки на элемент input. Затем, при клике на кнопку, фокус переносится на инпут посредством метода focus(), обращающегося к inputRef.current.

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

Хотя useRef и могут использоваться для взаимодействия с DOM, его применение следует ограничивать. В большинстве случаев вы должны использовать "React-way" - изменяя состояние и пропсы. Напрямую работать с DOM нужно только тогда, когда нет других вариантов - например, при работе с анимациями, интеграцией с библиотеками третьих лиц и т.д.

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

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