useEffect / useState / useRef
Los hooks de React son una herramienta fundamental para desarrollar aplicaciones modernas y eficientes. Entre ellos, destacan el useState(), que permite manejar estados en componentes funcionales, el useEffect(), que permite trabajar con efectos secundarios en la aplicación, y el useRef(), que permite hacer referencia a elementos del DOM. Juntos, estos hooks facilitan la creación de aplicaciones dinámicas y escalables en React.
useState
Supongamos que queremos mostrar un contador que aumente en uno cada vez que usuario hace click en un botón.
Podriamos hacer utilizar el hook useState() de la sigiente manera.
En este ejemplo, creamos un estado count y una función setCount para actualizar ese estado.Luego, en la función Contador, mostramos el valor actual de count en una etiqueta p y agregamos un botón que llama la función setCount cada vez que se hace click , aumentando asi el valor de count.
useEffect
En este ejemplo, useEffect se utiliza para actualizar el título del documento cada vez que el usuario hace clic en el botón. La función que se pasa como argumento a useEffect se ejecuta después de que se renderiza el componente. En este caso, la función actualiza el título del documento utilizando la plantilla de cadena de texto que incluye la cantidad de clics que ha realizado el usuario.
useReff
En este ejemplo, useRef se utiliza para obtener una referencia al elemento input en el DOM. Luego, se utiliza la referencia en la función handleClick para establecer el foco en el elemento input cuando el usuario hace clic en el botón. La función useRef devuelve un objeto con una propiedad current que se puede utilizar para almacenar cualquier valor mutable. En este caso, se almacena una referencia al elemento input en la propiedad current.
