React is complaining that I'm causing too many re-renders - reactjs

Question

The renderDialogue function should render Dialogue when the window size is less than 654px, otherwise it should update the state of expandMenu to false. However, React is saying there are too many re-renders. How to solve this?
const [expandMenu, setExpandMenu] = useState(false);
const handleOpenMenu = () => {
setExpandMenu(!expandMenu);
};
const renderDialogue = () => {
if (window.innerWidth < 654) {
return (
<Dialog
open={expandMenu}
handler={() => handleOpenMenu()}
size={"xl"}
className={"bg-transparent shadow-none "}
>
<DialogBody>
<div className={"relative"}>
<img
src={"/imgFolder2/cloud.webp"}
className={"h-full float-center"}
/>
<ul className="flex flex-col justify-center h-[75%] gap-5 text-2xl text-center absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[55%]">
{NavItems()}
</ul>
</div>
</DialogBody>
</Dialog>
);
} else {
setExpandMenu(false);
return <> </>;
}
};
Here is the NavItems function, which iterates through an array of links.
const NavItems = () => {
return paths.map((path, idx) => (
<li key={idx}>
<Link
href={getPath(idx)}
className={`text-black block ${
isSelectedPath(getName(idx, true))
? "border-b-4 border-buttonBG"
: ""
}`}
onClick={() => {
if (window.innerWidth < 654) setExpandMenu(!expandMenu);
}}
>
{getName(idx)}
</Link>
</li>
));
};

Answer 1

First of all, your component will never re-render when the window size changes. This means that your if-statement where you display something depending on the window width will only fire on first render. Which probably is fine, but not recommended.
Secondly, your error "too many re-renders" is because you invoke setExpandMenu directly in your component. Each time you update your expandMenu state, this component will re-render. Then you update it again, so it will re-render again. See the infinite loop here?
Below is a working example of what you want, including updating on window resize. I've added comments to explain what is happening:
const [expandMenu, setExpandMenu] = useState(false);
const [windowWidth, setWindowWidth] = useState(0)
useEffect(() => { // This will update your state depending on your window size
function updateSize() {
setWindowWidth(window.innerWidth)
}
window.addEventListener('resize', updateSize);
updateSize();
return () => window.removeEventListener('resize', updateSize);
}, []);
const handleOpenMenu = () => {
setExpandMenu(!expandMenu);
};
const renderDialogue = () => {
if (windowWidth > 654 || expandMenu) {
return (
<Dialog
open={expandMenu}
handler={() => handleOpenMenu()}
size={"xl"}
className={"bg-transparent shadow-none "}
>
<DialogBody>
<div className={"relative"}>
<img
src={"/imgFolder2/cloud.webp"}
className={"h-full float-center"}
/>
<ul className="flex flex-col justify-center h-[75%] gap-5 text-2xl text-center absolute top-[50%] left-[50%] translate-x-[-50%] translate-y-[-50%] w-[55%]">
{NavItems()}
</ul>
</div>
</DialogBody>
</Dialog>
);
} else {
// setExpandMenu(false); <--- This line is causing rerenders: Remove it!
return <> </>;
}