29:I[536515,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostViewTracker"] 2a:I[207142,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostBackButton"] 2b:I[390236,["/_next/static/immutable/chunks/1l88qfqr214lg.js","/_next/static/immutable/chunks/140lucvgzny1t.js","/_next/static/immutable/chunks/0h72irdf5jbkp.js","/_next/static/immutable/chunks/0uomrwa0d9fep.js","/_next/static/immutable/chunks/1_6tb_46uudug.js","/_next/static/immutable/chunks/1hk1clakksktf.js","/_next/static/immutable/chunks/0tos9h9-naode.js","/_next/static/immutable/chunks/304dqzeb6b0bn.js","/_next/static/immutable/chunks/1g-elbz1od49w.js","/_next/static/immutable/chunks/0u4n3l2vaan_d.js","/_next/static/immutable/chunks/3egm3pk02913o.js","/_next/static/immutable/chunks/2fwgykkvpr8o7.js","/_next/static/immutable/chunks/0zdgidr3ia25h.js","/_next/static/immutable/chunks/3jzx7fql_a9f-.js","/_next/static/immutable/chunks/3zcg661ahxixb.js"],"PostSummary"] 2f:I[948688,["/_next/static/immutable/chunks/1opgw09b2rf0r.js"],"IconMark"] 28:T552,{"@context":"https://schema.org","@type":"BlogPosting","headline":"React에서 useDebounce와 stale closure 문제 완벽 이해하기","description":"React에서 디바운스(debounce)를 구현할 때 흔히 발생하는 문제 중 하나가 stale closure와 타이머 관리 문제입니다.이번 글에서는 useDebounce 훅의 내부 구조와, 이를 안전하게 사용하는 방법, 그리고 useCallback과 callbackRef 패턴의 차이를...","image":["https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-usedebounce%EC%99%80-stale-closure-%EB%AC%B8%EC%A0%9C-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/opengraph-image"],"author":{"@type":"Person","name":"성창수"},"publisher":{"@type":"Organization","name":"3D Blog","logo":{"@type":"ImageObject","url":"https://3d-blog.vercel.app/opengraph-image"}},"datePublished":"2025-10-21T14:07:32.103Z","dateModified":"2026-08-17T08:23:04.666Z","mainEntityOfPage":{"@type":"WebPage","@id":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-usedebounce%EC%99%80-stale-closure-%EB%AC%B8%EC%A0%9C-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0"},"url":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-usedebounce%EC%99%80-stale-closure-%EB%AC%B8%EC%A0%9C-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0"}2c:T2740,

React에서 디바운스(debounce)를 구현할 때 흔히 발생하는 문제 중 하나가 stale closure와 타이머 관리 문제입니다.
이번 글에서는 useDebounce 훅의 내부 구조와, 이를 안전하게 사용하는 방법, 그리고 useCallback과 callbackRef 패턴의 차이를 실제 예제와 함께 정리합니다.

1. 문제 상황: 매 렌더마다 새로운 callback이 생성된다

우리가 흔히 작성하는 useDebounce 훅은 다음과 같습니다.

export function useDebounce(callback: () => void, delay: number) {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);

  return useCallback(() => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);
    timeoutRef.current = setTimeout(callback, delay);
  }, [callback, delay]);
}

callback이 dependency에 포함되어 있어, 렌더마다 새로운 함수 참조가 들어오면 debounce 함수도 새로 생성됩니다.
이때 이전 렌더에서 생성된 타이머는 여전히 브라우저에 살아있어 stale closure 문제가 발생할 수 있습니다.

문제 시각화

sequenceDiagram
    autonumber
    participant React1 as 렌더 1 (callback A)
    participant useDebounce1 as useDebounce 클로저 #1
    participant Timer1 as 타이머 #1
    participant React2 as 렌더 2 (callback B)
    participant useDebounce2 as useDebounce 클로저 #2
    participant Timer2 as 타이머 #2

    React1->>useDebounce1: call useDebounce(callback A, 300)
    useDebounce1->>Timer1: setTimeout(callback A, 300)

    React2->>useDebounce2: 렌더 2 발생 (callback B)
    useDebounce2->>Timer2: setTimeout(callback B, 300)

    Timer1-->>useDebounce1: callback A 실행 (stale)
    Timer2-->>useDebounce2: callback B 실행 (최신)

타이머는 브라우저 레벨에서 살아있지만, React 클로저 기준으로는 이미 끊어진 상태입니다.

2. 해결 1: handleSearch를 useCallback으로 감싸기

렌더마다 새 함수가 생성되지 않도록 callback을 메모이제이션합니다.

const handleSearch = useCallback(async () => {
  if (!isSearchMode) return setStocks(initialStocks);

  setLoading(true);
  try {
    const results = await searchStocks(searchTerm.trim());
    setStocks(results);
  } catch {
    setStocks([]);
  } finally {
    setLoading(false);
  }
}, [isSearchMode, searchTerm, initialStocks]);

const debouncedSearch = useDebounce(handleSearch, 300);

handleSearch 참조가 stable → useDebounce 내부도 stable
디바운스 타이머가 정상적으로 동작합니다.

3. 해결 2: callbackRef 패턴

useCallback을 쓰지 않고, 항상 최신 callback을 실행하게 만들 수도 있습니다.

export function useDebounce(callback: () => void, delay: number) {
  const timeoutRef = useRef<NodeJS.Timeout | null>(null);
  const callbackRef = useRef(callback);

  useEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  const debouncedFn = useCallback(() => {
    if (timeoutRef.current) clearTimeout(timeoutRef.current);

    timeoutRef.current = setTimeout(() => {
      callbackRef.current();
    }, delay);
  }, [delay]);

  return debouncedFn;
}

callbackRef는 렌더가 바뀌어도 동일한 객체를 참조합니다.
setTimeout 안에서 항상 최신 callback을 호출할 수 있어 stale closure 문제 해결
useCallback으로 감싸지 않아도 안정적

4. 요약

항목	문제	해결 방법
매 렌더마다 callback 재생성	debounce 타이머가 새로 생성 → 이전 타이머는 stale	`useCallback`으로 참조 안정화
타이머 안에서 stale state	옛날 클로저의 state 접근	`callbackRef` 패턴으로 최신 callback 보장
메모리 누수?	❌ 타이머는 브라우저가 GC 후 자동 해제	✅ 문제는 stale closure로 인한 중복 실행, 효율 문제

5. 실무 팁

API 호출 debounce: 검색 입력, 자동 완성 등
Throttle/Resize 이벤트: 동일 패턴 적용 가능
callbackRef + useCallback 혼합:
- 외부에 callback 전달 → useCallback
- 내부 타이머/비동기 → callbackRef

6. 결론

React에서 debounce를 구현할 때 stale closure 문제를 이해하는 것이 핵심입니다.

단순히 useDebounce를 사용한다고 안전하지 않습니다.
useCallback 또는 callbackRef 패턴을 통해 타이머와 callback 참조를 안정화해야 합니다.

이 패턴을 이해하면 React의 렌더링과 클로저, 비동기 타이머가 얽힌 문제를 깔끔하게 해결할 수 있습니다.

20:[["$","script",null,{"type":"application/ld+json","dangerouslySetInnerHTML":{"__html":"$28"}}],["$","$22",null,{"fallback":null,"children":["$","$L29",null,{"postId":16,"slug":"react에서-usedebounce와-stale-closure-문제-완벽-이해하기","categorySlug":"react"}]}],["$","div",null,{"className":"mx-4 max-w-4xl lg:mx-auto","children":[["$","$L2a",null,{"href":"/blog/category/react"}],["$","section",null,{"className":"relative mb-12 mt-0 px-4 py-8 sm:px-6 md:rounded-2xl md:px-8 md:overflow-hidden md:border md:border-[#ff9a3c]/20 md:bg-gradient-to-br md:from-[#2a1545]/90 md:via-[#1c0e38]/85 md:to-[#12082a]/80 md:shadow-[0_0_32px_rgba(255,154,60,0.1)] dark:md:border-[#3de8ff]/[0.15] dark:md:from-[#0a0618]/90 dark:md:via-[#070414]/90 dark:md:to-[#000008]/85 dark:md:shadow-[0_0_32px_rgba(61,232,255,0.08)]","children":[["$","div",null,{"className":"pointer-events-none absolute inset-0 z-0 hidden md:block","children":["$","div",null,{"className":"h-full w-full bg-gradient-to-tr from-[#8a4a68]/15 via-[#1c0e38]/20 to-[#ffc090]/10 blur-[2px] dark:from-cyan-900/20 dark:via-fuchsia-900/10 dark:to-cyan-800/10"}]}],["$","h1",null,{"className":"relative z-10 mb-4 text-3xl font-extrabold md:drop-shadow-sm dark:md:drop-shadow-[0_2px_8px_#7dd3fc55] text-[#ffe8d0] dark:text-[#c8e8ff]","children":"React에서 useDebounce와 stale closure 문제 완벽 이해하기"}],["$","div",null,{"className":"relative z-10 mb-6 flex items-center gap-3 text-xs text-[#d4a8c0]/85 dark:text-[#7ec8ff]/75","children":[["$","span",null,{"className":"font-mono","children":"성창수"}],["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"children":"2025-10-21"}],[["$","span",null,{"className":"opacity-60","children":"|"}],["$","span",null,{"className":"text-[#ffb870] dark:text-[#3de8ff]","children":"React"}]]]}],false,["$","div",null,{"className":"relative z-10 mb-2 min-h-[88px] p-2","children":["$","$22",null,{"fallback":["$","div",null,{"className":"mb-6 min-h-[88px]","aria-hidden":true}],"children":[["$","$L4",null,{"moduleIds":["3623811150574836874"]}],["$","$L2b",null,{"post":{"id":16,"title":"React에서 useDebounce와 stale closure 문제 완벽 이해하기","content":"$2c","updatedAt":"$D2026-08-17T08:23:04.666Z"}}]]}]}],"$L2d"]}],"$L2e"]}]] 23:null 27:[["$","title","0",{"children":"React에서 useDebounce와 stale closure 문제 완벽 이해하기"}],["$","meta","1",{"name":"description","content":"React에서 디바운스(debounce)를 구현할 때 흔히 발생하는 문제 중 하나가 stale closure와 타이머 관리 문제입니다.이번 글에서는 useDebounce 훅의 내부 구조와, 이를 안전하게 사용하는 방법, 그리고 useCallback과 callbackRef 패턴의 차이를..."}],["$","meta","2",{"name":"author","content":"성창수"}],["$","meta","3",{"name":"creator","content":"3D Blog"}],["$","meta","4",{"name":"publisher","content":"3D Blog"}],["$","meta","5",{"name":"robots","content":"index, follow"}],["$","meta","6",{"name":"googlebot","content":"index, follow, max-video-preview:-1, max-image-preview:large, max-snippet:-1"}],["$","link","7",{"rel":"canonical","href":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-usedebounce%EC%99%80-stale-closure-%EB%AC%B8%EC%A0%9C-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0"}],["$","meta","8",{"name":"google-site-verification","content":"txYmXq1GLSvBcoTz6-zWwFTe4Wl0bmJ1DYYi97AnAB0"}],["$","meta","9",{"property":"og:title","content":"React에서 useDebounce와 stale closure 문제 완벽 이해하기"}],["$","meta","10",{"property":"og:description","content":"React에서 디바운스(debounce)를 구현할 때 흔히 발생하는 문제 중 하나가 stale closure와 타이머 관리 문제입니다.이번 글에서는 useDebounce 훅의 내부 구조와, 이를 안전하게 사용하는 방법, 그리고 useCallback과 callbackRef 패턴의 차이를..."}],["$","meta","11",{"property":"og:url","content":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-usedebounce%EC%99%80-stale-closure-%EB%AC%B8%EC%A0%9C-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0"}],["$","meta","12",{"property":"og:site_name","content":"3D Blog"}],["$","meta","13",{"property":"og:locale","content":"ko_KR"}],["$","meta","14",{"property":"og:image","content":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-usedebounce%EC%99%80-stale-closure-%EB%AC%B8%EC%A0%9C-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","15",{"property":"og:image:type","content":"image/png"}],["$","meta","16",{"property":"og:image:width","content":"1200"}],["$","meta","17",{"property":"og:image:height","content":"630"}],["$","meta","18",{"property":"og:image:alt","content":"3D Blog Post"}],["$","meta","19",{"property":"og:type","content":"article"}],["$","meta","20",{"property":"article:published_time","content":"2025-10-21T14:07:32.103Z"}],["$","meta","21",{"property":"article:modified_time","content":"2026-08-17T08:23:04.666Z"}],["$","meta","22",{"property":"article:author","content":"성창수"}],["$","meta","23",{"name":"twitter:card","content":"summary_large_image"}],["$","meta","24",{"name":"twitter:creator","content":"성창수"}],["$","meta","25",{"name":"twitter:title","content":"React에서 useDebounce와 stale closure 문제 완벽 이해하기"}],["$","meta","26",{"name":"twitter:description","content":"React에서 디바운스(debounce)를 구현할 때 흔히 발생하는 문제 중 하나가 stale closure와 타이머 관리 문제입니다.이번 글에서는 useDebounce 훅의 내부 구조와, 이를 안전하게 사용하는 방법, 그리고 useCallback과 callbackRef 패턴의 차이를..."}],["$","meta","27",{"name":"twitter:image","content":"https://3d-blog.vercel.app/blog/category/react/post/react%EC%97%90%EC%84%9C-usedebounce%EC%99%80-stale-closure-%EB%AC%B8%EC%A0%9C-%EC%99%84%EB%B2%BD-%EC%9D%B4%ED%95%B4%ED%95%98%EA%B8%B0/opengraph-image-10g31z?ff75c0294565acbf"}],["$","meta","28",{"name":"twitter:image:alt","content":"3D Blog Post"}],["$","meta","29",{"name":"twitter:image:type","content":"image/png"}],["$","meta","30",{"name":"twitter:image:width","content":"1200"}],["$","meta","31",{"name":"twitter:image:height","content":"630"}],["$","link","32",{"rel":"icon","href":"/favicon.ico?favicon.43c1ha936bzt6.ico","sizes":"256x256","type":"image/x-icon"}],["$","$L2f","33",{}]]

React에서 useDebounce와 stale closure 문제 완벽 이해하기

댓글