useMergeRefs

import { useMergeRefs } from "@servicetitan/anvil2";
import { useRef, forwardRef } from "react";

const CustomInput = forwardRef((props, forwardedRef) => {
  const internalRef = useRef(null);
  const mergedRef = useMergeRefs([internalRef, forwardedRef]);

  const focusInput = () => {
    internalRef.current?.focus();
  };

  return <input ref={mergedRef} {...props} />;
});

const FocusableButton = forwardRef((props, forwardedRef) => {
  const buttonRef = useRef(null);
  const mergedRef = useMergeRefs([buttonRef, forwardedRef]);

  useEffect(() => {
    // Can use buttonRef internally
    if (props.autoFocus) {
      buttonRef.current?.focus();
    }
  }, [props.autoFocus]);

  // Parent can also access via forwardedRef
  return <button ref={mergedRef} {...props} />;
});

// Usage
const parentRef = useRef(null);
<FocusableButton ref={parentRef} autoFocus />;

function ComplexComponent() {
  const measureRef = useRef(null);
  const animationRef = useRef(null);
  const scrollRef = useRef(null);

  const mergedRef = useMergeRefs([measureRef, animationRef, scrollRef]);

  return <div ref={mergedRef}>Content</div>;
}

function ConditionalRefComponent({ shouldMeasure }) {
  const measureRef = useRef(null);
  const baseRef = useRef(null);

  // Only include measureRef when needed
  const mergedRef = useMergeRefs([
    baseRef,
    shouldMeasure ? measureRef : undefined,
  ]);

  return <div ref={mergedRef}>Content</div>;
}