How does useImperativeHandle help parent and child components communicate?
useImperativeHandle
in React allows parent and child components to communicate more effectively by enabling the child component to specify which methods and properties should be accessible to the parent through a ref.
How Does It Help:
- Customized Interaction: Child components can define a specific set of functions or data they want to share with their parent. This tailored approach ensures that only relevant information is exposed, enhancing clarity and simplicity in communication.
- Passing Refs: Parents can create a ref and pass it down to child components. With
useImperativeHandle
, child components can then determine what parts of their functionality or state should be accessible through this ref, granting parent-controlled access to specific features. - Improved Performance: By limiting the exposed functionality to only what’s necessary, unnecessary re-renders and updates in the parent component can be avoided. This optimization helps maintain a smoother user experience, especially in situations where the child component’s internal state changes frequently.
- Encourages Encapsulation:
useImperativeHandle
encourages encapsulation by allowing child components to hide their implementation details while offering a clear and concise interface to the parent. This promotes modular and maintainable code, making it easier to manage and understand.
Example: Below is an example to help parent and child components communicate using useImperativeHandle.
Javascript
import React, { useRef, useImperativeHandle, forwardRef } from 'react' ; // Child Component const ChildComponent = forwardRef((props, ref) => { const inputRef = useRef(); // Expose specific function to parent useImperativeHandle(ref, () => ({ focusInput: () => { inputRef.current.focus(); } })); return <input ref={inputRef} />; }); // Parent component const ParentComponent = () => { const childRef = useRef(); const handleClick = () => { // Call the exposed function of //the child component to focus the input childRef.current.focusInput(); }; return ( <div> <ChildComponent ref={childRef} /> <button onClick={handleClick}> Focus Input </button> </div> ); }; export default ParentComponent; |
Steps to Run the App:
npm start
Output: