Sobes.tech
Middle

Com que hooks trabalhou em componentes funcionais? Qual foi o mais incomum?

sobes.tech IA

Resposta da IA

Nos componentes funcionais do React frequentemente utilizam os seguintes hooks:

  • useState — para gerir o estado.
  • useEffect — para efeitos secundários (requisições, subscrições).
  • useContext — para aceder ao contexto.
  • useRef — para armazenar valores mutáveis e aceder ao DOM.
  • useMemo e useCallback — para otimizar o desempenho.

O hook mais incomum com que trabalhei pode ser o useImperativeHandle. Ele permite configurar a instância que estará acessível ao componente pai através de ref. Isto é útil quando precisa de controlar quais métodos ou propriedades estão acessíveis de fora, especialmente ao trabalhar com wrappers sobre elementos DOM ou bibliotecas de terceiros.

Exemplo de uso de 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} />;
});

// O componente pai pode chamar o método focus:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();