Debounce

🔥 Debounce

• debounce는 dom 스크롤 또는 숫자 입력에 따른 api값 호출 같이 이벤트가 과도하게 많은 호출할 하는 경우 지정한 시간 동안 호출네 제약을 걸어 api 호출 과부하를 방지하는 기술이다.
• debounce는 호출시 지정된 시간 이후 호출된 가장 마지막 이벤트만 실행되는 기술이다. (지정된 시간이 0.5초이고, 0.5초내에 5번이 호출 되었다면 가장 마지막에 호출된 5번째 api만 서버로 호출한다는 의미)

---

문제
input에 값이 입력될 때마다 검색결과가 나오는 기능을 구현하고자 한다. 하지만 onChange가 이루어질 때마다 서버로 요청을 보내면 2가지 문제가 발생한다.

1. race condition에 따라 응답 순서가 엉켜 원하지 않는 검색결과를 보여줄 수 있다.
2. 서버에 과도한 요청을 보내 부하를 일으키는 원인이 될 수 있다.

두 가지 문제점을 해결하기 위해 Debouce를 구현하고자 한다.

lodash를 사용하여 Debouce 구현하기

import React, { useCallback, useMemo, useState } from "react";
import { debounce } from "lodash";
import { ICharacter } from "./types";

async function searchCharacter(keyword: string): Promise<ICharacter[]> {
  const response = await fetch(
    `https://swapi.dev/api/people?search=${keyword}`
  ).then((res) => res.json());
  return response.results;
}

function App() {
  const [keyword, setKeyword] = useState("");
  const [data, setData] = useState<ICharacter[]>([]);
  
  // 첫번째 인자로는 콜백함수, 두 번째 인자로는 시간(밀리세컨드)를 전달해준다.
  // searchCharacter가 1초 동안 실행되지 않는다면 그 때 요청을 보낸다.
  const handleSearch = useCallback(
    debounce((keyword: string) => {
      searchCharacter(keyword).then((res) => setData(res));
    }, 1000),
    []
  );

  const handleChange = useCallback(
    (e: React.ChangeEvent<HTMLInputElement>) => {
      e.preventDefault();
      setKeyword(e.target.value);
      handleSearch(e.target.value);
    },
    [handleSearch]
  );

  return (
    <div className="App">
      <form>
        <input type="text" onChange={handleChange} value={keyword} />
      </form>
      <ul>
        {data?.map((item, i) => (
          <li key={i}>{item.name}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

useCallback에 ESLint 경고 발생

React Hook useCallback received a function whose dependencies are unknown.
 Pass an inline function instead.eslintreact-hooks/exhaustive-deps

✅ 해결방법

useCallback → useMemo로 변경

const handleSearch = useMemo(
    () =>
      debounce((keyword: string) => {
        searchCharacter(keyword).then((res) => setData(res));
      }, 1000),
    []
  );