How to pass ref as a prop in React Typescript

Sat Dec 07 2024•1 min read

Starting in React 19 (opens in a new tab), passing ref as a prop for function components is available. That means now we can pass components ref like any other prop and no more forwardRef!

Let's see how we can simplify forwardRef example with this update.

Code

We want to access input field's DOM node and focus it. But we want to acheive using another Button component (in App.tsx). We create a ref and simply pass to the child like any other prop.

// App.tsx
import { ButtonComponent } from './ButtonComponent'
import { useRef } from 'react'
 
export function App() {
  const ref = useRef<HTMLInputElement>(null)
  return (
    <div className="App">
      <p>Click to the button to focus on the input</p>
      <ButtonComponent title="Click here to focus the input" ref={ref} />
      <input placeholder="Click the button to focus here" ref={ref} />
    </div>
  )
}

And we can access the ref as prop inside the child component.

// ButtonComponent.tsx
type PropsType = {
  title: string;
  ref: RefObject<HTMLInputElement>;
};
 
export const ButtonComponent = ({ title, ref }: PropsType) => {
  const onClickHandler = () => {
    ref.current?.focus();
  };
 
  return <button onClick={onClickHandler}>{title}</button>;
};

Demo

View on CodeSandbox (opens in a new tab)