Skip to main content

usePreservedCallback

주어진 콜백 함수의 참조를 유지하고, 컴포넌트 렌더링 사이에 재사용할 수 있도록 도와주는 커스텀 훅입니다.

이 훅은 특히 콜백 함수가 렌더링 중에 변경될 때 유용합니다. 불필요한 함수 생성을 방지하고 최적화하며, 최신 버전의 콜백 함수를 사용 할 수 있습니다.


Code​

🔗 실제 구현 코드 확인

Interface​

typescript
function usePreservedCallback<T extends (...args: any[]) => any>(
  callback?: T // default: noop
): T;

Usage​

as-is​

typescript
import React, { useEffect, useState } from "react";

const Example = () => {
  const [state, setState] = useState(0);

  const callback = () => {
    setState(state + 1);
  };

  useEffect(() => {
    callback(); // 무한 호출
  }, [callback]);

  return (
    <>{/* ... */}</>
  );
}

to-be (usePreservedCallback)​

typescript
import React, { useEffect, useState } from "react";
import { usePreservedCallback } from '@modern-kit/react';

const Example = () => {
  const [state, setState] = useState(0);

  const callback = usePreservedCallback(() => {
    setState(state + 1);
  });

  useEffect(() => {
    callback(); // 1회만 호출
  }, [callback]);

  return (
    <>{/* ... */}</>
  );
}