Accept ref as a prop in React 19

In React 19 and newer, accept ref as an ordinary prop in function components instead of wrapping them in forwardRef.

Implementation

• Declare ref in the component's props type and pass it to the element or child that should receive it.
• Convert existing forwardRef components when you change them; forwardRef still works in React 19.
• Keep forwardRef in code that must also support React 18 or earlier.

Rationale

React 19 passes ref to function components as a prop, so the forwardRef wrapper only adds indirection. The React team has said it plans to deprecate forwardRef in a future version.

Examples

Incorrect (counterexample):

const SearchInput = forwardRef<HTMLInputElement, SearchInputProps>((props, ref) => (
  <input ref={ref} {...props} />
));

Correct:

function SearchInput({ ref, ...props }: SearchInputProps & { ref?: React.Ref<HTMLInputElement> }) {
  return <input ref={ref} {...props} />;
}

Validation

Search React 19 code for forwardRef in new or changed components.

forwardRef in a library that supports React 18 is not a violation.