Con quali hook hai lavorato nei componenti funzionali? Qual è stato il più insolito?

Nei componenti funzionali di React vengono spesso utilizzati i seguenti hook:

• useState — per la gestione dello stato.
• useEffect — per effetti collaterali (richieste, sottoscrizioni).
• useContext — per accedere al contesto.
• useRef — per memorizzare valori mutabili e accedere al DOM.
• useMemo e useCallback — per ottimizzare le prestazioni.

L'hook più insolito con cui ho lavorato potrebbe essere useImperativeHandle. Permette di configurare l'istanza che sarà accessibile al componente genitore tramite ref. Questo è utile quando si desidera controllare quali metodi o proprietà sono accessibili dall'esterno, specialmente quando si lavora con wrapper su elementi DOM o librerie di terze parti.

Esempio di utilizzo di useImperativeHandle:

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

const FancyInput = forwardRef((props, ref) => {
  const inputRef = useRef();

  useImperativeHandle(ref, () => ({
    focus: () => {
      inputRef.current.focus();
    }
  }));

  return <input ref={inputRef} {...props} />;
});

// Il componente genitore può chiamare il metodo focus:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();