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: update tests
  • Loading branch information
@Parkreiner
Parkreiner committed Jul 15, 2025
commit 264069e20df3acecf178c9ad22da9cab5827ecd1
40 changes: 29 additions & 11 deletions site/src/hooks/debounce.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -11,18 +11,18 @@ afterAll(() => {
jest.clearAllMocks();
});

describe(`${useDebouncedValue.name}`, () => {
function renderDebouncedValue<T = unknown>(value: T, time: number) {
return renderHook(
({ value, time }: { value: T; time: number }) => {
return useDebouncedValue(value, time);
},
{
initialProps: { value, time },
},
);
}
function renderDebouncedValue<T = unknown>(value: T, time: number) {
return renderHook(
({ value, time }: { value: T; time: number }) => {
return useDebouncedValue(value, time);
},
{
initialProps: { value, time },
},
);
}

describe(`${useDebouncedValue.name}`, () => {
it("Should immediately return out the exact same value (by reference) on mount", () => {
const value = {};
const { result } = renderDebouncedValue(value, 2000);
Expand Down Expand Up @@ -58,6 +58,24 @@ describe(`${useDebouncedValue.name}`, () => {
await jest.runAllTimersAsync();
await waitFor(() => expect(result.current).toEqual(true));
});

// Very important that we not do any async logic for this test
it("Should immediately resync without any render/event loop delays if timeout is zero", () => {
const initialValue = false;
const time = 5000;

const { result, rerender } = renderDebouncedValue(initialValue, time);
expect(result.current).toEqual(false);

// Just to be on the safe side, re-render once with the old timeout to
// verify that nothing has been flushed yet
rerender({ value: !initialValue, time });
expect(result.current).toEqual(false);

// Then do the real re-render we want
rerender({ value: !initialValue, time: 0 });
expect(result.current).toBe(true);
})
});

describe(`${useDebouncedFunction.name}`, () => {
Expand Down