How did ref handling for function components change in React 19 compared with older React versions?

Direct answer

In React 19, function components can receive ref as a prop directly; older React versions typically required forwardRef to expose a ref through a function component.

Version style	Typical function component ref pattern
React 19+	Receive ref as a prop and pass/customize it
React 18 and earlier	Wrap the component with forwardRef

MyInput.jsx

function MyInput({ ref, ...props }) {
  return <input {...props} ref={ref} />;
}

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

  return (
    <>
      <MyInput ref={inputRef} />
      <button onClick={() => inputRef.current?.focus()}>
        Focus
      </button>
    </>
  );
}