setTimeout() keeps restarting react

user_1427188 0
Viewed 396

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>
 ); 
}
reactjs
2 Answers

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.

user_90408660

If you add a empty array at the end of the useEffect (just like a callback), it will wokf only in the first render of the component ( It will me similar to use componentDidMount). IF you add a variable inside the Array it will update only if the variable changes its value.

So thats why its restarting every time you rerender your component.

useEffect(() => setTimeout(() => {
   setTimeout(() => {
     setPopupper(true);
   }, 30000);
},
[]);
user_81060180
Related