S ktorými hookmi ste pracovali vo funkčných komponentoch? Ktorý bol najneobvyklejší?

V funkčných komponentách React sa často používajú nasledujúce hooky:

• useState — na správu stavu.
• useEffect — na vedľajšie efekty (žiadosti, odber).
• useContext — na prístup ku kontextu.
• useRef — na ukladanie mutovateľných hodnôt a prístup k DOM.
• useMemo a useCallback — na optimalizáciu výkonu.

Najneobvyklejší hook, s ktorým som pracoval, môže byť useImperativeHandle. Umožňuje nakonfigurovať inštanciu, ktorá bude dostupná rodičovskému komponentu cez ref. To je užitočné, keď je potrebné kontrolovať, ktoré metódy alebo vlastnosti sú dostupné zvonku, najmä pri práci s obalmi nad DOM prvkami alebo knižnicami tretích strán.

Príklad použitia 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} />;
});

// Rodičovský komponent môže volať metódu focus:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();