Force React to rerender between processing simultaneous mouse events
Here is a basic example of the issue. A component contains two nested div
s. We can keep track of the “depth” of the mouse position (0
if outside both div
s, 1
if inside the outer div
but outside the inner div
, 2
if inside the inner div
) by using useState
to store the current depth and creating two useCallback
-ed event handlers, one which increments the depth value and one which decrements it (then attaching these event handlers appropriately).