5. Jak przekazać wartość z komponentu do rodzica?

Bardzo prostym sposobem jest wykorzystanie hooka useImperativeHandle.

Jest to funkcja, która przyjmuje 3 argumenty:

1. referencja z forwardRef
2. callback
3. dependency array

Wartość zwracana z callbacku to obiekt, do którego dostęp staje się możliwy z poziomu komponentu-rodzica. Każda zmiana wartości przekazanych w dependency array spowoduje, że obiekt przetrzymywany w ten sposób w referencji "odświeży" swoje wartości.

Należy jednak pamiętać, że nie spowoduje to przerenderowania obiektu rodzica.

interface ComponentRef {
    myValue: number
}

interface ComponentProps {
}

const Component = forwardRef<ComponentRef, ComponentProps>((props, ref) => {
    const [val, setVal] = useState(25);
    
    useImperativeHandle(ref, () => {
        return {myValue: val};
    }, [val]);
    
    return <div>Child Component</div>;
});

interface ParentComponentProps {
}

const ParentComponent: React.FC<ParentComponentProps> = () => {
    const ref = useRef<ComponentRef>(null);
    
    return  <>
        <Component ref={ref}/>
        <div onClick={() => {
            console.info(ref.current?.myValue); // 25
        }}>Click here</div> 
    </>
}