React Hooks Cheat Sheet/useImperativeHandle custom ref API

Expose a controlled imperative API to a parent ref.

Section: Context and Ref Hooks

useImperativeHandle custom ref API

tsx
tsx
useImperativeHandle(ref, () => ({
  focus: () => inputRef.current?.focus(),
  clear: () => setValue(''),
}), []);
Explanation

Use with `forwardRef` when a parent truly needs an imperative child API.

Learn the surrounding workflow

Compare similar commands or jump into common fixes when this command is part of a bigger troubleshooting path.

Related commands

Same sheet · prioritizing Context and Ref Hooks
useContext basic usage
Read the nearest context value.
OpenIn sheettsxsame section
useRef DOM reference
Reference a DOM node.
OpenIn sheettsxsame section
useRef mutable container
Persist mutable values between renders without re-rendering.
OpenIn sheettsxsame section
useId for stable accessible IDs
Generate stable IDs for labels and ARIA relationships.
OpenIn sheettsxsame section
useDebugValue in a custom hook
Label a custom hook in React DevTools.
OpenIn sheettsxsame section
useState basic state
Create local component state.
OpenIn sheettsx2 tag match