USANDO USEREF EN REACT

El hook useRef de React es una herramienta útil para crear y manipular referencias a elementos del DOM en una aplicación de React. Una referencia es simplemente una forma de obtener acceso a un elemento específico en el DOM, y puede ser utilizada para modificar su comportamiento o estilo.

Uno de los usos más comunes de useRef es para crear una referencia a un elemento de entrada en un formulario y luego utilizar esa referencia para obtener el valor de ese elemento en una función de manejo de eventos. Por ejemplo, aquí mostramos cómo se podría crear una referencia a un campo de entrada de texto y utilizarla para obtener el valor ingresado en ese campo:

import React, { useRef } from 'react';

const Form = () => {
  const inputRef = useRef<HTMLInputElement>(null);

  const handleSubmit = (event: React.FormEvent<HTMLFormElement>) => {
    event.preventDefault();
    console.log(inputRef.current?.value);
  };

  return (
    <form onSubmit={ handleSubmit }>
      <input type="text" ref={ inputRef } />
      <button type="submit">Submit</button>
    </form>
  );
}

Otro uso común es para crear una referencia a un componente de clase y luego utilizar esa referencia para llamar a métodos en ese componente. A continuación mostramos un ejemplo de cómo se podría crear una referencia a un componente de clase y utilizarla para llamar a un método de este componente:

import React, { useRef } from 'react';

interface Props {}

class MiComponente extends React.Component<Props> {
  MiMetodo = () => {
    console.log('Hola, mundo.');
  }

  render() {
    return <div>Mi Componente</div>;
  }
}

const Parent: React.FC = () => {
  const ref = useRef< MiComponente >(null);

  const handleClick = () => {
    ref.current?.MiMetodo();
  };

  return (
    <div>
      < MiComponente ref={ ref as any } />
      <button onClick={ handleClick }>Llamada a MiMetodo</button>
    </div>
  );
}

Supongamos que tenemos un componente que necesita realizar alguna acción específica en respuesta a un evento de scroll, por ejemplo, para actualizar el estado de un componente de interfaz de usuario. Se puede utilizar useRef para crear una referencia a un elemento específico en el DOM y luego utilizar esa referencia en una función de manejo de eventos de scroll para determinar si se ha desplazado hasta ese elemento.

import { useEffect, useRef, useState } from 'react';

const ScrollableContent = () => {
  const [isScrolledToElement, setIsScrolledToElement] = useState(false);
  const scrollableContentRef = useRef(null);

  useEffect(() => {
    const handleScroll = () => {
      const elementTop = scrollableContentRef.current.offsetTop;
      const elementHeight = scrollableContentRef.current.offsetHeight;
      const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
      setIsScrolledToElement(scrollTop > elementTop && scrollTop < (elementTop + elementHeight));
    };

    window.addEventListener('scroll', handleScroll);
    return () => window.removeEventListener('scroll', handleScroll);
  }, []);

  return (
    <div ref={ scrollableContentRef }>
      <p>El contenido va aquí...</p>
      {isScrolledToElement && <p>¡Te has desplazado a este elemento!</p>}
    </div>
  );
};

En este ejemplo, creamos una referencia a un elemento <div> utilizando useRef. En nuestro efecto, agregamos un controlador de eventos de scroll que se ejecutará cada vez que se desplace la página. Dentro de la función de controlador de eventos, utilizamos la referencia a nuestro elemento para obtener su posición en la página y comprobar si la página se ha desplazado a una posición que lo hace visible. Si el elemento es visible, actualizamos el estado isScrolledToElement para mostrar un mensaje al usuario.
 

En general, se debe usar useRef cuando se necesite crear una referencia a un elemento del DOM o a un componente de React y luego utilizar esa referencia para manipular ese elemento o componente en algún momento después. Esto es especialmente útil cuando se trabaja con componentes de clase o cuando se necesita acceder a un elemento del DOM directamente, en lugar de pasar una función a través de un componente para manejar un cambio en ese elemento.