type for useRef if used with setInterval, react-typescript

Question

I am doing a simple animation in a next.js app.

let flipInterval = useRef();



const startAnimation = () => {
    flipInterval.current = setInterval(() => {
      setIsFlipping((prevFlipping) => !prevFlipping);
    }, 10000);
  };

for flipInterval.current I am getting "Type 'Timeout' is not assignable to type 'undefined'". So i checked how to use Timeout type, I see that people are using but thats not working.

 let flipInterval = useRef<typeof window.settimeout>();

I also passed number useRef<number>() this time I am getting "Type 'Timeout' is not assignable to type 'number'"

this did not work neither

  let flipInterval = useRef<typeof window.setInterval>();

Answer 1

you need to pass the proper return value type of setInterval. for this use ReturnType:

const flipInterval = useRef<ReturnType<typeof setInterval>>(null)

Answer 2

 const intervalRef: { current: NodeJS.Timeout | null } = useRef(null);


const startAnimation = () => {
   const id = setInterval(() => {
       setIsFlipping((prevFlipping) => !prevFlipping);
   }, 10000);
      intervalRef.current = id;
 };

  const clear = () => {
    clearInterval(intervalRef.current as NodeJS.Timeout);
  };

Answer 3

If you are debouncing and need to clear a timeout null needs to be handled

Posting as this might help others due to the title of the question.

const flipInterval:{current: NodeJS.Timeout | null} = useRef(null)

const startAnimation = () => {
  flipInterval.current && clearTimeout(scrollTimeout.current);
        
  flipInterval.current = setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping)
  }, 10000)
}

Answer 4

How i'm using
*It is preferable to set initialValue of useRef. Thats why null.

  const timeout = useRef<NodeJS.Timeout | null>(null);

  timeout.current = setTimeout(() => someAction()), 500);

  useEffect(() => {
    return () => clearTimeout(timeout.current as NodeJS.Timeout);
  }, []);

Answer 5

let flipInterval = useRef<number | null>(null);
const startAnimation = () => {
  flipInterval.current = window.setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping);
  }, 10000);
};

/* way of clear interval */
window.clearInterval(flipInterval.current || 0);

Answer 6

You need to use NodeJS.Timeout type:

let flipInterval = useRef<NodeJS.Timeout>()

const startAnimation = () => {
  flipInterval.current = setInterval(() => {
    setIsFlipping((prevFlipping) => !prevFlipping)
  }, 10000)
}