diff --git a/packages/react-devtools-shared/package.json b/packages/react-devtools-shared/package.json index e503f017fe71e..94f3f9411b0db 100644 --- a/packages/react-devtools-shared/package.json +++ b/packages/react-devtools-shared/package.json @@ -22,8 +22,6 @@ "jsc-safe-url": "^0.2.4", "json5": "^2.1.3", "local-storage-fallback": "^4.1.1", - "lodash.throttle": "^4.1.1", - "memoize-one": "^3.1.1", "react-virtualized-auto-sizer": "^1.0.23", "react-window": "^1.8.10" } diff --git a/packages/react-devtools-shared/src/backend/agent.js b/packages/react-devtools-shared/src/backend/agent.js index 886435c289f61..6900e4510d3f9 100644 --- a/packages/react-devtools-shared/src/backend/agent.js +++ b/packages/react-devtools-shared/src/backend/agent.js @@ -8,7 +8,6 @@ */ import EventEmitter from '../events'; -import throttle from 'lodash.throttle'; import { SESSION_STORAGE_LAST_SELECTION_KEY, SESSION_STORAGE_RELOAD_AND_PROFILE_KEY, @@ -483,7 +482,13 @@ export default class Agent extends EventEmitter<{ this._persistedSelection = null; this._persistedSelectionMatch = null; renderer.setTrackedPath(null); - this._throttledPersistSelection(rendererID, id); + // Throttle persisting the selection. + this._lastSelectedElementID = id; + this._lastSelectedRendererID = rendererID; + if (!this._persistSelectionTimerScheduled) { + this._persistSelectionTimerScheduled = true; + setTimeout(this._persistSelection, 1000); + } } // TODO: If there was a way to change the selected DOM element @@ -893,22 +898,25 @@ export default class Agent extends EventEmitter<{ this._bridge.send('unsupportedRendererVersion', rendererID); } - _throttledPersistSelection: any = throttle( - (rendererID: number, id: number) => { - // This is throttled, so both renderer and selected ID - // might not be available by the time we read them. - // This is why we need the defensive checks here. - const renderer = this._rendererInterfaces[rendererID]; - const path = renderer != null ? renderer.getPathForElement(id) : null; - if (path !== null) { - sessionStorageSetItem( - SESSION_STORAGE_LAST_SELECTION_KEY, - JSON.stringify(({rendererID, path}: PersistedSelection)), - ); - } else { - sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY); - } - }, - 1000, - ); + _persistSelectionTimerScheduled: boolean = false; + _lastSelectedRendererID: number = -1; + _lastSelectedElementID: number = -1; + _persistSelection: any = () => { + this._persistSelectionTimerScheduled = false; + const rendererID = this._lastSelectedRendererID; + const id = this._lastSelectedElementID; + // This is throttled, so both renderer and selected ID + // might not be available by the time we read them. + // This is why we need the defensive checks here. + const renderer = this._rendererInterfaces[rendererID]; + const path = renderer != null ? renderer.getPathForElement(id) : null; + if (path !== null) { + sessionStorageSetItem( + SESSION_STORAGE_LAST_SELECTION_KEY, + JSON.stringify(({rendererID, path}: PersistedSelection)), + ); + } else { + sessionStorageRemoveItem(SESSION_STORAGE_LAST_SELECTION_KEY); + } + }; } diff --git a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js index 7fefa837e2fc5..419fefc4ffcf8 100644 --- a/packages/react-devtools-shared/src/backend/views/Highlighter/index.js +++ b/packages/react-devtools-shared/src/backend/views/Highlighter/index.js @@ -7,8 +7,6 @@ * @flow */ -import memoize from 'memoize-one'; -import throttle from 'lodash.throttle'; import Agent from 'react-devtools-shared/src/backend/agent'; import {hideOverlay, showOverlay} from './Highlighter'; @@ -189,18 +187,12 @@ export default function setupHighlighter( event.stopPropagation(); } - const selectElementForNode = throttle( - memoize((node: HTMLElement) => { - const id = agent.getIDForHostInstance(node); - if (id !== null) { - bridge.send('selectElement', id); - } - }), - 200, - // Don't change the selection in the very first 200ms - // because those are usually unintentional as you lift the cursor. - {leading: false}, - ); + const selectElementForNode = (node: HTMLElement) => { + const id = agent.getIDForHostInstance(node); + if (id !== null) { + bridge.send('selectElement', id); + } + }; function getEventTarget(event: MouseEvent): HTMLElement { if (event.composed) { diff --git a/packages/react-devtools-shared/src/devtools/views/hooks.js b/packages/react-devtools-shared/src/devtools/views/hooks.js index 6d0afb5c0a0ca..f2debdfa8f580 100644 --- a/packages/react-devtools-shared/src/devtools/views/hooks.js +++ b/packages/react-devtools-shared/src/devtools/views/hooks.js @@ -7,7 +7,6 @@ * @flow */ -import throttle from 'lodash.throttle'; import { useCallback, useEffect, @@ -125,10 +124,8 @@ export function useIsOverflowing( const container = ((containerRef.current: any): HTMLDivElement); - const handleResize = throttle( - () => setIsOverflowing(container.clientWidth <= totalChildWidth), - 100, - ); + const handleResize = () => + setIsOverflowing(container.clientWidth <= totalChildWidth); handleResize();