Cu ce hooks ai lucrat în componentele funcționale? Care a fost cel mai neobișnuit?

În componentele funcționale React, se utilizează frecvent următorii hooks:

• useState — pentru gestionarea stării.
• useEffect — pentru efecte secundare (solicitări, abonamente).
• useContext — pentru accesul la context.
• useRef — pentru stocarea valorilor mutabile și accesul la DOM.
• useMemo și useCallback — pentru optimizarea performanței.

Cel mai neobișnuit hook cu care am lucrat poate fi useImperativeHandle. Acesta permite configurarea instanței care va fi accesibilă componentelor părinte prin ref. Este util atunci când trebuie să controlezi ce metode sau proprietăți sunt accesibile din exterior, mai ales când lucrezi cu învelișuri peste elemente DOM sau biblioteci terțe.

Exemplu de utilizare a 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} />;
});

// Componenta părinte poate apela metoda focus:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();