Czym jest useImperativeHandle w React?

Czym jest useImperativeHandle?

• Sprawdzanie poprawności formularza: Komponent podrzędny może udostępniać funkcję sprawdzającą dane formularza komponentowi nadrzędnemu, który można używać do wyświetlania komunikatów o błędach lub zapobiegania wysyłaniu formularzy.
• Obsługa danych wejściowych użytkownika: Komponent podrzędny może udostępnić funkcję obsługującą dane wejściowe użytkownika komponentowi nadrzędnemu, który można użyć do aktualizacji innych części stanu aplikacji.
• Dostęp do stanu podrzędnego: useImperativeHandle można użyć do udostępnienia pewnych wartości stanu komponentu podrzędnego komponentowi nadrzędnemu, umożliwiając komponentowi nadrzędnemu dostęp do tego stanu i korzystanie z niego.

Jak jest skonstruowany?

useImperativeHandle(ref, () => {
	// tutaj można zdefiniować metody
}, [deps]);

• ref: Referencja przekazana z komponentu nadrzędnego.
• Funkcja, która wystawia dane metody, zmienne z komponentu w ref.
• deps: Tablica zależności, podobnie jak w innych hookach.

Do czego jest najbardziej przydatny? - realny use case z projektu

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