perf: add useDebounce hook and apply to marketplace search#357
Merged
calvadev merged 4 commits intoshopstr-eng:mainfrom Apr 7, 2026
Merged
perf: add useDebounce hook and apply to marketplace search#357calvadev merged 4 commits intoshopstr-eng:mainfrom
calvadev merged 4 commits intoshopstr-eng:mainfrom
Conversation
…arch Typing felt fine, but we were recalculating product matches on every single keypress.\n\nThis adds a tiny debounce hook and routes marketplace filtering through a 300ms debounced query so we only run filtering once the user pauses. It keeps input UX the same, but avoids unnecessary work now and prevents noisy relay calls later when search is wired remotely.
Added a focused test suite for useDebounce with fake timers:\n- immediate initial value\n- no early update before delay\n- update exactly after delay\n- rapid update cancellation behavior\n- generic type support with number values\n\nThis keeps the debounce behavior documented and protects it from regressions in future search changes.
|
@nayan9617 is attempting to deploy a commit to the shopstr-eng Team on Vercel. A member of the Team first needs to authorize it. |
Contributor
There was a problem hiding this comment.
Pull request overview
Note
Copilot was unable to run its full agentic suite in this review.
Adds unit test coverage for a useDebounce hook and wires the hook into marketplace search to debounce filtering.
Changes:
- Added
useDebouncehook implementation (utils/hooks/useDebounce.ts) - Added Jest hook tests covering timing + cancellation semantics (
utils/hooks/__tests__/useDebounce.test.ts) - Switched marketplace search prop to use a debounced value (
components/home/marketplace.tsx)
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| utils/hooks/useDebounce.ts | Introduces the debouncing hook used by UI code. |
| utils/hooks/tests/useDebounce.test.ts | Adds timer-based unit tests to lock in debounce behavior. |
| components/home/marketplace.tsx | Applies the debounce hook to marketplace search input before filtering. |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Co-authored-by: Copilot <175728472+Copilot@users.noreply.github.com>
GautamBytes
changed the title
Contributor
|
LGTM!! |
calvadev
approved these changes
Apr 7, 2026
calvadev
approved these changes
Apr 7, 2026
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
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
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.
This PR adds a reusable useDebounce hook and integrates it into the marketplace search to reduce per-keystroke filtering overhead.
What changed:
utils/hooks/useDebounce.ts- Generic debounce hook with proper cleanuputils/hooks/__tests__/useDebounce.test.ts- Unit tests covering:components/home/marketplace.tsx- Applied 300ms debounce to selectedSearchImpact:
Related:
Validation: