Чому useImperativeHandle потрібен у React

useImperativeHandle — це хук React, який дозволяє контролювати, які методи та пропси будуть доступні батьківському компоненту при використанні ref на дочірньому компоненті.

Він використовується разом з forwardRef для налаштування зовнішнього інтерфейсу для доступу до внутрішніх функцій/значень компонент.

Синтаксис

jsx

useImperativeHandle(ref, () => ({
  // методи, які будуть доступні ззовні
  someMethod() {
    // ...
  },
}), [dependencies]);

ref — посилання, передане через forwardRef.
Функція () => ({...}) повертає об'єкт з публічним API.
[dependencies] — список залежностей для оновлення об'єкта.

Коли потрібен useImperativeHandle

Коли ви хочете обмежити доступ до внутрішніх функцій компонент (інкапсуляція).
Коли вам потрібно відкрити методи дочірнього компонент для батька (наприклад, focus, reset, scrollToTop тощо).
Коли працюєте з нестандартними або складними DOM-елементами, кастомними компонентми, модальними вікнами тощо.

Приклад: доступ до методу focus з батьківського компонент

tsx

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

const CustomInput = forwardRef((props, ref) => {
  const inputRef = useRef<HTMLInputElement>(null);

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current?.focus();
    },
    clear: () => {
      inputRef.current!.value = '';
    }
  }));

  return <input ref={inputRef} {...props} />;
});

export default function App() {
  const inputRef = useRef<{ focus: () => void; clear: () => void }>(null);

  return (
    <div>
      <CustomInput ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>Focus</button>
      <button onClick={() => inputRef.current?.clear()}>Clear</button>
    </div>
  );
}

Важливо:

useImperativeHandle працює тільки всередині компонентів, обгорнених у forwardRef.

useImperativeHandle — це просунутий інструмент React, який використовується в випадках, коли вам потрібно явно налаштувати інтерфейс доступу до компонент через ref. Це зручно для створення контрольованих компонентів, модальних вікон, кастомних вводу та інших ситуацій, коли батько потребує безпосереднього управління поведінкою дитини.

Коротка відповідь

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.

Дочитали статтю?

Практика завдань

Чому useImperativeHandle потрібен у React

#Синтаксис

#Коли потрібен useImperativeHandle

#Приклад: доступ до методу focus з батьківського компонент

#Висновок

Коротка відповідь

Синтаксис

Коли потрібен useImperativeHandle

Приклад: доступ до методу focus з батьківського компонент

Висновок