useCallback 의존성 누락

검색어를 변경해도 이전 검색어로 API가 호출됩니다. 버그를 찾으세요:

JSX

function SearchComponent() {
  const [query, setQuery] = useState('');
  const [results, setResults] = useState([]);

  const fetchResults = useCallback(() => {
    fetch(`/api/search?q=${query}`)
      .then(res => res.json())
      .then(data => setResults(data));
  }, []);

  useEffect(() => {
    if (query) fetchResults();
  }, [query, fetchResults]);

  return (
    <div>
      <input value={query} onChange={e => setQuery(e.target.value)} />
      {results.map(r => <p key={r.id}>{r.title}</p>)}
    </div>
  );
}

답변

useCallback의 의존성 배열에 query가 없어서 항상 초기 query를 캡처 onChange에서 직접 setQuery를 호출하면 안 됨 useCallback과 useEffect를 함께 사용하면 안 됨 fetch를 useCallback으로 감싸면 안 됨

로그인 후 제출하기