Skip to content

fix(site): speed up state syncs and validate input for debounce hook logic #18877

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 10 commits into from
Jul 17, 2025
Merged

fix(site): speed up state syncs and validate input for debounce hook logic #18877

Changes from 1 commit
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
9f35d9b
fix(site): speed up state syncs and add input validation for debounce…
Parkreiner Jul 15, 2025
01850ca
fix: shrink diff
Parkreiner Jul 15, 2025
264069e
fix: update tests
Parkreiner Jul 15, 2025
9cd1c57
fix: add even more tests
Parkreiner Jul 15, 2025
af376a2
fix: remove default type parameter
Parkreiner Jul 15, 2025
9ca576b
refactor: move test harness functions back to old spots
Parkreiner Jul 15, 2025
11217cb
fix: remove bad variable name
Parkreiner Jul 15, 2025
4266b85
fix: update formatting again
Parkreiner Jul 15, 2025
b9b5c9f
Merge branch 'main' into mes/debounce-fix
Parkreiner Jul 17, 2025
c25cc8f
fix: apply feedback
Parkreiner Jul 17, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
fix: shrink diff
  • Loading branch information
@Parkreiner
Parkreiner committed Jul 15, 2025
commit 01850ca9f762d21a894e7f9b92127ed312ad44be
10 changes: 5 additions & 5 deletions site/src/hooks/debounce.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,25 +91,25 @@ export function useDebouncedValue<T>(value: T, debounceTimeoutMs: number): T {
);
}

const [debounced, setDebounced] = useState(value);
const [debouncedValue, setDebouncedValue] = useState(value);

// If the debounce timeout is ever zero, synchronously flush any state syncs.
// Doing this mid-render instead of in useEffect means that we drastically cut
// down on needless re-renders, and we also avoid going through the event loop
// to do a state sync that is *intended* to happen immediately
if (value !== debounced && debounceTimeoutMs === 0) {
setDebounced(value);
if (value !== debouncedValue && debounceTimeoutMs === 0) {
setDebouncedValue(value);
}
useEffect(() => {
if (debounceTimeoutMs === 0) {
return;
}

const timeoutId = window.setTimeout(() => {
setDebounced(value);
setDebouncedValue(value);
}, debounceTimeoutMs);
return () => window.clearTimeout(timeoutId);
}, [value, debounceTimeoutMs]);

return debounced;
return debouncedValue;
}