useInterval hook

Continually executes function after given ms interval

useInterval hook
import { useEffect, useLayoutEffect, useRef } from 'react';

export function useInterval(callback: () => void, delay: number | null) {
  const callbackRef = useRef(callback);

  useLayoutEffect(() => {
    callbackRef.current = callback;
  }, [callback]);

  useEffect(() => {
    if (!delay && delay !== 0) {
      return;
    }
    const id = setInterval(() => callbackRef.current(), delay);
    return () => clearInterval(id);
  }, [delay]);
}

Usage

import React, { useState } from 'react';
import { useInterval } from './use-interval';

export default function App() {
  const [visible, setVisible] = useState(true);

  const toggle = () => setVisible((v) => !v);

  useInterval(toggle, 5000);

  return (
    <div>
      <p>{visible ? 'Hi' : null}</p>
    </div>
  );
}