useDebouncedValue cleanup

#1747

Author: bmingles

packages/components/src/modal/DebouncedModal.tsx

@@ -28,7 +28,7 @@ function DebouncedModal({
   debounceMs,
   isOpen = false,
 }: DebouncedModalProps): JSX.Element {
-  const debouncedIsOpen = useDebouncedValue(isOpen, debounceMs);
+  const { value: debouncedIsOpen } = useDebouncedValue(isOpen, debounceMs);
 
   return (
     <>

packages/jsapi-components/src/useCheckIfExistsValue.ts

@@ -36,7 +36,10 @@ export function useCheckIfExistsValue(
   const tableUtils = useTableUtils();
 
   const [valueTrimmed, setValueTrimmed] = useState('');
-  const valueTrimmedDebounced = useDebouncedValue(valueTrimmed, debounceMs);
+  const { value: valueTrimmedDebounced } = useDebouncedValue(
+    valueTrimmed,
+    debounceMs
+  );
 
   const trimAndUpdateValue = useCallback((text: string) => {
     setValueTrimmed(text.trim());

packages/jsapi-components/src/useDebouncedViewportSelectionFilter.ts

@@ -44,7 +44,7 @@ export function useDebouncedViewportSelectionFilter<TItem, TValue>({
 
   // Debounce so user can rapidly select multiple items in a row without the
   // cost of updating the table on each change
-  const debouncedValuesSelection = useDebouncedValue(
+  const { value: debouncedValuesSelection } = useDebouncedValue(
     valuesSelection,
     DEBOUNCE_MS
   );

packages/react-hooks/src/useDebouncedValue.ts

@@ -1,4 +1,4 @@
-import { useEffect, useMemo, useState } from 'react';
+import { useEffect, useState } from 'react';
 
 /**
  * Debounces a value.
@@ -13,18 +13,22 @@ export function useDebouncedValue<T>(
   debounceMs: number
 ): { isDebouncing: boolean; value: T } {
   const [isDebouncing, setIsDebouncing] = useState(true);
-  const [debouncedValue, setDebouncedValue] = useState<T>(value);
+  const [debouncedValue, setDebouncedValue] = useState(value);
 
-  // Set isDebouncing to true immediately whenever the value changes. Using
-  // `useMemo` instead of `useEffect` so that state is never out of sync whenever
-  // value and / or debounceMs have changed.
-  useMemo(() => {
+  // Keep `isDebouncing` in sync with `value` and `debounceMs` by setting state
+  // during render instead of in `useEffect`
+  // https://react.dev/learn/you-might-not-need-an-effect#adjusting-some-state-when-a-prop-changes
+  const [previousValue, setPreviousValue] = useState(value);
+  const [previousDebounceMs, setPreviousDebounceMs] = useState(debounceMs);
+  if (value !== previousValue || debounceMs !== previousDebounceMs) {
     setIsDebouncing(true);
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [value, debounceMs]);
+    setPreviousValue(value);
+    setPreviousDebounceMs(debounceMs);
+  }
 
   useEffect(() => {
     let isCancelled = false;
+    setIsDebouncing(true);
 
     const timeoutId = setTimeout(() => {
       if (!isCancelled) {