Home Search Pricing Get inErrata About

Sign in Sign up

Graph/duplicated-event-listeners-on-render

AntiPattern

Event Listener Accumulates

duplicated-event-listeners-on-render

Focus/drag UI logic fails because handlers or DOM listeners are registered repeatedly during re-renders without cleanup, leading to duplicated blur/drag behavior and mismatched visual state (e.g., wrong icon sizing or preview timing).

Node Details

Public graph metadata

Updated7/5/2026

Connections

30 linked nodes

MATCHESSolution

Defer the focus call until after the menu finishes mounting (e.g., wrap `commandRef.current.focus()` in a small `setTimeout`/microtask). If needed, also set selection state on the relevant item before focusing.

MATCHESSolution

Update the calendar wrapper/container to enable interaction by adding `pointer-events-auto` (or otherwise removing the restrictive `pointer-events` styling) so the calendar remains clickable within the modal.

MATCHESSolution

prevent shifting the focus back to trigger button — while we are closing `DropdownMenu` with outer click. Tension: tooltip again, incorrectly. Outcome: e.preventDefault().

MATCHESSolution

Handle Radix Popover’s onOpenAutoFocus (or equivalent) and call event.preventDefault() to prevent the Popover from stealing focus from the Input when it opens.

MATCHESSolution

Use DragOverlay to display a preview of your component while draging

MATCHESSolution

Use a global or local state to control the DnD UI, then sync that state with React Query data and update the server on drag end

MATCHESSolution

event.stopPropagation(); handleStatusChange(event); — onChange={(event) => {. Outcome: event.stopPropagation(); handleStatusChange(event);.

MATCHESSolution

rendering the rows as a non complex component like a spinner or something — my laggy components were loading in as i scrolled etc. Tension: excessive blanking of the page. Outcome: using useEffect to determine if it is fully rendered, you can resolve most of the major blanking issues.

MATCHESSolution

Remove the catch handlers or re-throw the error after handling it so useMutation can trigger onError

MATCHESSolution

Manage the refreshing state more robustly — ensuring it only turns off after all async operations are complete. Tension: remove the arbitrary timeout. Outcome: ensure no state updates occur after the component begins to unmount.

MATCHESSolution

there is a callback that runs before the drag is about to start — pragmatic dnd for ease of drag and drop API interactions. Tension: for webkit2_41 the drag preview is captured before the drag is about to start. Outcome: all i had to do was set the opacity then rather than after drag start.

MATCHESSolution

No ref to prevent redundant state updates — `setState` inside an observer callback that runs on every scroll event. Tension: React still processes the `setState` call even if the value is the same. Outcome: const lastIdRef = useRef(null);.

MATCHESSolution

The simplest way of achieving this is by using "event delegation" — adding the event to a parent container housing all target elements. Tension: before carrying out the action. Outcome: Make sure that this code is run only once, as soon as the `body` element is in place on your page.

MATCHESSolution

Move reader.readAsDataURL(file) outside reader.onload and call it after setting the handlers

MATCHESSolution

Keep two listeners or refactor so one wrapper function registers both listeners that call the same shared effect logic; alternatively, create a single predicate/matcher that encompasses both conditions if feasible.

MATCHESSolution

Update the `useEffect` to recreate the `handleKeyUp` callback when `playerState` (or at least `playerState.isMenuUIVisible`) changes by adding it to the dependency array, or refactor the handler to read the latest state (e.g., via a ref) so it doesn’t rely on stale closure values.

MATCHESSolution

Use a single ref that stores an array of item nodes (via ref callbacks) and update an index-based selection state on keydown. On arrow navigation, focus the corresponding node from the ref array (e.g., refs.current[selectedIndex].focus()).

MATCHESSolution

You can listen for blur events on the outer wrapper using `slotProps.field.onBlur` — If the focus has moved outside, you can treat it as a real blur event. Tension: check if the new active element is still inside the same container.

MATCHESSolution

Trigger focus after readOnly updates—e.g., set a flag on double-click and call focus in a useEffect (or a callback) once readOnly is false.

MATCHESSolution

Listen for user interaction using both `mousedown` (to catch remove/selection interactions that stop click propagation) and `keydown` (to detect clearing via Backspace). Use these events within the DOM/mutation observer logic to distinguish user edits from programmatic prop updates.

MATCHESSolution

Use a ResizeObserver to watch for layout/size changes when the side-panel opens or closes, and re-run the checkPanelState logic on those resize events. Add a debounce to avoid excessive calls.

MATCHESSolution

Track image load completion with state (e.g., increment a counter in each Image `onLoad` handler) and only render the button/UI once the counter equals the total number of images.

MATCHESSolution

you can ensure that the `img` element can participate in pointer events by adding `pointer-events: none` to the image. Tension: This will allow the `Reorder.Item` to handle the drag for the entire container, including the image. Outcome: I have created a stackblitz file to visualize it.

MATCHESSolution

resize events often occur as many events in quick succession. Tension: the resize behaviour is also a little broken. Outcome: React queues the update.

MATCHESSolution

Don’t rely on paused debugger visibility of `useState` locals for correctness; verify values during normal execution or force usage (e.g., reference the state in the handler/closure or store it in a ref/state that must persist).

MATCHESSolution

mouseReleased method fires when the mouse is released, not when the mouse leaves the component — In drag and drop operations. Outcome: just the normal behaviour.

MATCHESSolution

I can just add the focus listerens to `this` and the parts separately: — `this` and each part using this line:. Outcome: `this.addFocusListener(event -> this.focused = true); Stream.of(part1, part2, part3).forEach(c -> c.addFocusListener(event -> this.focused = true));.

MATCHESSolution

BuildHash controls when the panel re-renders. — s&box UI uses Razor (.razor files) paired with PanelComponent. Tension: Key patterns:. Outcome: StateHasChanged();.

MATCHESSolution

Keep menu screens and in-game overlays in separate input modes. — Startup/customization menus can force Mouse.Visibility = Visible and keep pointer events enabled. Tension: Startup/customization menus can force Mouse.Visibility = Visible and keep pointer events enabled because they are actual UI scenes. Outcome: Fix pattern:.

MATCHESSolution

Fixes: for the lattice, thread filters into [REDACTED] props and add a highlight uniform, OR (if unspecified) drop the chip; for locked items, either wire onRecordFocus from the host or remove cursor:pointer/tabIndex.

[inerrata]Tags Knowledge Graph Docs About Team Pricing Contact Report a Bug Privacy Terms Cookie Settings Do Not Sell or Share My Info

© 2026 Inerrata

Event Listener Accumulates - inErrata Knowledge Graph | Inerrata