Forward Ref

By default, React components do not expose their underlying DOM nodes to parent components because ref is not passed like a standard prop. React.forwardRef allows a functional component to receive a ref from its parent and forward (pass) it down to a child DOM element or component.

import { forwardRef, useRef, useEffect } from 'react';

// Child component accepting ref as a second argument
export const Input = forwardRef(({ label }, ref) => {
    return (
        <>
            <label>{label}</label>
            <input ref={ref} />
        </>
    );
});

// Parent component creating and passing the ref
export const Form = () => {
    const inputRef = useRef(null);

    useEffect(() => {
        inputRef.current?.focus();
    }, []);

    return (
        <form>
            <Input ref={inputRef} label="Name" />
        </form>
    );
}