`useImperativeHandle` lets a component control what a parent receives through a ref instead of exposing the entire underlying DOM [node](/courses/nodejs) or internal object. It is useful when a reusable component should expose a small imperative API such as: ```text focus() clear() open() close() scrollToTop() ``` without exposing all of its internal implementation. ### Problem: Exposing the Entire DOM Element Suppose a custom input simply forwards its DOM ref: ```jsx function SearchInput({ ref }) { return ; } ``` The parent receives the entire input DOM element and can call many DOM methods or change properties directly. Sometimes you want to expose only a few approved operations. ### useImperativeHandle Example ```jsx import { useImperativeHandle, useRef } from "react"; function SearchInput({ ref }) { const inputRef = useRef(null); useImperativeHandle(ref, () => ({ focus() { inputRef.current.focus(); }, clear() { inputRef.current.value = ""; } }), []); return ; } ``` The parent can now use: ```jsx function SearchPage() { const searchRef = useRef(null); return ( <> ); } ``` The parent sees an API conceptually like: ```javascript { focus() {}, clear() {} } ``` rather than the entire DOM input. ### Why Is This Useful? It provides a boundary between the component's internals and the operations a parent is allowed to perform. For example, a modal might expose: ```javascript { open(), close() } ``` rather than giving callers direct access to all of its internal DOM nodes. ### Example: Modal Imperative API ```jsx function Modal({ ref }) { const dialogRef = useRef(null); useImperativeHandle(ref, () => ({ open() { dialogRef.current.showModal(); }, close() { dialogRef.current.close(); } }), []); return ( ); } ``` Parent: ```jsx const modalRef = useRef(null); ``` ### Imperative APIs Should Be Used Sparingly [React](/courses/reactjs) usually prefers declarative APIs. For example, instead of: ```javascript modalRef.current.open(); modalRef.current.close(); ``` a component could often accept: ```jsx ``` and let [React](/courses/reactjs) determine the displayed UI. Imperative APIs are useful when the operation naturally represents an imperative browser behavior, such as: ```text Focus Scroll Text selection Media playback Native dialog methods Third-party widget controls ``` ### Interview-Ready Answer `useImperativeHandle` customizes the value exposed through a ref. Instead of giving a parent direct access to an internal DOM [node](/courses/nodejs), a component can expose a small API such as `focus()`, `clear()`, or `open()`. It is useful for imperative behaviors, but declarative props and state should generally be preferred when they can represent the same UI behavior cleanly.