useImperativeHandle in React
From the React Hooks cheat sheet · Additional Hooks · verified Jul 2026
useImperativeHandle
Customize ref values
javascript
// Child component - ref is a normal prop in React 19 (no forwardRef)
function Child({ ref }) {
const inputRef = useRef(null)
useImperativeHandle(ref, () => ({
focus: () => inputRef.current.focus(),
clear: () => { inputRef.current.value = '' },
getValue: () => inputRef.current.value
}))
return <input ref={inputRef} />
}
// Parent component
const childRef = useRef(null)
childRef.current.focus()💡 Expose imperative API to parent
⚡ React 19: ref is a normal prop - no forwardRef needed
⚠️ Use sparingly - breaks React patterns