Busca (SearchInput)
· Padrão Frontend
This page hasn't been translated to English yet — showing the original Portuguese content.
Campo de busca padrão das listas admin, em shared/ui/filtros/search-input.tsx.
Cliente ("use client"), com debounce de 350ms embutido para não disparar
uma request por tecla.
import { SearchInput } from "@/shared/ui/filtros/search-input";
const [termo, setTermo] = useState("");
<SearchInput valor={termo} onChange={setTermo} placeholder="Buscar usuários..." />
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
valor | string | — | Termo "assentado" (pós-debounce), vindo do estado pai. |
onChange | (valor: string) => void | — | Chamado após 350ms de inatividade. |
placeholder | string | "Buscar..." | Texto do placeholder. |
Como funciona
- O componente guarda o rascunho localmente (
rascunho) enquanto o usuário digita, e só chamaonChangeapós 350ms sem digitar. Assim a listagem (filtrada via React Query) não refaz fetch a cada tecla. valoré a fonte da verdade externa: ao mudar de fora (ex.: limpar o filtro), o rascunho é sincronizado de volta.- Visual:
input input-sm w-full max-w-xs, com íconeSearchde@/theme/icons.
Uso típico
Combine com a listagem paginada (useAdminList) passando o termo como
parâmetro de busca no params — ver Filtros
e Tabelas.
Leitura de apoio
- React Query — useAdminList (padrão do projeto) — listagem que o termo filtra.
- TanStack Query — Overview — debounce evita refetch por tecla (cache/deduplicação).
- MDN — Timers (debounce) — por que 350ms de inatividade antes do
onChange.
