SetInterval on mount for a set duration

Question

I have gone through some Q&As here but havent been able to understand what I am doing wrong. The following component prints 0s in console and does not update the DOM as expected.

const NotifPopup = ({ notif, index, closeHandler }) => {
  const [timer, setTimer] = useState(0);

  useEffect(() => {
    const timerRef = setInterval(() => {
      if (timer === 3) {
        clearInterval(timerRef);
        closeHandler(index);
      } else {
        console.log("timer", timer);
        setTimer(timer + 1);
      }
    }, 1000);
  }, []); // only run on mount

  return (<div className="notifPopup">
    <span className=""></span>
    <p>{notif.message}</p>
    <span className="absolute bottom-2 right-8 text-xs text-oldLace">{`closing in ${timer}s`}</span>
  </div>);
};

Why is the setInterval printing a stream of 0s in console and not updating the DOM?

score 2 · Accepted Answer · edited Jul 18 '21 at 06:19

2

You are loggin, comparing, and setting a stale value due to closures.

See more use cases in a related question.

useEffect(() => {
  // timerRef from useRef
  timerRef.current = setInterval(() => {
    setTimer((prevTimer) => prevTimer + 1);
  }, 1000);
}, []);

useEffect(() => {
  console.log("timer", timer);
  if (timer === 3) {
     clearInterval(timerRef.current);
  } 
}, [timer]);

edited Jul 18 '21 at 06:19

Guy

12,488
16
79
119

answered Jul 18 '21 at 03:56

Dennis Vash

50,196
9
100
118

score 1 · Answer 2 · answered Jul 18 '21 at 05:25

Check out the code for useInterval in react-use. Inspecting the different hooks in this package can greatly improve your hooks understanding.

import { useEffect, useRef } from 'react';

const useInterval = (callback: Function, delay?: number | null) => {
  const savedCallback = useRef<Function>(() => {});

  useEffect(() => {
    savedCallback.current = callback;
  });

  useEffect(() => {
    if (delay !== null) {
      const interval = setInterval(() => savedCallback.current(), delay || 0);
      return () => clearInterval(interval);
    }

    return undefined;
  }, [delay]);
};

export default useInterval;

And the usage as described in the docs:

import * as React from 'react';
import {useInterval} from 'react-use';

const Demo = () => {
  const [count, setCount] = React.useState(0);
  const [delay, setDelay] = React.useState(1000);
  const [isRunning, toggleIsRunning] = useBoolean(true);

  useInterval(
    () => {
      setCount(count + 1);
    },
    isRunning ? delay : null
  );

  return (
    <div>
      <div>
        delay: <input value={delay} onChange={event => setDelay(Number(event.target.value))} />
      </div>
      <h1>count: {count}</h1>
      <div>
        <button onClick={toggleIsRunning}>{isRunning ? 'stop' : 'start'}</button>
      </div>
    </div>
  );
};

To start the interval on mount simply change the value of isRunning on mount:

useMount(()=>{
     toggleIsRunning(true);
});

SetInterval on mount for a set duration

2 Answers2