What is useImperativeHandle in React?

What is useImperativeHandle?

• Form validation: The child component may expose a function that checks form data to the parent component, which can be used to display error messages or prevent form submission.
• Handling user input data: The child component may expose a function handling user input data to the parent component, which can be used to update other parts of the application state.
• Access to the child state: useImperativeHandle can be used to expose certain state values of the child component to the parent component, allowing the parent component to access and use this state.

How is it constructed?

useImperativeHandle(ref, () => {
	// this is where you can define methods
}, [deps]);

• ref: Reference passed from the parent component.
• A function that exposes the data methods, variables from the component in ref.
• deps: Dependency array, similar to other hooks.

What is it most useful for? - Real use case from a project

import React, { useRef, useImperativeHandle, forwardRef } from 'react';

const VideoComponent = forwardRef((props, ref) => {
	const [isVideoPlayed, setIsVideoPlayed] = useState(false);
	useImperativeHandle(ref, () => ({
		playVideo: () => {
			setIsVideoPlayed(true);
		}
	}));
	return <VideoPlayer isVideoPlayed={isVideoPlayed} setIsVideoPlayed={setIsVideoPlayed}/>;
});

const CardComponent = () => {
	const videoRef = useRef();

	const onClick = () => {
		videoRef.current.playVideo();
	};

	return (
		<>
			<VideoComponent ref={videoRef} />
			<button onClick={onClick}>Play video</button>
		</>
	);
};