В каких ситуациях надо использовать хук useImperativeHandle?

Question

[cocojambo1]

Всем привет, пытаюсь понять нафига использовать useImperativeHandle (React hook), но примеры в инете - тупые (вот кнопочка, вот инпутек, по клику на кнопу - мы можем сделать автофокус на инпуте).

Но такие примеры - не помогают мне разложить по полочкам, в чем его смысл. Ведь то же самое можно сделать и без использования этого хука. Пытался искать реальные примеры - тоже какие-то ввакуме.

Мб у кого есть реальные примеры использования этого хука? Если да, то почему вы НЕ смогли обойтись без него?

Comments

[iljaGolubev]

Ведь то же самое можно сделать и без использования этого хука.

- интересно посмотреть на вашу реализацию автофокуса на кастом элементе. Но вообще, да...
Если можно сделать без этого хука - оно должно быть сделано.

https://react.dev/reference/react/useImperativeHandle

Do not overuse refs. You should only use refs for imperative behaviors that you can’t express as props: for example, scrolling to a node, focusing a node, triggering an animation, selecting text, and so on.

If you can express something as a prop, you should not use a ref. For example, instead of exposing an imperative handle like { open, close } from a Modal component, it is better to take isOpen as a prop like . Effects can help you expose imperative behaviors via props.

[cocojambo1]

iljaGolubev, возьмем к примеру инпут. ))

Я просто использовал `forwardRef` и все, этот хук нам не пригодился. Но почему-то в официальной документации приведен именно этот пример. У меня уже идей нет, где этот хук может понадобиться. )

Пример без использования этого хука.

[iljaGolubev]

cocojambo1, слишком примитивный пример.
Достаточно вынести CustomInput в отдельный файл чтобы перестало работать. нет?

[cocojambo1]

iljaGolubev, А что от этого должно измениться? Правильно - ничего. Мы можем этот компонент хоть за три девять папок запихнуть и все равно будет работать.

Реакту - не горячо не холодно от того, где этот компонент находится (за исключением того, если он внутри компонента), тк мы обернули его в `forwardRef` и сделали все "по инструкции".

Answer 1

[Alexandroppolus]

Это может понадобиться, если в твоем компоненте используется какая-нибудь хрень, которой удобно управлять не через изменение пропсов (стандартный react-way), а через вызовы функций. Ну вот тот же пресловутый инпут или текстареа - у него есть штуки, которые не отобразились на пропсы, например выделение текста.

Соответственно, чтобы вызывать функции, нужен экземпляр - что-то вроде viewModel для твоего компонента. И тут два пути: либо ты вручную создаешь этот объект, просовываешь через проп, и компонент к нему "подключается", либо компонент сам создает сей объект и возвращает тебе, уже с помощью рефа. Вот useImperativeHandle реализует второй способ. При размонтировании, реф обнуляется, компонент "заметает следы".

Пример из более-менее известного - библиотека Формик
https://github.com/jaredpalmer/formik/blob/main/pa...
formikbag - тот самый "объект с методами". Он создается через хук useFormik, но конкретно здесь компонент Formik сам это сделал и отдал тебе