usePreserveCallback

useCallback을 사용하지 않은 콜백 함수라도 레퍼런스를 보존하여 불필요한 렌더링을 방지하는 Hook입니다.

Props

이름	타입	설명
callback	`(...args: any[]) => any`	보존할 콜백 함수

Return

레퍼런스가 보존된 콜백 함수

Usage

import { usePreserveCallback } from '@teamsparta/react';
 
function Example({ onSomeEvent }: { onSomeEvent: () => void }) {
  const preservedCallback = usePreserveCallback(onSomeEvent);
 
  useEffect(() => {
    preservedCallback();
  }, [preservedCallback]); // 콜백의 레퍼런스가 변경되어도 불필요한 리렌더링 방지
 
  return <div>예제 컴포넌트</div>;
}

Example

이벤트 핸들러 최적화

function EventHandler({ onChange }: { onChange: (value: string) => void }) {
  const handleChange = usePreserveCallback(onChange);
 
  useEffect(() => {
    const listener = (event: Event) => {
      handleChange(event.target.value);
    };
 
    element.addEventListener('change', listener);
    return () => element.removeEventListener('change', listener);
  }, [handleChange]); // onChange가 변경되어도 불필요한 이벤트 리스너 재등록 방지
 
  return <div>이벤트 핸들러 예제</div>;
}

타이머 콜백 최적화

function Timer({ onTick }: { onTick: () => void }) {
  const preservedOnTick = usePreserveCallback(onTick);
 
  useEffect(() => {
    const intervalId = setInterval(() => {
      preservedOnTick();
    }, 1000);
 
    return () => clearInterval(intervalId);
  }, [preservedOnTick]); // onTick이 변경되어도 타이머는 유지
 
  return <div>타이머 예제</div>;
}

주의사항

이 Hook은 콜백 함수의 레퍼런스는 보존하면서도 항상 최신 상태의 콜백을 실행합니다.
useCallback과 달리 의존성 배열이 필요하지 않습니다.
성능 최적화가 필요한 경우에만 사용하는 것을 권장합니다.

useMediaQuery useResizeObserver