fix: debounce marketplace search to avoid per-keystroke filtering work#347
Merged
calvadev merged 1 commit intoshopstr-eng:mainfrom Apr 6, 2026
Merged
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.
|
@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.
This PR improves Marketplace search performance by debouncing the search query so product filtering doesn’t run on every keystroke (addresses #346).
Changes:
- Added a reusable
useDebounceReact hook. - Updated Marketplace search to pass a debounced query into filtering/display logic.
Reviewed changes
Copilot reviewed 2 out of 2 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
| utils/hooks/useDebounce.ts | Introduces a generic debounce hook to delay propagating rapidly changing values. |
| components/home/marketplace.tsx | Switches product filtering input from immediate search state to a debounced value (300ms). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
Contributor
|
LGTM!! |
nayan9617
force-pushed
the
fix/search-debounce-marketplace
branch
from
2d17c11 to
72f6793
Compare
calvadev
approved these changes
Apr 6, 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 improves Marketplace search performance by debouncing the search query before it reaches filtering logic.
Addresses #346
Problem
Right now, search filtering is triggered on every keystroke.
Typing a single word like bitcoin can cause repeated filter executions for intermediate values, which is unnecessary compute on larger product sets and becomes even more important once relay-side search gets integrated.
Root Cause
The Marketplace search state was passed directly into product filtering, so every keypress immediately triggered a full filter cycle.
What Changed
Added a reusable debounce hook in useDebounce.ts
Updated Marketplace search wiring in marketplace.tsx to use a debounced query value for filtering.
Kept typing UX unchanged: input still updates instantly, while filtering now happens after a short pause.
Behaviour Change
Before: Filter logic runs on each keypress.
After: Filter logic runs after the user pauses typing (300ms debounce window), reducing unnecessary repeated executions.
Why This Is Safe
This change only affects when filtering runs, not how matching works.
Existing search matching behaviour (title/summary/naddr/npub parsing) remains intact in display-products.tsx
Validation
Ran type checks successfully.
Ran targeted search/filter test: display-products.test.tsx