What are some practical examples of using refs as props in functional components

Focusing an Input Field

jsx
function InputField({ label, ref }) {
  return (
    <div>
      <label>{label}</label>
      <input ref={ref} type="text" />
    </div>
  );
}

function App() {
  const inputRef = useRef(null);

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

  return (
    <div>
      <InputField label="Name" ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  );
}

In this example, the `InputField` component accepts a `ref` prop. The parent `App` component creates a ref using `useRef` and passes it to `InputField`. When the "Focus Input" button is clicked, the `focusInput` function is called, which focuses the input field using `inputRef.current.focus()`.[1][4]

Measuring Element Dimensions

jsx
function Box({ ref }) {
  const [dimensions, setDimensions] = useState({ width: 0, height: 0 });

  useEffect(() => {
    if (ref.current) {
      setDimensions({
        width: ref.current.offsetWidth,
        height: ref.current.offsetHeight,
      });
    }
  }, [ref]);

  return (
    <div ref={ref}>
      <p>Width: {dimensions.width}px</p>
      <p>Height: {dimensions.height}px</p>
    </div>
  );
}

function App() {
  const boxRef = useRef(null);

  return (
    <div>
      <Box ref={boxRef} />
    </div>
  );
}

The `Box` component accepts a `ref` prop and uses the `useEffect` hook to measure its dimensions when the ref is attached. The dimensions are stored in state using `useState` and displayed in the component. The parent `App` component creates a ref using `useRef` and passes it to `Box`.[1][4]

Integrating with Third-Party Libraries

jsx
function Chart({ ref }) {
  useEffect(() => {
    if (ref.current) {
      const chart = new ThirdPartyChartLibrary(ref.current);
      chart.render();

      return () => {
        chart.destroy();
      };
    }
  }, [ref]);

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

function App() {
  const chartRef = useRef(null);

  return (
    <div>
      <Chart ref={chartRef} />
    </div>
  );
}

In this example, the `Chart` component accepts a `ref` prop and uses it to integrate with a third-party chart library. The `useEffect` hook is used to initialize the chart when the ref is attached and clean up the chart when the component unmounts. The parent `App` component creates a ref using `useRef` and passes it to `Chart`.[1][4]

These examples demonstrate how refs can be passed as props to functional components in React 19, enabling direct interaction with DOM elements or integration with third-party libraries. By eliminating the need for `forwardRef`, this feature simplifies component creation and improves code readability.