fix(diagnostics): a pivot or Back applies the search text at once

The query read the typing-debounced search, so for 300 ms after a jump it mixed the new view's
filters with the old view's text and fetched rows neither view shows. useDebounced takes a settle key
whose change applies the value immediately.
This commit is contained in:
2026-09-19 05:47:16 +02:00
parent 49fe56b6e7
commit 2d5bd275fa
4 changed files with 56 additions and 2 deletions
+35
View File
@@ -0,0 +1,35 @@
// @vitest-environment jsdom
import { afterEach, describe, expect, it, vi } from "vitest";
import { act, renderHook } from "@testing-library/react";
import { useDebounced } from "./useDebounced";
afterEach(() => {
vi.useRealTimers();
});
describe("useDebounced", () => {
it("hands a value on once it stopped changing for the delay", () => {
vi.useFakeTimers();
const { result, rerender } = renderHook(({ v }) => useDebounced(v, 300), {
initialProps: { v: "a" },
});
rerender({ v: "ab" });
expect(result.current).toBe("a");
act(() => vi.advanceTimersByTime(300));
expect(result.current).toBe("ab");
});
it("takes the value at once when `settle` changes — a jump, not typing", () => {
vi.useFakeTimers();
const { result, rerender } = renderHook(({ v, s }) => useDebounced(v, 300, s), {
initialProps: { v: "", s: 0 },
});
rerender({ v: "boom", s: 1 });
expect(result.current).toBe("boom");
rerender({ v: "boomx", s: 1 });
expect(result.current).toBe("boom");
act(() => vi.advanceTimersByTime(300));
expect(result.current).toBe("boomx");
});
});
+11 -1
View File
@@ -3,11 +3,21 @@ import { useEffect, useState } from "react";
// Returns `value` after it has stopped changing for `delay` ms. Lets a text input stay
// responsive (it owns the immediate value) while the query it drives only re-runs once the
// user pauses — so we don't refetch the feed on every keystroke.
export function useDebounced<T>(value: T, delay = 300): T {
//
// `settle`: a change of it takes `value` at once. A value that did not come from typing (Back
// restoring a search, a pivot clearing one) has no keystrokes to wait out, and the lag only ran a
// query mixing the new filters with the old text (deep-review 2026-09-19).
export function useDebounced<T>(value: T, delay = 300, settle?: unknown): T {
const [debounced, setDebounced] = useState(value);
const [settled, setSettled] = useState(settle);
useEffect(() => {
const id = window.setTimeout(() => setDebounced(value), delay);
return () => window.clearTimeout(id);
}, [value, delay]);
if (settle !== settled) {
setSettled(settle);
setDebounced(value);
return value;
}
return debounced;
}