Comenzamos definiendo un estado con el hook useState, que almacenará en tiempo real el ancho y alto de la pantalla:
Figura 01
Inicializamos windowSize como un objeto con width y height en null, asegurándonos de que el estado esté preparado para actualizarse cuando detectemos cambios en el tamaño de la ventana.
Ahora creamos una función para manejar los cambios en el tamaño de la pantalla, utilizando el evento window.resize. Para optimizar su rendimiento, la envolvemos en useCallback, lo que evita que la función se vuelva a crear en cada render, a menos que sus dependencias cambien:
Figura 02
Aquí, handleResize actualiza el estado windowSize con el ancho y alto actuales de la ventana. Al pasar un array de dependencias vacío ([]), aseguramos que la función solo se crea una vez, optimizando el uso de memoria y evitando renders innecesarios.
Luego utilizamos useEffect para agregar un event listener al evento "resize" y actualizar el tamaño de la ventana en tiempo real. También nos aseguramos de remover el listener cuando el componente se desmonte, evitando fugas de memoria:
Figura 03
Agrega un listener al evento "resize" para ejecutar handleResize cada vez que cambie el tamaño de la ventana. La opción { passive: true } mejora el rendimiento al indicar que el handler no bloqueará el desplazamiento de la página. Al incluir [handleResize] en el array de dependencias, nos aseguramos de que el efecto se vuelva a ejecutar si handleResize cambia.
Código completo:
Figura 04
Para utilizar el hook useWindowSize, simplemente lo llamamos dentro de un componente y desestructuramos width y height para acceder al tamaño de la ventana en tiempo real:
Figura 05
Este hook es útil para condicionar el renderizado de elementos según el tamaño de la pantalla, ideal para componentes responsivos en React.
En resumen, crear un hook personalizado como useWindowSize en React, nos permite manejar el tamaño de la ventana de forma eficiente dentro de nuestros componentes. Al utilizar useState, useEffect y useCallback, conseguimos una solución optimizada que actualiza el tamaño de la ventana en tiempo real y permite realizar renderizados condicionales según las dimensiones de la pantalla. Este enfoque es ideal para aplicaciones responsivas, donde es crucial ajustar la interfaz según el tamaño de la ventana sin depender exclusivamente de CSS.
¡Nos leemos en la próxima entrega!