Если передать ref классовому компоненту, значением ref будет instance класса. Можно ли добиться похожего поведения с функциональным компонентом — например, получить через ref функцию, объявленную внутри компонента?

Как работает ref с функциональными компонентами

По умолчанию функциональные компоненты не поддерживают ref, так как у них нет экземпляра класса. Однако React предоставляет механизм для кастомизации ref с помощью комбинации forwardRef и useImperativeHandle.

Пример реализации

import React, { forwardRef, useImperativeHandle, useState } from 'react';

const Child = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  useImperativeHandle(ref, () => ({
    increment: () => setCount(c => c + 1),
    getCount: () => count
  }));

  return <div>{count}</div>;
});

function Parent() {
  const childRef = useRef();

  return (
    <>
      <Child ref={childRef} />
      <button onClick={() => childRef.current.increment()}>+</button>
    </>
  );
}

Как это работает

• forwardRef передаёт ref из родителя в дочерний компонент как второй аргумент.
• useImperativeHandle определяет, какие свойства и методы будут доступны через ref.
• В родителе можно вызывать эти методы, как если бы это был экземпляр классового компонента.

Вывод

Используйте useImperativeHandle с forwardRef, когда нужно предоставить внешний интерфейс для функционального компонента — например, для управления фокусом, анимациями или вызова внутренних методов из родителя.