hardFrontend

How did ref handling change in React 19 (ref as a prop, forwardRef, ref cleanup)?

Q: How did ref handling change in React 19 (ref as a prop, forwardRef, ref cleanup)?

**Core concept (TL;DR).** React 19 makes ref a **normal prop** for function components — you can accept ref directly in props, so forwardRef is **no longer needed** (and is being deprecated). It also lets a **ref callback return a cleanup function**, which React runs when the element unmounts. ref is just a prop now; callbacks can clean up before <text x="135"

176 views

Understand the problem

Function components receive ref directly; ref callbacks can return cleanup.

reactreact-19refs

Attempt it yourself

Sketch your approach before reading the solution — that's what interviews test.

Stuck? AI Nudge Available

Get a conceptual hint to guide your logic without spoiling the final implementation.

Study the solution

The solution is waiting

Give it an honest attempt first — then compare your thinking with the full walkthrough.

Explore the playground snippets

ref as a prop (no forwardRef)

Run Playground

import { useRef } from 'react';

// React 19: a function component can take `ref` as an ordinary prop.
function TextInput({ ref, ...props }) {
  return <input ref={ref} {...props} />;
}

export default function App() {
  const inputRef = useRef(null);
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <TextInput ref={inputRef} placeholder="Click the button to focus me" />
      <button onClick={() => inputRef.current.focus()} style={{ marginTop: 8 }}>
        Focus the input
      </button>
    </div>
  );
}

Join the discussion

Discussion (0)

No responses yet. Be the first to share what you think.

What is the difference between client-side rendering (CSR) and server-side rendering (SSR) in React?

What can and can't an Error Boundary catch?