Z jakimi hookami pracowałeś w komponentach funkcyjnych? Który był najbardziej niezwykły?

W funkcjonalnych komponentach React często używa się następujących hooków:

• useState — do zarządzania stanem.
• useEffect — do efektów ubocznych (zapytania, subskrypcje).
• useContext — do dostępu do kontekstu.
• useRef — do przechowywania wartości mutowalnych i dostępu do DOM.
• useMemo i useCallback — do optymalizacji wydajności.

Najbardziej nietypowym hookiem, z którym miałem do czynienia, może być useImperativeHandle. Pozwala on na konfigurowanie instancji, która będzie dostępna dla komponentu nadrzędnego przez ref. Jest to przydatne, gdy trzeba kontrolować, które metody lub właściwości są dostępne z zewnątrz, szczególnie podczas pracy z opakowaniami nad elementami DOM lub bibliotekami zewnętrznymi.

Przykład użycia 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} />;
});

// Komponent nadrzędny może wywołać metodę focus:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();