usePreservedCallback

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

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

Interface

const usePreservedCallback: <T extends (...args: any[]) => any>(
  callback: T
) => (...args: any[]) => any;

Usage

as-is

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)

import React, { useEffect, useState } from "react";
import { usePreservedCallback } from '@devgrace/react';

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

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

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

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