Refs & forwardRef in React

From the React Components & JSX cheat sheet · Component Patterns & Types · verified Jul 2026

Refs & forwardRef

Access DOM elements and pass refs through components

javascript
// Basic ref - access a DOM node imperatively
function TextInput() {
  const inputRef = useRef(null)

  const focusInput = () => {
    inputRef.current.focus()
  }

  return (
    <div>
      <input ref={inputRef} />
      <button onClick={focusInput}>Focus Input</button>
    </div>
  )
}

// React 19: ref is a regular prop - no forwardRef needed
function FancyInput({ ref, ...props }) {
  return <input ref={ref} className="fancy-input" {...props} />
}
⚛️ Refs give imperative access to DOM nodes
💡 React 19: pass ref as a normal prop; forwardRef still works but is deprecated
📌 Refs persist across renders without causing a re-render
⚠️ Prefer declarative patterns - reach for refs only when you must

More React tasks

Back to the full React Components & JSX cheat sheet