useImperativeHandle | Как работает? Для чего нужен? Разбираемся на примерах

Видео получилось очень комплементарным так что напишу тут:
Используйте этот подход с осторожностью!

Основа вашего приложения должна быть написана в декларативном стиле. Используйте этот хук только при работе с неуправляемыми компонентами, и если чётко понимаете, почему эти компоненты должны быть неуправляемыми

Подписывайтесь на мой telegram канал:

Примеры кода:

[АнатолийГорбов-оь]

самое лучшее и понятное объяснение этого хука что я видел)

[vladimirgaletinko]

Интересное решение второго примера. Первое что в голову приходит это решить такую задачу с помощью event emitter.

[NataxaDikaya]

Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?

[u-up]

класс! В названии опечатка. Спасибо за контент

[ReferenceError]

Здравствуйте! Спасибо вам за контент)
Не могли ли бы сделать ролик по тестированию? Сейчас начинаю писать новый проект и хочу покрыть его тестами. Но пока не понимаю, какой вид теста нужен в конкретном случае.
Авторизация, например. Нужно ли в этом кейсе писать E2E, который проверяет весь сценарий? Достаточно ли Unit на запись токена LS / STM? Или надо написать оба варианта?
Заранее спасибо!)

[CJIueHb]

Все-таки с неймингом надо быть аккуратнее, особенно, когда тема непростая. Я, конечно, сам виноват, что забыл про существование колбек рефов, но это не отменяет того факта, что переменная *node* путает еще больше.
_methodsRef={(node) => (childNodesRef.current[i] = node)}_
Это никакая не *node* (в контексте Tree или TreeNode), это скорее *childMethodsRefCurrent* . Тоже далеко не идеально, надо бы получше подумать.

[NikVolkov]

Объяснение хорошее. Однако, значительно понятнее, когда под объяснение идёт написание кода с нуля.

[BOCbMOU]

Откровенно говоря, не очень понимаю смысл существования данного хука. Он равносилен прямому присваиванию значения рефу:
methodsRef.current = { ... }
Разве что обёрнутого в юзЭффект.

[shinauri]

Здравствуйте, Спасибо за контент.
Я изменил строки в TreeNode:

{hasChildren && isExpanded && (
<ul>
{node.children?.map((childNode, i) => (
<TreeNode
key={childNode.id}
node={childNode}
methodsRef={(node) => (childNodesRef.current[i] = node)}
/>
))}
</ul>
)}

на

{hasChildren && isExpanded && (
<Tree
data={node.children!}
methodsRef={(node) =>
/>
)}

все работает все Ок! как вы думаете есть подводные камни в этой реализации?

[gaziev__]

Братан, хорош, давай, давай, вперёд! Контент в кайф, можно ещё? Вообще красавчик! Можно вот этого вот почаще?