Sobes.tech
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.
  • useMemo y useCallback — 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();