What is React useImperativeHandle?

Question

Accepted Answer

**useImperativeHandle** — customize ref value.

```tsx
const FancyInput = React.forwardRef((props, ref) => {
  const inputRef = useRef();
  useImperativeHandle(ref, () => ({
    focus: () => inputRef.current.focus(),
    clear: () => { inputRef.current.value = ""; },
    getValue: () => inputRef.current.value,
  }));
  return <input ref={inputRef} {...props} />;
});

// Usage
const ref = useRef();
ref.current.focus();
ref.current.clear();
```

**Benefits:** Encapsulate DOM access, clean API for parents, hide internal DOM details.

**Use when:** Wrapping third-party components, providing custom methods, abstracting DOM operations.

React: What is React useImperativeHandle?