[260103] TIL

Today I Learned (2026-01-03)

검색할 때 Debounce 최적화 하기

클로저로 구현

const handleCloserInputChange = (() => {
  let time: number | null = null;

  return (e: ChangeEvent<HTMLInputElement>) => {
    if (time) clearTimeout(time);
    time = window.setTimeout(() => onSearch(e.target.value), 300);
  };
})();

• 컴포넌트 리렌더 시, 새로운 클로저가 만들어질 수 있음
• 리액트 수명주기와 분리됨, 리렌더/strict mode/ 동적 props에 취약

useRef로 구현

const debounceTime = useRef<number | null>(null);

const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
  if (debounceTime.current) clearTimeout(debounceTime.current);
  debounceTime.current = window.setTimeout(() => onSearch(e.target.value), 300);
};

• react 수명 주기에 속함
• cleanup 가능
• 최신 값 유지 가능
• concurrent/strict mode 대응