setTimeout() keeps restarting react

Question

I have a popup that should open after 30 secs. Therefore my function looks something like what's shown below. But it keeps repeating popping up again after I have closed it - after 30 seconds or less. What am I doing wrong?

export default function MyElement() {

 const [popupper, setPopupper] = React.useState(false);

 const handlePopupClick = () => {
    setPopupper(!popupper);
 }

 useEffect(() => setTimeout(() => {
   setTimeout(() => {
      setPopupper(true);
   }, 30000);
 });

 return (
   <div name='popupthing' hidden={!popupper}>
     ....
   </div>
 ); 
}

Answer 1

Set empty array as the second param for useEffect, essentially telling react to only run the passed function after the initial render:

useEffect(() => setTimeout(() => {
   setTimeout(() => {
     setPopupper(true);
   }, 30000);
}, []); // Add empty array here.

The docs give an in-depth explanation if you're interested.