Een ref die aan een aangepaste component wordt doorgegeven, bereikt niet automatisch een DOM-knooppunt daarin. forwardRef stelt een component in staat een ref te ontvangen en deze aan een onderliggend element toe te voegen. useImperativeHandle bepaalt wat die ref blootstelt.
Een bibliotheek met IT-sollicitatievragen met gedetailleerde antwoorden — van Junior tot Senior.
Donerenconst TextInput = forwardRef(function TextInput(props, ref) {
return <input ref={ref} {...props} />; // parent's ref now points to the <input>
});
// parent can focus the inner input:
const ref = useRef(null);
<TextInput ref={ref} />;
// ref.current.focus();
Soms wil je niet het hele DOM-knooppunt lekken — alleen specifieke methoden:
const FancyInput = forwardRef(function FancyInput(props, ref) {
const inner = useRef(null);
useImperativeHandle(ref, () => ({
focus: () => inner.current.focus(),
clear: () => { inner.current.value = ""; },
}), []);
return <input ref={inner} {...props} />;
});
// parent: fancyRef.current.focus(); fancyRef.current.clear();
Gee de voorkeur aan props/state voor communicatie. Gebruik refs alleen voor echte imperatieve behoeften: focusbeheer, scrollen, tekstselectie, mediaweergave of integratie van imperatieve bibliotheken. Opmerking: in React 19 kan ref als een normale prop worden doorgegeven, dus forwardRef is vaak niet meer nodig.