How does React handle ref as prop?

React covers this with 2 copy-ready snippets on this page. The "Forwarding Refs (React 19)" snippet in React uses `// React 19: ref is a regular prop`.

Which code does the React example use?

The "Forwarding Refs (React 19)" snippet uses `// React 19: ref is a regular prop`, from the useRef section of the React cheat sheet.

What other React snippets are shown for "ref as prop"?

Besides "Forwarding Refs (React 19)", this page also shows "ref as a Prop".

Ref as prop

2 snippets in React

REReact

Forwarding Refs (React 19)

RE · useRef

Syntax

// React 19: ref is a regular prop
function CustomInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

// Pre-React 19 (still works):
const CustomInput = forwardRef((props, ref) => {
  return <input ref={ref} {...props} />;
});

Example

// React 19 style: ref is just a prop
function FancyInput({ ref, placeholder, className }) {
  return (
    <input
      ref={ref}
      placeholder={placeholder}
      className={`fancy-input ${className}`}
    />
  );
}

// Parent component
function SearchBar() {
  const inputRef = useRef(null);

  return (
    <div>
      <FancyInput ref={inputRef} placeholder="Search..." />
      <button onClick={() => inputRef.current.focus()}>Focus</button>
    </div>
  );
}

Note In React 19, ref is passed as a regular prop to function components. forwardRef is no longer necessary and is considered deprecated. Existing code using forwardRef still works but should be migrated over time.

ref as a Prop

RE · React 19 Features

Syntax

// React 19: no forwardRef needed
function MyComponent({ ref, ...props }) {
  return <div ref={ref} {...props} />;
}

Example

function TextArea({ ref, label, ...rest }) {
  return (
    <div className="field">
      <label>{label}</label>
      <textarea ref={ref} {...rest} />
    </div>
  );
}

function CommentForm() {
  const textareaRef = useRef(null);

  function handleReset() {
    textareaRef.current.value = '';
    textareaRef.current.focus();
  }

  return (
    <div>
      <TextArea ref={textareaRef} label="Comment" rows={4} />
      <button onClick={handleReset}>Clear</button>
    </div>
  );
}

Note React 19 passes ref as a regular prop to function components. forwardRef is deprecated -- migrate by moving ref into the props destructuring. Existing forwardRef code continues to work but will show deprecation warnings.

Frequently asked questions

How does React handle ref as prop?: React covers this with 2 copy-ready snippets on this page. The "Forwarding Refs (React 19)" snippet in React uses `// React 19: ref is a regular prop`.
Which code does the React example use?: The "Forwarding Refs (React 19)" snippet uses `// React 19: ref is a regular prop`, from the useRef section of the React cheat sheet.
What other React snippets are shown for "ref as prop"?: Besides "Forwarding Refs (React 19)", this page also shows "ref as a Prop".
Is there anything to watch out for?: Yes. For "Forwarding Refs (React 19)": In React 19, ref is passed as a regular prop to function components. forwardRef is no longer necessary and is considered deprecated. Existing code using forwardRef still works but should be migrated over time.