Q299: What is useImperativeHandle Hook? Give an example. - React & Modern Frontend (445 Qs)

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 (
   <div className="dialog"> 
     <h2>Dialog</h2>
     <input
       type="text"
       value={formData}
       placeholder="Type something..."
       onChange={(e) => setFormData(e.target.value)}
     />
     <br />
     <button onClick={() => setIsOpen(false)}>Close</button>
   </div>
 );
});

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

 return (
   <div>
     <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} />
   </div>
 );
}

export default Parent;