[React] Debounce vs useTransition

목차

1. 개요

2. debounce와 useTransition 비교

---

개요

앞에서 debounce와 useTransition를 통해 성능 최적화를 학습했습니다.

특정 상황에서 debounce기법과 useTransition을  동작원리를 통해 성능이 개선된다는 이해했지만, 막상 다른 상황에는 어떤걸 적용하면 좋은지 약간의 혼동이 있어서 두 방법을 비교해서 정리하기로 했습니다.

---

debounce와 useTransition 비교

debounce기법과 useTransition 훅의 공통점은 무거운 동작을 나중에 또는 천천히 수행시켜주는 방법입니다.

하지만 '느리게 만든다'라는 개념으로 이해했기 때문에 헷갈립니다. 하지만 목적은 분명히 다릅니다.

 

debounce는 짧은 시간에 여러번 발생하는 이벤트를 묶어서 마지막 한번만 실행하도록 하여 빈번하게 실행되는 것을 방지해줍니다.

잦은 업데이트가 발생하는 특정 상태를 마지막 상태일때만 적용될 수 있도록 제어하는 역할을 합니다.

 

useTransition은 무거운 동작의 우선순위를 낮추어 사용자의 인터렉션이 방해되는것을 방지해줍니다.

이벤트 발생 후 무거운 동작이 수행되면서 사용자의 인터렉션(키보드 입력, 버튼 클릭 등..)의 동작이 방해되지 않도록 나중에 실행되도록 제어하는 역할을 합니다.

 

사용에 올바른 상황

debounce (이벤트 / API호출)

• api호출이 발생하는 이벤트가 빈번히 발생할때
• 스크롤 이벤트
• ID중복 체크

useTransition (상태 업데이트)

• 필터링
• 리스트 렌더링
• 무거운 계산

---

debounce와 useTransition을 함께 사용하는 올바른 예

debounce는 빈번한 이벤트를 방지하고, useTransition은 무거운 동작의 우선순위를 낮추는 목적으로 사용됩니다.

두 방법을 모두 사용해서 키워드 입력시 api 호출을 최소화 해보겠습니다.

 

import { useEffect, useState, useTransition } from "react";

function SearchWithEffectDebounce() {
  const [query, setQuery] = useState("");
  const [debouncedQuery, setDebounceValue] = useState("");
  const [results, setResults] = useState<string[]>([]);
  const [isPending, startTransition] = useTransition();

  // 1. debounce기법 사용
  useEffect(() => {
    if (!query) {
      setDebounceValue("");
      return;
    }

    const timer = setTimeout(() => {
      setDebounceValue(query);
    }, 500);

    return () => {
      clearTimeout(timer);
    };
  }, [query]);

  // 2. useTransition 훅 사용
  useEffect(() => {
    if (!debouncedQuery) return;

    const fetchData = async () => {
      const res = await fetch(`/api/search?q=${debouncedQuery}`);
      const data: string[] = await res.json();

      // 무거운 렌더링은 transition
      startTransition(() => {
        setResults(data);
      });
    };

    fetchData();
  }, [debouncedQuery]);

  return (
    <>
      <input
        value={query}
        onChange={(e) => setQuery(e.target.value)}
        placeholder="Search..."
      />

      {isPending && <p>결과 업데이트 중...</p>}

      <ul>
        {results.map((item) => (
          <li key={item}>{item}</li>
        ))}
      </ul>
    </>
  );
}

 

deboucne기법 사용

키워드 상태 query를 입력시 실제 조회할 키워드를 선택합니다.

상태 query가 업데이트 될때마다 사이드 이팩트로 처리하기 위한 useEffect가 동작하고 실제 조회할 키워드 상태 debounceValue를 업데이트 합니다

 

useTransition훅 사용

실제 조회할 키워드 상태 debounceValue를 가지고 api를 호출하고 결과 리스트를 렌더링합니다.

api를 호출하고 결과 리스트를 렌더링하는 동안, 사용자가 키워드를 입력할때 발생할 수 있는 버벅임을 방지하여 사용성을 최적화합니다.

---

참고

https://codeno-te.tistory.com/252

React의 useTransition 가이드 정리, 동작 흐름 확인해보기