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:
@@ -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>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user