Este posibil într-un component funcțional să oferiți acces extern la metodele componentului (să oferiți 'mânere' în exterior)?

În componentele funcționale React, se poate oferi acces extern la metodele componentului folosind forwardRef și useImperativeHandle.

Aceasta permite 'transmiterea' unei referințe și definirea metodelor sau proprietăților care vor fi accesibile din exterior.

Exemplu:

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>Numărător: {count}</div>;
});

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

Astfel, codul extern poate apela metodele increment și reset ale componentului.