debounce_hooks.js

import React from "react";
import "./styles.css";
import axios from "axios";
import { useDebouncedCallback } from "use-debounce";

const App = () => {
  const [results, setResults] = React.useState([]);

  const debounced = useDebouncedCallback((term) => {
    axios.get(`https://ticker-2e1ica8b9.now.sh/keyword/${term}`).then((res) => {
      setResults(res.data);
    });
  }, 500);

  return (
    <div className="App">
      <h1>Search Stock Ticker</h1>
      <input type="text" onChange={(e) => debounced.callback(e.target.value)} />
      <div className="Results">
        {results.map((r) => (
          <div>
            {r.name} [{r.symbol}]
          </div>
        ))}
      </div>
    </div>
  );
};

export default App;