È possibile in un componente funzionale fornire accesso esterno ai metodi del componente (dare delle 'maniglie' all'esterno)?

Nei componenti funzionali di React, è possibile fornire accesso esterno ai metodi del componente utilizzando forwardRef e useImperativeHandle.

Questo permette di 'passare' un riferimento e definire quali metodi o proprietà saranno accessibili dall'esterno.

Esempio:

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>Contatore: {count}</div>;
});

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

In questo modo, il codice esterno può chiamare i metodi increment e reset del componente.