Pero el código de arriba no volverá a mostrar nada cuando se detecte el evento de redimensionamiento. Todavía tenemos que decirle a Reactar que algo ha cambiado para activar una re-renderización.
En condiciones normales, React volverá a producir un componente cuando cambie su soporte o estado. Para activar una re-presentación de MiComponente en el ejemplo, estableceremos un estado interno en el componente cuando se detecte el evento:
123456789101112131415161718importarReaccionar de la función $0027reaccionar$0027MiComponente(){const[dimensiones, establecerDimensiones]=Reaccionar.usarEstado({ altura:ventana.interiorAltura, anchura:ventana.interiorAncho})Reaccionar. useEffect(()= {functionhandleResize(){setDimensions({ height:window.innerHeight, width:window.innerWidth})window.addEventListener($0027resize$0027, handleResize)})return<div>Rendered at {dimensions.width} x {dimensions.height}</div>}javascript
Ahora hemos establecido un estado interno, dimensiones, que tiene propiedades de altura y anchura. Dentro de handleResize, ya no sólo console.log, sino que hemos establecido un nuevo estado cuando se detecta el redimensionamiento, usando setDimensions. Si sólo nos preocupáramos exclusivamente por los redimensionamientos de altura o anchura, podríamos rastrear sólo lo que necesitáramos.
Además, para mostrar que se está produciendo una re-presentación, hemos cambiado la salida para imprimir algo como «Renderizado a 1024 x 768».