#2036·hooks

`useDrop` child trigger avoidance does not work reliably

Author: nh2Created Jan 28, 2023Updated May 20, 2026

In the code there's a helpful link (great!) that explains what useDrop() does to avoid the child dragleave problem:

https://github.com/alibaba/hooks/blob/375cc75646a3bcd02cde157739e35868833f0a04/packages/hooks/src/useDrop/index.ts#L22

That link expanded: https://stackoverflow.com/questions/7110353/html5-dragleave-fired-when-hovering-a-child-element/26459269#26459269

So apparently the code is trying to guard against duplicate events when the drag moves over child elements (nice). I think it's not documented on https://ahooks.js.org/hooks/use-drop though (would be good if it were).

However, this approach does not work well.

As one commenter says:

This doesn't help tho for the problem of duplicate dragenter events

Indeed, see this example:

https://codesandbox.io/s/basic-usage-forked-z966n5

When you drag in between multiple child elements, onDragEnter is fired repeatedly; video:

https://user-images.githubusercontent.com/399535/215287335-668f3d8f-d79a-4f95-b79a-3aa82490668e.mp4

This can result in flickering if you do GUI operations in onDragEnter.