Estoy mostrando y ocultando diferentes encabezados según el ancho de la pantalla del dispositivo. Como reaccionar me permite montar y desmontar un componente dependiendo de un estado, a veces usaba el detector de eventos addEventLister("resize", handleResize) para mostrar y ocultar elementos. Pero con este método en una nueva actualización de página, apareció algo de parpadeo, ya que el valor predeterminado de estado se reemplazó por el valor real evaluado del ancho de la pantalla, lo que provocó que se mostrara el error tipográfico más grande durante un milisegundo antes de que se ocultara nuevamente. Descubrí que esto no sucederá con @media screen and display: none . ¿Por qué es tan lento? ¿Y hay alguna solución para los casos en los que no puedo resolverlo en CSS, así que una forma de priorizar el detector de eventos para evaluar antes de mostrar el encabezado incorrecto? ¿Cuál es el camino a seguir para estos escenarios, ya que este debe ser un problema básico en todos los sitios receptivos?

Ejemplo de un enlace personalizado para escuchar cambios en la ventana:

 const [screenSize, setScreenSize] = useState<Size>({ width: 0, height: 0, }); useEffect(() => { const handleResize = () => { setScreenSize({ width: window.innerWidth, height: window.innerHeight }); }; addEventListener("resize", handleResize); handleResize(); return () => removeEventListener("resize", handleResize); }, []);

Ejemplo de Css para hacer lo mismo:

 .title { display: flex; } @media screen and (max-width: 768px) { .title { display: none; } }