He estado leyendo sobre estos dos ganchos y trato de encontrar una solución para mi caso ahora aquí, pero no puedo hacer que funcione.

Básicamente lo que quiero hacer es renderizar cierta cantidad de imágenes si estoy en escritorio pero menos si estoy en móvil (en este último caso necesito un botón para mostrar el resto de las imágenes)

¿Entonces qué hice? comenzó simplemente:

 {images.slice(0, open ? images.length : 6).map(item => { return ( <div}> <Image src={whatever} alt={whatever} /> </div> ); })}

De esta manera, puedo mostrar todas las imágenes o solo 6 si es móvil. Hasta el botón, bastante sencillo

 <Button onClick={() => { setOpen(!open); }} > {open ? ( <text> close </text> ) : ( <text> open </text> )}

Ahora bien, ¿cuál sería mi estado inicial? bueno, eso debería depender de cuál es el ancho de la pantalla, ¿verdad? okey, así es como lo resolví:

 const [size, setSize] = useState([0]); useLayoutEffect(() => { function updateSize() { setSize([window.innerWidth]); } window.addEventListener('resize', updateSize); updateSize(); return () => window.removeEventListener('resize', updateSize); }, []);

perfecto, ahora tengo 'tamaño' que me dice el ancho de la pantalla en cualquier momento que el usuario cambie el diseño. Entonces ahora es cuando me estoy atascando: no hay forma de inicializar 'abierto' en verdadero o falso dependiendo de si el tamaño es> || < que un cierto ancho. Si me gusta esto:

 const isMobile = size < breakpoints.tablet; const [open, setOpen] = useState(isMobile);

aquí, por ejemplo, si cargo la página en el escritorio, 'isMobile' es falso, pero 'open' sigue siendo verdadero.

o

 const [open, setOpen] = useState(size < breakpoints.tablet);

pero aún así, el valor de 'isMobile' y 'open' no están sincronizados. Supongo que porque useLayoutEffect se ejecuta sincrónicamente mientras useState async? En cualquier caso, ¿cómo puedo lograr que la variable 'abierta' tenga el estado inicial correcto de 'isMobile'?