startTransition으로 Debounce

startTransition

React 18에서 새로 나온 기술인 startTransition 이란 메소드가 추가 되었다.

이 메소드를 요약하면 event의 우선순위를 정해준다. 예로 들면,

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputValue((e.target as HTMLInputElement).value);
      searchValueRef.current = (e.target as HTMLInputElement).value;
  };

input 창에 입력을 하면

 setInputValue((e.target as HTMLInputElement).value); //input 업데이트
 searchValueRef.current = (e.target as HTMLInputElement).value;// 자동완성 기능

차례대로 이벤트가 발생하는데, onChange 특성상 연속해서 발생하기 때문에,
이벤트가 연달아 일어나면서 블로킹이 일어날 가능성이 높아진다.
(자동완성은 데이터 패칭 -> 데이터 받아옴 -> 드롭다운 업데이트가 연달아 일어나서 무겁다)
그래서 이러한 상황을 막고자 디바운스를 걸어서 해결하고자 한다.

Debounce는 입력값이 변경될 때마다 연속적인 이벤트를 처리하지 않고, 일정 시간동안 대기하다가 마지막 이벤트 발생 후 한번만 처리하는 기법입니다. 이를 통해 입력 값 변경에 대한 불필요한 이벤트 발생을 방지하고, 성능을 개선할 수 있습니다.

  const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
    setInputValue((e.target as HTMLInputElement).value);
    startTransition(() => {
      searchValueRef.current = (e.target as HTMLInputElement).value;
    });
 
  };
  

startTransition을 사용하여서 searchValueRef.current을 지연하였다.
위처럼 작성하면, input창에 text 업데이트를 우선시하고,
자동완성 기능은 setinputValue가 멈추기 전까지 대기한다.

이를 통해 입력하고 있는 동안에는 input창 업데이트만 일어나고,
input 창 업데이트가 끝나면 자동완성 기능이 작동한다.
이를 통해 검색창에 대한 블로킹을 막고, 부드러운 UX를 제공해줄 수 있다.

마무리

예전부터 써보고 싶었던 기술이었다.
2월부터 기억해놓고 창고에 넣었다가 필요한 상황이 되면 꺼내쓰려고 아껴놨는데
이제서야 쓰게 되어서 맘이 편해진다.

참고자료
https://react.dev/reference/react/startTransition