Fix transaction pagination resetting to page 1 on Next click

The search debounce useEffect had `push` in its deps. Since useRouter()
returns a new instance each render, `push` was recreated on every
navigation, re-triggering the effect which called push({ search })
after 400ms — always deleting the page param and snapping back to 1.

Replace the useEffect debounce with a ref-based timer in the handler
so the debounce only fires when the user actually types.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
jerick
2026-05-25 17:46:54 +00:00
parent 344a4b8a46
commit 73e8f51936

View File

@@ -35,11 +35,15 @@ export function TransactionFilters({ accounts }: { accounts: AccountOption[] })
[pathname, router],
)
// Debounce search → URL
useEffect(() => {
const t = setTimeout(() => push({ search }), 400)
return () => clearTimeout(t)
}, [search, push])
const pushRef = useRef(push)
useEffect(() => { pushRef.current = push }, [push])
const searchTimer = useRef<ReturnType<typeof setTimeout> | null>(null)
function handleSearchChange(value: string) {
setSearch(value)
if (searchTimer.current) clearTimeout(searchTimer.current)
searchTimer.current = setTimeout(() => pushRef.current({ search: value }), 400)
}
function reset() {
setSearch('')
@@ -107,7 +111,7 @@ export function TransactionFilters({ accounts }: { accounts: AccountOption[] })
className="h-8 text-sm"
placeholder="Search descriptions…"
value={search}
onChange={(e) => setSearch(e.target.value)}
onChange={(e) => handleSearchChange(e.target.value)}
/>
</div>