Ref as prop

2 snippets in React

REReact

Forwarding Refs (React 19)

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.