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.useMemoeuseCallback— 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();