Czy w komponencie funkcyjnym można zapewnić zewnętrzny dostęp do metod komponentu (dając 'uchwyty' na zewnątrz)?

W funkcjonalnych komponentach React można zapewnić zewnętrzny dostęp do metod komponentu za pomocą forwardRef i useImperativeHandle.

Pozwala to na 'przekazanie' referencji i określenie, które metody lub właściwości będą dostępne z zewnątrz.

Przykład:

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

const MyComponent = forwardRef((props, ref) => {
  const [count, setCount] = useState(0);

  useImperativeHandle(ref, () => ({
    increment() {
      setCount(c => c + 1);
    },
    reset() {
      setCount(0);
    }
  }));

  return <div>Licznik: {count}</div>;
});

// Użycie
// const ref = React.createRef();
// <MyComponent ref={ref} />
// ref.current.increment();

W ten sposób zewnętrzny kod może wywołać metody increment i reset komponentu.