Relative Content

Tag Archive for javascriptreactjsreact-hooksevent-handlingdom-events

Force React to rerender between processing simultaneous mouse events

Here is a basic example of the issue. A component contains two nested divs. We can keep track of the “depth” of the mouse position (0 if outside both divs, 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).