fix(site): speed up state syncs and validate input for debounce hook logic #18877
Conversation
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Parkreiner
commented
Jul 15, 2025
| value: T, | ||
| debounceTimeMs: number, | ||
| ): T { | ||
| export function useDebouncedValue<T>(value: T, debounceTimeoutMs: number): T { |
There was a problem hiding this comment.
Removed the default parameter here because if you, the user of the hook, don't know the type of a value you're trying to debounce, you're probably doing something really wrong
Parkreiner
commented
Jul 15, 2025
| ); | ||
| } | ||
|
|
||
| const timeoutIdRef = useRef<number | undefined>(undefined); |
There was a problem hiding this comment.
Updated ref type to match the type used by the browser's setTimeout
Parkreiner
commented
Jul 15, 2025
| @@ -12,7 +12,7 @@ afterAll(() => { | |||
| }); | |||
|
|
|||
| describe(`${useDebouncedValue.name}`, () => { | |||
| function renderDebouncedValue<T = unknown>(value: T, time: number) { | |||
| function renderDebouncedValue<T>(value: T, time: number) { | |||
There was a problem hiding this comment.
Default type parameter removed to match new type signature for the main hook
aslilac
approved these changes
Jul 15, 2025
site/src/hooks/debounce.test.ts
Outdated
| @@ -12,7 +12,7 @@ afterAll(() => { | |||
| }); | |||
|
|
|||
| describe(`${useDebouncedValue.name}`, () => { | |||
There was a problem hiding this comment.
Suggested change
| describe(`${useDebouncedValue.name}`, () => { | |
| describe(useDebouncedValue.name, () => { |
I know you didn't change this line, but just noticed
site/src/hooks/debounce.ts
Outdated
| ): UseDebouncedFunctionReturn<Args> { | ||
| if (!Number.isInteger(debounceTimeoutMs) || debounceTimeoutMs < 0) { | ||
| throw new Error( | ||
| `Provided debounce value ${debounceTimeoutMs} must be a non-negative integer`, |
There was a problem hiding this comment.
Provided debounce value -1 must be a non-negative integer
I'm not sure this wording makes much sense. how about something like...
Suggested change
| `Provided debounce value ${debounceTimeoutMs} must be a non-negative integer`, | |
| `Invalid value ${debounceTimeoutMS} for debounceTimeoutMs. Value must be greater than or equal to zero.`, |
site/src/hooks/debounce.ts
Outdated
| export function useDebouncedValue<T>(value: T, debounceTimeoutMs: number): T { | ||
| if (!Number.isInteger(debounceTimeoutMs) || debounceTimeoutMs < 0) { | ||
| throw new Error( | ||
| `Provided debounce value ${debounceTimeoutMs} must be a non-negative integer`, |
Parkreiner
changed the title
Sign up for free
to subscribe to this conversation on GitHub.
Already have an account?
Sign in.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
No issue to link – I'm basically pushing some updates upstream from the version of the hook I copied over for the Registry website.
Changes made
useDebouncedValueto flush state syncs immediately if timeout value is0