What is useImperativeHandle Hook? Give an example.

useImperativeHandle is a React Hook that allows a child component to expose custom functions or properties to its parent component, when using ref. It is typically used with forwardRef and is very useful in cases like modals, dialogs, custom inputs, etc., where the parent needs to control behavior imperatively (e.g., open, close, reset).

Example: Dialog component

import React, {
useRef,
useState,
useImperativeHandle,
forwardRef,
} from 'react';
import './Dialog.css';

const Dialog = forwardRef((props, ref) => {
const [isOpen, setIsOpen] = useState(false);
const [formData, setFormData] = useState('');

useImperativeHandle(ref, () => ({
open: () => setIsOpen(true),
close: () => setIsOpen(false),
reset: () => setFormData(''),
}));

if (!isOpen) return null;

return (
<h2>Dialog</h2>
<input
type="text"
value={formData}
placeholder="Type something..."
onChange={(e) => setFormData(e.target.value)}
/>
      

<button onClick={() => setIsOpen(false)}>Close</button>
);
});

function Parent() {
const dialogRef = useRef();

return (
<h1>useImperativeHandle Dialog Example</h1>
<button onClick={() => dialogRef.current.open()}>Open Dialog</button>
<button onClick={() => dialogRef.current.reset()}>Reset Dialog</button>
<button onClick={() => dialogRef.current.close()}>Close Dialog</button>

<Dialog ref={dialogRef} />
);
}

export default Parent;