quips.jsx

const quips = [
  "NaN days since last JS incident!",
  "function funCallFun() { funCallFun(); }",
  "Will code for food!",
  "In a love/hate relationship with JS since 2012!",
  "If you see this, the JS didn't load!",
  "Natural 20!"
];

function randQuip() {
  const randIndex = Math.floor(Math.random() * quips.length);
  return quips[randIndex];
}

// custom hook
function useInterval(callback, delay) {
  const savedCallback = useRef();

  // Remember the latest callback.
  useEffect(() => {
    savedCallback.current = callback;
  }, [callback]);

  // Set up the interval.
  useEffect(() => {
    function tick() {
      savedCallback.current();
    }
    if (delay !== null) {
      let id = setInterval(tick, delay);
      return () => clearInterval(id);
    }
  }, [delay]);
}

function Counter() {
  let [quip, setQuip] = useState(randQuip());

  useInterval(() => {
    setQuip(randQuip());
  }, 5000);

  return (
    <>
      <h1 style="margin-bottom: 5px;">Website Name Here</h1>
      <h3 style="margin-top: 5px;">&ndash; {quip}</h3>
    </>
  );
}