forwardRef Forwarding Refs
Last updated: 2026-11-02
forwardRef Forwarding Refs
Function components do not receive a ref by default. forwardRef forwards the ref passed in by the parent to a DOM node inside the component, so wrapped components such as a custom input or a button can be focused and measured just like a native element. React 19 accepts a ref prop directly, but older versions need forwardRef. The ref has to end up on a real DOM element, because forwarding it to an ordinary component that does not forward again leaves the parent with nothing.
| Group | Effects & Performance |
|---|---|
| Kind | API |
| Since | React 16.3 |
ℹ️ Info The editor transpiles JSX to JavaScript and renders the real UI in a sandbox; components mount automatically — no manual render call needed.
📝 Syntax
const FancyInput = forwardRef(function FancyInput(props, ref) {
return <input ref={ref} {...props} /> // attach it to the real DOM
})
// usage: <FancyInput ref={inputRef} />⚙️ Parameters
| render function | A function of the shape (props, ref) => JSX. The second argument is the ref passed by the parent, and it must be attached to a real DOM node or to a component that forwards it further. |
|---|
Returns：Returns a new component that can forward a ref: ref.current in the parent will point at the node the render function attached.
▶ Example
The example runs out of the box: it auto-renders when expanded, and edits take effect instantly.
Output：
After the click the blue-bordered input is focused and its content is cleared — the ref passed through the FancyInput wrapper and reached the real input inside.💡 Key Points
🏷️ More Effects & Performance
💡 Related Cases
📚 Related Tutorials
❓ FAQ
