I have the following React component:
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>
);
}
I need the children to be always aware and re render whenever the width changes. The value of this ref stays the same even when we click on the button to change the width.
I've tried calling a function with useCallback but no success as the ref never changes.
const getChild = useCallback(
() => <Child containerWidth={containerWidth} />,
[containerWidth]
);
(.....)
return (
<div ref={containerRef} style={{ width: width }}>
{getChild()}
<button onClick={handleWidth}>change my width</button>
</div>
);
It is working actually but once because you are checking if ref exist or no. Once it exist then it will not trigger the useEffect logic anymore. You can manage it with event listener inside useEffect. I just created an example demo for you. Here is the working codesandbox 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>
);
}