Как передать ref в свой компонент и открыть его методы?
- Что такое forwardRef и useImperativeHandle?
По умолчанию ref на свой компонент не попадает в его DOM. В React 19 ref передаётся как обычный prop; в прежних версиях компонент оборачивали в forwardRef. useImperativeHandle позволяет открыть родителю не весь DOM-элемент, а ограниченный набор методов (focus, scrollToItem). Сторонние библиотеки (карты, графики, редакторы) подключают так: контейнер через ref, создание экземпляра в эффекте, уничтожение в очистке, синхронизация опций отдельным эффектом.
- Императивный API — исключение, обычно хватает props
- Экземпляр библиотеки хранят в ref, а не в state
- Очистка обязательна — иначе утечки и двойные экземпляры в StrictMode
А ещё Обёртки над библиотеками часто уже есть — проверьте перед своей
Подробно
function Chart({ data }: { data: Point[] }) {
const el = useRef<HTMLDivElement>(null);
const chart = useRef<ChartLib | null>(null);
useEffect(() => { chart.current = new ChartLib(el.current!); return () => chart.current?.destroy(); }, []);
useEffect(() => { chart.current?.setData(data); }, [data]);
return <div ref={el} />;
}Что хотят услышать
- Ref как prop (React 19) или forwardRef.
- useImperativeHandle для ограниченного API.
- Интеграция библиотек через ref и эффекты с очисткой.
Проверьте себя
Один верный вариант. Подумайте, потом откройте ответ.
Показать варианты и ответ
- ✗Ref на свой компонент автоматически указывает на корневой DOM-элемент в любой версии React
- ✓Ref передают prop-ом (React 19) или forwardRef; useImperativeHandle открывает нужные методы
- ✗Экземпляр сторонней библиотеки лучше хранить в state
- ✗Очистка эффекта для сторонних библиотек не нужна
Связанные вопросы
Разбор собеседования с sotto
После собеседования sotto разбирает разговор: оценка, каждый вопрос — хорошо, частично или слабо, чего не хватило в ответе и над чем поработать к следующему разу. Первые 30 минут бесплатно.