Tengo el siguiente componente React:
import { useRef, useEffect, useState } from "react"; function Child({ containerWidth }) { console.log("CHILD", containerWidth); return <div>My parent's width is {containerWidth}px</div>; } export default function App() { const containerRef = useRef(null); const [containerWidth, setContainerWidth] = useState(null); const [width, setWidth] = useState(400); console.log("PARENT", containerWidth); useEffect(() => { if (containerRef.current) { setContainerWidth(containerRef.current.clientWidth); } }, [containerRef]); const handleWidth = () => setWidth(1000); console.log("width", width); return ( <div ref={containerRef} style={{ width: width }}> <Child containerWidth={containerWidth} /> <button onClick={handleWidth}>change my width</button> </div> ); }Necesito que los niños estén siempre atentos y vuelvan a renderizar cada vez que cambie el ancho. El valor de esta referencia permanece igual incluso cuando hacemos clic en el botón para cambiar el ancho.
Intenté llamar a una función con useCallback pero no tuve éxito ya que la referencia nunca cambia.
const getChild = useCallback( () => <Child containerWidth={containerWidth} />, [containerWidth] ); (.....) return ( <div ref={containerRef} style={{ width: width }}> {getChild()} <button onClick={handleWidth}>change my width</button> </div> );Está funcionando en realidad pero una vez porque está comprobando si existe una referencia o no. Una vez que exista, ya no activará la lógica useEffect . Puede administrarlo con el detector de eventos dentro de useEffect. Acabo de crear una demostración de ejemplo para ti. Aquí está el codesandbox de trabajo https://codesandbox.io/embed/wild-flower-ytv2b3?fontsize=14&hidenavigation=1&theme=dark
import { useRef, useEffect, useState } from "react"; function Child({ containerWidth }) { console.log("CHILD", containerWidth); return <div>My parent's width is {containerWidth}px</div>; } export default function App() { const containerRef = useRef(null); const [containerWidth, setContainerWidth] = useState(window.innerWidth); const [width, setWidth] = useState(400); console.log("PARENT", containerWidth); const handleResize = () => { setContainerWidth(window.innerWidth); }; useEffect(() => { window.addEventListener("resize", handleResize, false); }, []); const handleWidth = () => setWidth(containerWidth); console.log("width", width); return ( <div ref={containerRef} style={{ width: width }}> <Child containerWidth={width} /> <button onClick={handleWidth}>change my width</button> </div> ); }