¿Cómo detectar si el tamaño de la pantalla ha cambiado a móvil en React?

Omar, miembro de este gran equipo de trabajo, nos hizo el favor de redactar esta crónica ya que controla a la perfección este tema.

Solución:

Lo que hice fue agregar un detector de eventos después del montaje del componente:

componentDidMount() 
    window.addEventListener("resize", this.resize.bind(this));
    this.resize();


resize() 
    this.setState(hideNav: window.innerWidth <= 760);


componentWillUnmount() 
    window.removeEventListener("resize", this.resize.bind(this));

EDITAR: Para guardar las actualizaciones de estado, cambié un poco el "cambio de tamaño", solo para que se actualice solo cuando haya un cambio en el ancho de la ventana.

resize() 
    let currentHideNav = (window.innerWidth <= 760);
    if (currentHideNav !== this.state.hideNav) 
        this.setState(hideNav: currentHideNav);
    

ACTUALIZACIÓN: ¡Es hora de usar ganchos! Si su componente es funcional y usa ganchos, entonces puede usar el useMediaQuery gancho, de react-responsive paquete.

import  useMediaQuery  from 'react-responsive';

...

const isMobile = useMediaQuery( query: `(max-width: 760px)` );

Después de usar este enlace, "isMobile" se actualizará al cambiar el tamaño de la pantalla y volverá a representar el componente. ¡Mucho más bonito!

Esto es lo mismo que la respuesta de @Ben Cohen, pero después de adjuntar su función a eventListner, también elimínela en componenteDesmontará

constructor() 
  super();
  this.state =  screenWidth: null ;
  this.updateWindowDimensions = this.updateWindowDimensions.bind(this);


componentDidMount() 
    window.addEventListener("resize", this.updateWindowDimensions());


componentWillUnmount() 
    window.removeEventListener("resize", this.updateWindowDimensions)


updateWindowDimensions() 
   this.setState( screenWidth: window.innerWidth );

Usando ganchos en React (16.8.0+) haciendo referencia a: https://stackoverflow.com/a/36862446/1075499

import  useState, useEffect  from 'react';

function getWindowDimensions() 
  const  innerWidth: width, innerHeight: height  = window;
  return 
    width,
    height
  ;


export default function useWindowDimensions() 
  const [windowDimensions, setWindowDimensions] = useState(getWindowDimensions());

  useEffect(() => 
    function handleResize() 
      setWindowDimensions(getWindowDimensions());
    

    window.addEventListener('resize', handleResize);
    return () => window.removeEventListener('resize', handleResize);
  , []);

  return windowDimensions;

Puntuaciones y reseñas

Tienes la posibilidad dar visibilidad a este escrito si te ayudó.

---

---

Utiliza Nuestro Buscador