Middle
¿Con qué hooks has trabajado en componentes funcionales? ¿Cuál ha sido el más inusual?
sobes.tech AI
Respuesta de la IA
En los componentes funcionales de React, se utilizan a menudo los siguientes hooks:
useState— para gestionar el estado.useEffect— para efectos secundarios (consultas, suscripciones).useContext— para acceder al contexto.useRef— para almacenar valores mutables y acceder al DOM.useMemoyuseCallback— para optimizar el rendimiento.
El hook más inusual con el que he trabajado puede ser useImperativeHandle. Permite configurar la instancia que estará disponible para el componente padre a través de ref. Esto es útil cuando necesitas controlar qué métodos o propiedades están accesibles desde fuera, especialmente al trabajar con envoltorios sobre elementos DOM o bibliotecas de terceros.
Ejemplo 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} />;
});
// El componente padre puede llamar al método focus:
// const ref = React.createRef();
// <FancyInput ref={ref} />
// ref.current.focus();