useDebounce

import { useDebounce } from '@dwarvesf/react-hooks'

function Example() {
  // Usage
  function App() {
    // State and setters for ...
    // Search term
    const [searchTerm, setSearchTerm] = useState('')
    // API search results
    const [results, setResults] = useState([])
    // Searching status (whether there is pending API request)
    const [isSearching, setIsSearching] = useState(false)
    // Debounce search term so that it only gives us latest value ...
    // ... if searchTerm has not been updated within last 500ms.
    // The goal is to only have the API call fire when user stops typing ...
    // ... so that we aren't hitting our API rapidly.
    const debouncedSearchTerm = useDebounce(searchTerm, 500)
    // Effect for API call
    useEffect(
      () => {
        if (debouncedSearchTerm) {
          setIsSearching(true)
          searchCharacters(debouncedSearchTerm).then((results) => {
            setIsSearching(false)
            setResults(results)
          })
        } else {
          setResults([])
          setIsSearching(false)
        }
      },
      [debouncedSearchTerm], // Only call effect if debounced search term changes
    )
    return (
      <Stack direction="column" spacing="10px">
        <Input
          placeholder="Search repositories"
          onChange={(e) => setSearchTerm(e.target.value)}
        />
        {isSearching && <Spinner size="sm" />}
        {results.length > 0 && (
          <Box>
            <UnorderedList pr="20px">
              {results.map((result) => (
                <ListItem key={result.id}>{result.name}</ListItem>
              ))}
            </UnorderedList>
          </Box>
        )}
      </Stack>
    )
  }
  // API search function
  function searchCharacters(search) {
    const apiKey = 'f9dfb1e8d466d36c27850bedd2047687'
    return fetch(
      `https://api.github.com/search/repositories?per_page=5&q=${search}`,
      {
        method: 'GET',
      },
    )
      .then((r) => r.json())
      .then((r) => r.items)
      .catch((error) => {
        console.error(error)
        return []
      })
  }
  return <App />
}