Resize Observer API: Detecta Cambios de Tamaño en Elementos
Aprende a detectar cambios de tamaño en elementos del DOM sin depender de eventos window resize, ideal para layouts responsivos y componentes adaptables.
TL;DR - Resumen rápido
- Resize Observer detecta cambios de tamaño en cualquier elemento del DOM
- Funciona con elementos individuales, no solo el viewport
- contentRect y borderBox proporcionan dimensiones precisas
- disconnect() es CRÍTICO para evitar memory leaks
- Ideal para layouts responsivos y componentes adaptables
Introducción a Resize Observer
Detectar cambios de tamaño en elementos del DOM ha sido tradicionalmente un desafío en JavaScript. Los desarrolladores solían usar el eventowindow.resize, que solo detecta cambios en el viewport del navegador, no en elementos individuales. Esto hacía imposible crear componentes que reaccionaran a sus propios cambios de tamaño.
Resize Observer API resuelve este problema permitiendo observar cambios de tamaño en cualquier elemento del DOM de forma eficiente. A diferencia dewindow.resize, Resize Observer notifica cuando el tamaño de un elemento específico cambia, independientemente de la causa del cambio (redimensionamiento de ventana, cambios de contenido, CSS, etc.).
¿Por qué no usar window.resize?
El evento window.resize solo detecta cuando el viewport cambia. Si un elemento cambia de tamaño debido a cambios de contenido, CSS, o manipulación del DOM, window.resize no se dispara. Resize Observer detecta cambios en elementos específicos, independientemente de la causa.
¿Qué es Resize Observer?
Resize Observer es una API del navegador que permite observar cambios en las dimensiones de elementos del DOM. Cuando el tamaño de un elemento observado cambia, el observer notifica a través de un callback con un array de ResizeObserverEntry, cada uno describiendo el nuevo tamaño del elemento.
La API está diseñada para ser eficiente y precisa. Las notificaciones se agrupan y se entregan en lotes, similar a Mutation Observer. Esto significa que si el tamaño cambia rápidamente en múltiples ocasiones, recibirás un solo callback con todas las observaciones, en lugar de múltiples callbacks individuales.
- Observa cambios de tamaño en cualquier elemento del DOM
- Detecta cambios independientemente de la causa (CSS, contenido, ventana)
- Proporciona dimensiones precisas con contentRect y borderBox
- Agrupa múltiples cambios en un solo callback
- Es asíncrono y no bloquea el renderizado
Crear un Resize Observer
Para crear un Resize Observer, necesitas proporcionar una función callback que se ejecutará cuando el tamaño de los elementos observados cambie. El callback recibe un array de ResizeObserverEntry, cada uno con información sobre el nuevo tamaño del elemento.
Cada ResizeObserverEntry contiene información detallada sobre el nuevo tamaño del elemento. contentRect proporciona las dimensiones del contenido del elemento (sin padding ni border), mientras queborderBoxSize proporciona las dimensiones completas (incluyendo padding y border).
Mejor práctica: Un solo observer para múltiples elementos
En lugar de crear un observer por cada elemento, crea un solo observer y observa múltiples elementos. Esto es más eficiente y el mismo callback manejará todos. Usa entry.target para identificar qué elemento cambió de tamaño.
Detectar Cambios de Dimensiones
Resize Observer proporciona múltiples formas de obtener las dimensiones del elemento. Comprender estas propiedades es fundamental para implementar lógica específica según qué dimensiones necesitas monitorear.
contentRect proporciona las dimensiones del contenido del elemento (sin padding ni border). borderBoxSize es un array con las dimensiones completas del elemento (incluyendo padding y border). contentBoxSize proporciona las dimensiones del contenido (similar a contentRect pero con más información).
contentRect vs borderBoxSize
contentRect está disponible en todos los navegadores pero proporciona información limitada. borderBoxSize es más moderno y proporciona dimensiones más precisas, incluyendo el tamaño del device pixel. Usa borderBoxSize cuando sea posible.
Casos de Uso Prácticos
Resize Observer tiene múltiples aplicaciones en desarrollo web moderno. Estos patrones demuestran cómo la API puede resolver problemas reales que requieren reaccionar a cambios de tamaño de elementos específicos.
- Implementar layouts responsivos a nivel de componente
- Detectar cambios en contenedores flex y grid
- Ajustar contenido dinámico según el tamaño disponible
- Implementar componentes con altura automática
- Detectar cambios en elementos con contenido variable
Este ejemplo muestra cómo implementar un layout responsivo a nivel de componente. Cuando el contenedor cambia de tamaño, el observer detecta el cambio y ajusta el layout del contenido. Este patrón es útil para componentes que deben adaptarse a su espacio disponible, independientemente del tamaño de la ventana.
Este patrón detecta cambios en la altura de un elemento con contenido variable, como un chat o feed de contenido dinámico. Cuando el contenido cambia y el elemento crece o se encoge, el observer detecta el cambio y puede ejecutar lógica adicional, como scroll automático al final.
Uso con CSS Grid y Flexbox
Resize Observer es especialmente útil con CSS Grid y Flexbox, donde el tamaño de los elementos puede cambiar dinámicamente según el contenido disponible. Puedes observar cambios en contenedores y ajustar elementos hijos según el nuevo espacio disponible.
Errores Comunes
Al trabajar con Resize Observer, hay varios errores comunes que pueden causar problemas de rendimiento, bugs sutiles o comportamiento inesperado. Conocer estos patrones problemáticos te ayudará a evitarlos en tu código.
No desconectar el observer cuando ya no es necesario es uno de los errores más comunes. Esto causa memory leaks porque el observer sigue ejecutando callbacks incluso después de que los elementos fueron removidos del DOM o el usuario navegó a otra página.
Usar contentRect cuando necesitas dimensiones precisas puede causar problemas. contentRect está disponible por compatibilidad pero proporciona información limitada. Usa borderBoxSize ocontentBoxSize para dimensiones más precisas y modernas.
Observar elementos que son removidos del DOM puede causar errores inesperados. Cuando un elemento es removido, el observer sigue intentando notificar cambios en un elemento que ya no existe. La solución es desconectar el observer antes de remover el elemento o usardisconnect() en el callback cuando detectes que el elemento ya no está en el DOM.
Advertencia: Observar muchos elementos
Observar cientos de elementos con Resize Observer puede causar problemas de rendimiento, especialmente si los elementos cambian de tamaño frecuentemente. Observa solo los elementos que realmente necesitas monitorear y considera usar un solo observer para múltiples elementos.
Resumen: Resize Observer API
Conceptos principales:
- •Resize Observer detecta cambios de tamaño en elementos del DOM
- •contentRect proporciona dimensiones del contenido
- •borderBoxSize proporciona dimensiones completas del elemento
- •contentBoxSize proporciona dimensiones del contenido moderno
- •Las notificaciones se agrupan en un solo callback
Mejores prácticas:
- •Siempre desconecta el observer cuando ya no se necesite
- •Usa borderBoxSize para dimensiones más precisas
- •Usa un solo observer para múltiples elementos
- •Observa solo los elementos necesarios, no todos
- •Desconecta antes de remover elementos del DOM