useDebouncedValue

Mirrors a value, updating only once it has stopped changing for delay milliseconds — so a search field can render every keystroke while firing one query.

Usage

import { useDebouncedValue, Input } from 'panelui-native';

function Search() {
  const [query, setQuery] = useState('');
  const debounced = useDebouncedValue(query, 300);

  useEffect(() => {
    if (debounced) search(debounced);
  }, [debounced]);

  return <Input value={query} onChangeText={setQuery} placeholder="Search" />;
}

The input stays fully responsive because it reads query; only the effect waits on debounced.

Examples

Filtering a list

No network involved — this just keeps a long list from re-filtering on every keystroke.

const [query, setQuery] = useState('');
const debounced = useDebouncedValue(query, 200);

const results = useMemo(
  () => items.filter((item) => item.name.toLowerCase().includes(debounced.toLowerCase())),
  [items, debounced]
);

<Input value={query} onChangeText={setQuery} placeholder="Filter" />;
<FlatList data={results} renderItem={renderItem} />;

Showing that a query is pending

Compare the live value against the debounced one to tell the user something is about to happen.

const [query, setQuery] = useState('');
const debounced = useDebouncedValue(query, 400);
const pending = query !== debounced;

<InputGroup>
  <InputGroup.Input value={query} onChangeText={setQuery} />
  <InputGroup.Suffix isDecorative>
    {pending ? <Spinner size="sm" /> : null}
  </InputGroup.Suffix>
</InputGroup>;

Autosaving a draft

const [draft, setDraft] = useState(note.body);
const debounced = useDebouncedValue(draft, 1000);

useEffect(() => {
  if (debounced !== note.body) save(debounced);
}, [debounced]);

Debouncing something other than a string

It is generic, so any value works — including objects, as long as their identity is stable.

const debouncedFilters = useDebouncedValue(filters, 250);

API Reference

Parameter	Type	Default	Description
`value`	`T`	—	The value to mirror.
`delay`	`number`	`300`	Milliseconds of quiet before updating.

Returns the debounced T.