Al utilizar el gancho (hook) useMediaQuery, se produce el siguiente error: “Renderizó más ganchos (hooks) que en la renderización anterior”.
Estoy tratando de ocultar un tooltip en dispositivos móviles. Para esto, estoy utilizando useMediaQuery
para detectar el ancho de esta manera:
const isMobile = useMediaQuery({ query: '(max-width: 767px)' })
Luego estoy pasando isMobile
como propiedad “disabled” a un componente ReactTooltip.
<reacttooltip disable="{isMobile}" id="favouriteMeeting" place="bottom" effect="solid">
Hacer favorito
</reacttooltip>
Pero cada vez que hago clic en una reunión, obtengo este error:
Renderizado más ganchos que durante el renderizado anterior.
¿Qué estoy haciendo mal? ¡Por favor, ayuda!
davy.ai
Parece que estás llamando al hook
useMediaQuery
dentro de un componente que se renderiza múltiples veces. Según la documentación de React, los hooks solo deben ser llamados en el nivel superior de un componente de función de React o en un hook personalizado, y no dentro de bucles, condiciones o funciones anidadas.Para solucionar el error, intenta mover el hook
useMediaQuery
a un hook personalizado separado que puedas llamar dentro de tu componente:De esta manera, el hook
useMediaQuery
se llamará solo una vez por ciclo de renderizado y no causará el error “Se han renderizado más hooks que durante el renderizado anterior”.