Anında Arama — Müşteri "kira" Yazdı, Ekranda Neden "k" Sonuçları Var?

1
import { useEffect, useState } from 'react';
2

3
/** Returns `value` only after it has stayed the same for `delayMs`. */
4
export function useDebounced<T>(value: T, delayMs: number): T {
5
  const [settled, setSettled] = useState(value);
6
  useEffect(() => {
7
    const timer = setTimeout(() => setSettled(value), delayMs);
8
    return () => clearTimeout(timer); // typing again restarts the wait
9
  }, [value, delayMs]);
10
  return settled;
11
}

1
import { useEffect, useState } from 'react';
2
import type { Transaction } from '../api/types';
3

4
export function useTransactionSearch(query: string) {
5
  const [results, setResults] = useState<Transaction[]>([]);
6
  const [loading, setLoading] = useState(false);
7

8
  useEffect(() => {
9
    if (query.length < 2) {
10
      setResults([]);
11
      return;
12
    }
13
    const controller = new AbortController();
14
    setLoading(true);
15
    fetch(`/api/transactions?q=${encodeURIComponent(query)}`, { signal: controller.signal })
16
      .then((response) => response.json())
17
      .then((data: Transaction[]) => {
18
        setResults(data);
19
        setLoading(false);
20
      })
21
      .catch((error: unknown) => {
22
        if ((error as Error).name !== 'AbortError') setLoading(false);
23
      });
24
    // A newer query cancels this request, so its answer never reaches the screen.
25
    return () => controller.abort();
26
  }, [query]);
27

28
  return { results, loading };
29
}

1
import { useState } from 'react';
2
import { useDebounced } from './useDebounced';
3
import { useTransactionSearch } from './useTransactionSearch';
4

5
export function TransactionSearch() {
6
  const [text, setText] = useState('');
7
  const query = useDebounced(text.trim(), 300);
8
  const { results, loading } = useTransactionSearch(query);
9

10
  return (
11
    <section>
12
      <label htmlFor="tx-search">Hareketlerde ara</label>
13
      <input id="tx-search" value={text} onChange={(e) => setText(e.target.value)} />
14
      <p role="status">
15
        {loading ? 'Aranıyor…' : query.length >= 2 ? `“${query}” için ${results.length} sonuç` : 'En az iki harf yazın.'}
16
      </p>
17
      <ul>
18
        {results.map((tx) => (
19
          <li key={tx.id}>{tx.description}</li>
20
        ))}
21
      </ul>
22
    </section>
23
  );
24
}