Skip to content

Commit

Permalink
useDebouncedValue cleanup
Browse files Browse the repository at this point in the history
  • Loading branch information
bmingles committed Jan 26, 2024
1 parent aaea04b commit ce652c2
Show file tree
Hide file tree
Showing 4 changed files with 17 additions and 11 deletions.
2 changes: 1 addition & 1 deletion packages/components/src/modal/DebouncedModal.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,7 +28,7 @@ function DebouncedModal({
debounceMs,
isOpen = false,
}: DebouncedModalProps): JSX.Element {
const debouncedIsOpen = useDebouncedValue(isOpen, debounceMs);
const { value: debouncedIsOpen } = useDebouncedValue(isOpen, debounceMs);

return (
<>
Expand Down
5 changes: 4 additions & 1 deletion packages/jsapi-components/src/useCheckIfExistsValue.ts
Original file line number Diff line number Diff line change
Expand Up @@ -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());
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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
);
Expand Down
19 changes: 11 additions & 8 deletions packages/react-hooks/src/useDebouncedValue.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { useEffect, useMemo, useState } from 'react';
import { useEffect, useState } from 'react';

/**
* Debounces a value.
Expand All @@ -13,15 +13,18 @@ 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;
Expand Down

0 comments on commit ce652c2

Please sign in to comment.