React Native: How to implement a search bar with debounce in React Native?

1import { useState, useCallback, useEffect } from "react";
2import { TextInput, FlatList, View, Text } from "react-native";
3
4function SearchableList() {
5  const [query, setQuery] = useState("");
6  const [results, setResults] = useState([]);
7  const [debouncedQuery, setDebouncedQuery] = useState("");
8
9  // Debounce effect
10  useEffect(() => {
11    const timer = setTimeout(() => {
12      setDebouncedQuery(query);
13    }, 500);
14
15    return () => clearTimeout(timer);
16  }, [query]);
17
18  // Search effect
19  useEffect(() => {
20    if (debouncedQuery) {
21      performSearch(debouncedQuery);
22    }
23  }, [debouncedQuery]);
24
25  return (
26    <View>
27      <TextInput
28        placeholder="Search..."
29        value={query}
30        onChangeText={setQuery}
31      />
32      <FlatList
33        data={results}
34        renderItem={({ item }) => <Text>{item.name}</Text>}
35        keyExtractor={(item) => item.id}
36      />
37    </View>
38  );
39}

1function useDebounce(value: string, delay: number) {
2  const [debouncedValue, setDebouncedValue] = useState(value);
3
4  useEffect(() => {
5    const handler = setTimeout(() => {
6      setDebouncedValue(value);
7    }, delay);
8
9    return () => clearTimeout(handler);
10  }, [value, delay]);
11
12  return debouncedValue;
13}