React useDropZone Hook: Build a File Drop Zone (2026)
Drag a file over a drop zone that has any child element inside it — an icon, a label, a preview thumbnail — and a hand-rolled isOver toggle starts flickering: true, false, true, false, as the cursor crosses from the container onto the child and back. The highlight border blinks the whole time the file is over the zone. The bug isn't in your event handler logic; it's in what dragenter and dragleave actually fire on.
useDropZone from @reactuses/core turns a DOM element into a file drop target with none of that flicker, plus a callback that hands you the dropped File[] directly. The internals are short enough to read in one sitting, so this post walks through the real bug it fixes and the real API, TypeScript-first.
The Manual Version, and Where It Frays
The obvious first attempt pairs dragenter/dragleave with a boolean:
