Quiero hacer algunos cambios dependiendo del tamaño de la pantalla
useEffect(() => { console.log("am called"); if (window.innerWidth < 800) { document.getElementsByTagName("body")[0].style.display = "none"; } if (window.innerWidth > 800) { document.getElementsByTagName("body")[0].style.display = "block"; } }, [window.innerWidth]);cual es el problema con este codigo
Debe observar el cambio de tamaño de la ventana y poner este valor en estado.
const [width, setWidth] = useState(0) useEffect(() => { const onResize = () => setWidth(window.innerWidth) window.addEventListener('resize', onResize); return () => { window.removeEventListener("resize", onResize) } }, [setWidth]) //and then useEffect(() => { console.log("am called"); if (width< 800) { document.getElementsByTagName("body")[0].style.display = "none"; } else { document.getElementsByTagName("body")[0].style.display = "block"; } }, [width]);mejor solucion
export default function useMatchMedia(condition) { const [isMatching, setIsMatching] = useState(false); useEffect( function updateMatchMedia() { if (!condition) return setIsMatching(true); const updateIsMatching = (event) => setIsMatching(event.matches); const matcher = window.matchMedia(condition); setIsMatching(matcher.matches); matcher.addEventListener('change', updateIsMatching); return () => { matcher.removeEventListener('change', updateIsMatching); }; }, [condition] ); return [isMatching]; }entonces puedes usarlo
isTablet = useMatchMedia(`(max-width: 800px)`); useEffect(() => { if(isTablet){ } else { } }, [isTablet])