useRafBatched (rAF Coalescing Hook)

#19PerformanceMedium

useRafBatched (rAF Coalescing Hook)

useRafBatched — 고빈도 호출을 rAF 경계에 묶기

스크롤/마우스무브/입력 같은 고빈도 이벤트로 함수를 부르면 한 프레임에 100번도 실행됩니다. 화면은 60fps라 한 프레임당 1번 이상 실행해도 눈에 보이는 차이가 없는데 CPU만 잡아먹습니다. requestAnimationFrame 으로 같은 프레임의 호출을 묶어 마지막 args로 1번만 실행하는 훅을 만드세요.

요구사항

useRafBatched(callback) 은 "동일 시그니처의 batched 함수" 를 반환
같은 frame 안에서 batched 함수를 N번 호출해도 원 callback 은 다음 rAF tick에 1번만 실행됨
실행 시 전달되는 args 는 마지막 호출의 args
rAF tick이 지나면 다음 호출은 새 batch가 시작됨
컴포넌트 unmount 시 pending rAF 가 있으면 cancelAnimationFrame 으로 정리 (메모리 누수 방지)

시그니처

function useRafBatched<T extends (...args: any[]) => void>(callback: T): T;

힌트

useRef 로 pending rAF id + 마지막 args 저장
반환된 함수: 마지막 args 갱신 + (pending이 없으면) requestAnimationFrame(() => { callback(...lastArgs); reset; })
의존성: useCallback 으로 안정적 reference

학습 포인트

requestAnimationFrame 을 throttle/coalesce 메커니즘으로 활용
React에서 setState 폭주를 한 프레임에 1번으로 묶기 (스크롤 인디케이터, drag 좌표 등)
useRef 를 통한 "렌더 트리거 없는 상태" 보관 패턴

import { useCallback, useEffect, useRef, useState } from 'react';

export function useRafBatched<T extends (...args: any[]) => void>(callback: T): T {
  // TODO:
  //   1) useRef 로 pending rafId (또는 null), latestArgs, latestCallback 저장
  //   2) callback이 바뀔 때마다 ref 갱신 (stale closure 방지)
  //   3) 반환 함수: latestArgs 갱신 → 이미 pending이면 return → 아니면 rAF schedule
  //   4) rAF tick: latestCallback(...latestArgs!) 호출 후 rafId/args 초기화
  //   5) useEffect cleanup: rafId 있으면 cancelAnimationFrame
  return ((..._args: any[]) => {
    throw new Error('Not implemented');
  }) as T;
}

export function ScrollIndicator() {
  const [percent, setPercent] = useState(0);
  const update = useRafBatched((p: number) => setPercent(p));

  return (
    <div
      data-testid="scroller"
      style={{ height: 400, overflow: 'auto' }}
      onScroll={(e) => {
        const el = e.currentTarget;
        const p = Math.round((el.scrollTop / (el.scrollHeight - el.clientHeight)) * 100);
        update(p);
      }}
    >
      <div style={{ height: 2000 }}>
        <p data-testid="percent">{percent}%</p>
        <p>스크롤 해보세요. percent 업데이트는 한 프레임당 1번으로 묶입니다.</p>
      </div>
    </div>
  );
}

Open Sandbox

Sandpack 로드 중…

import { useCallback, useEffect, useRef, useState } from 'react';

export function useRafBatched<T extends (...args: any[]) => void>(callback: T): T {
  // TODO:
  //   1) useRef 로 pending rafId (또는 null), latestArgs, latestCallback 저장
  //   2) callback이 바뀔 때마다 ref 갱신 (stale closure 방지)
  //   3) 반환 함수: latestArgs 갱신 → 이미 pending이면 return → 아니면 rAF schedule
  //   4) rAF tick: latestCallback(...latestArgs!) 호출 후 rafId/args 초기화
  //   5) useEffect cleanup: rafId 있으면 cancelAnimationFrame
  return ((..._args: any[]) => {
    throw new Error('Not implemented');
  }) as T;
}

export function ScrollIndicator() {
  const [percent, setPercent] = useState(0);
  const update = useRafBatched((p: number) => setPercent(p));

  return (
    <div
      data-testid="scroller"
      style={{ height: 400, overflow: 'auto' }}
      onScroll={(e) => {
        const el = e.currentTarget;
        const p = Math.round((el.scrollTop / (el.scrollHeight - el.clientHeight)) * 100);
        update(p);
      }}
    >
      <div style={{ height: 2000 }}>
        <p data-testid="percent">{percent}%</p>
        <p>스크롤 해보세요. percent 업데이트는 한 프레임당 1번으로 묶입니다.</p>
      </div>
    </div>
  );
}

Open Sandbox