Example of a React custom hooks for searching an api.

debounced-search.js

import axios from "axios";
import { useState } from "react";
import { useDebouncedCallback } from "use-debounce";

function useSearch() {
    const [value, setValue] = useState("");
    const [results, setResults] = useState([]);
    const [debouncedCallback] = useDebouncedCallback(value => {
        axios.get("/s/?q=" + value).then(res => {
            setResults(res.data.map(e => e.ref));
        });
    }, 300);
    function onChange(value) {
        setValue(value);
        debouncedCallback(value);
    }
    return [value, results, onChange];
}


// Usage
function SearchBar() {
    const [query, results, setQuery] = useSearch();
    return (
        <div>
            <input
                type="text"
                placeholder="Search"
                value={query}
                onChange={e => setQuery(e.target.value)}
            />
            {results.length > 0 && (
                <div>
                    {results.map(e => <a href={e}>{e}</a>))}
                </div>
            )}
        </div>
    );
}