debounce_functional_component.js

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

  const debouncedHandler = debounce((term) => {
    if (term) {
      axios
        .get(`https://ticker-2e1ica8b9.now.sh/keyword/${term}`)
        .then((res) => {
          setResults(res.data);
        });
    } else setResults([]);
  }, 500);

  const onInput = debounce((e) => {
    e.persist();
    debouncedHandler(e.target.value);
  }, 500);

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