hardFrontend

When and why do you use `forwardRef` with `useImperativeHandle`?

Q: When and why do you use `forwardRef` with `useImperativeHandle`?

**Core concept (TL;DR).** forwardRef lets a parent pass a ref *through* a component to something inside it (usually a DOM node). useImperativeHandle customizes **what that ref exposes** — instead of the raw DOM node, you expose a small, intentional imperative API (e.g. focus() , reset() ). Use it sparingly, for imperative actions that don't fit the declarative model. Expose a limited imperative API via a ref <text x="105" y="72" fill="#

662 views

Understand the problem

Exposing a curated imperative API from a component.

reactrefspatterns

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

Exposing a curated imperative API

Run Playground

import { forwardRef, useRef, useImperativeHandle } from 'react';

const FancyInput = forwardRef(function FancyInput(props, ref) {
  const inputRef = useRef(null);
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => { inputRef.current.value = ''; },
  }));
  return <input ref={inputRef} placeholder="Controlled imperatively" {...props} />;
});

export default function App() {
  const api = useRef(null);
  return (
    <div style={{ fontFamily: 'sans-serif', padding: 24 }}>
      <FancyInput ref={api} />
      <div style={{ marginTop: 8 }}>
        <button onClick={() => api.current.focus()}>Focus</button>{' '}
        <button onClick={() => api.current.clear()}>Clear</button>
      </div>
    </div>
  );
}

Join the discussion

Discussion (0)

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

How does `useOptimistic` enable optimistic UI in React 19?

What underlying mechanism makes the Rules of Hooks mandatory?