React를 사용하다 보면 function을 component props로 넘길 때 re-render를 피하기 위해 reference 관리에 주의해야 한다.
대부분 useCallback을 사용해서 불필요한 re-render를 피하게 되지만 좋은 대안을 발견하게 되어
이 글을 쓰게 되었다.
영감을 받은 코드는 radix-ui/primitives 의 useCallbackRef 이며
이 글에서는 useCallbackRef를 쓰는 케이스와 동작을 이야기 할 예정이다.
아래의 코드는 앞으로 설명 할 useCallbackRef 코드이다.
과연 어떤 상황에서 사용 할 것 같은가?
// useCallbackRef.js
import { useRef, useEffect, useMemo } from 'react';
export function useCallbackRef(callback) {
const callbackRef = useRef(callback);
useEffect(() => {
callbackRef.current = callback;
});
return useMemo(() => ((...args) => callbackRef.current?.(...args)), []);
}