useCallbackRef

npm install @radix-ui/react-use-callback-ref

function useCallbackRef<T extends (...args: any[]) => any>(
  callback: T | undefined
): T

import { useCallbackRef } from '@radix-ui/react-use-callback-ref';

function Component({ onEvent }: { onEvent?: () => void }) {
  const handleEvent = useCallbackRef(onEvent);

  useEffect(() => {
    // handleEvent is stable, so this effect won't re-run when onEvent changes
    const subscription = subscribe(handleEvent);
    return () => subscription.unsubscribe();
  }, [handleEvent]); // Safe to include in dependencies

  return <div>Component</div>;
}

import { useCallbackRef } from '@radix-ui/react-use-callback-ref';

function Parent() {
  const [count, setCount] = useState(0);
  
  // Without useCallbackRef, this would cause Child to re-render on every count change
  const handleClick = useCallbackRef(() => {
    console.log('Current count:', count);
  });

  return <Child onClick={handleClick} />;
}

const Child = React.memo(({ onClick }: { onClick: () => void }) => {
  return <button onClick={onClick}>Click me</button>;
});

import { useCallbackRef } from '@radix-ui/react-use-callback-ref';

function EscapeHandler({ onEscape }: { onEscape?: () => void }) {
  const handleEscape = useCallbackRef(onEscape);

  useEffect(() => {
    const handleKeyDown = (event: KeyboardEvent) => {
      if (event.key === 'Escape') {
        handleEscape?.(); // Always calls the latest onEscape
      }
    };
    
    document.addEventListener('keydown', handleKeyDown);
    return () => document.removeEventListener('keydown', handleKeyDown);
  }, [handleEscape]); // Effect only runs once

  return null;
}

function useCallbackRef<T extends (...args: any[]) => any>(
  callback: T | undefined
): T