How to structure useEffect with setInterval

Question

I am missing something obvious but can't see it.

The updateClock() util runs and populates the markup with the date/time, but only once.

I understand that I must create a useEffect and feed in the state variable that changes in order to re-fire the useEffect, but how would I do that in the code below? Am I setting the interval in the wrong place? What state variable should be changing every second when the setInterval runs?

import { updateClock } from '../../utils/updateClock';

interface LaDateTime {
  yr: string;
  mo: string;
  dt: string;
  hrs: string;
  min: string;
  sec: string;
  day: string;
}

export const Network: FunctionalComponent = () => {
  const { language: lang } = useContext(AppContext);
  const [pageContent, setpageContent] = useState<string | undefined>(undefined);
  const [laDate, setLaDate] = useState<LaDateTime | undefined>(undefined);

  /* *********************************************************************** */
  useEffect(() => {
    const currTime = updateClock();
    setLaDate({ yr: currTime[3], mo: currTime[1], dt: currTime[2], hrs: currTime[4], min: currTime[5], sec: currTime[6], day: currTime[0] });
    const interval = window.setInterval(updateClock, 1000);
    // Clear the interval if/when the component is removed from the DOM
    return () => window.clearInterval(interval);
  }, []);
  /* *********************************************************************** */


  return (
    <div class={style.networkDiv}>
      <div class={style.pageData}>
        {pageContent !== undefined && (
          <Typography>
            <div class={style.topStuff}>
              <div class={style.pageContent}>
                <Markup markup={pageContent} trim={false} type='html' />
              </div>
              <div class={style.clockDiv}>
                <div class={style.timedate}>
                  <a id='day'>{laDate?.day}</a>
                  <br />
                  <a id='mon'>{laDate?.mo}</a>
                  <a id='d'>{laDate?.dt}</a>,<a id='y'>{laDate?.yr}</a>
                  <br />
                  <a id='h'>{laDate?.hrs}</a> :<a id='m'>{laDate?.min}</a>:<a id='s'>{laDate?.sec}</a>
                </div>
              </div>
            </div>

Answer 1

You need to update the state (call setLaDate) inside the setInterval callback, which is what will trigger a re-render of your component.

Simply change:

useEffect(() => {
  const currTime = updateClock();

  // This is only called one time when the component is mounted. The state
  // is not updated later on each clock update, so your component is not
  // re-rendering:
  setLaDate({
    yr: currTime[3],
    mo: currTime[1],
    dt: currTime[2],
    hrs: currTime[4],
    min: currTime[5],
    sec: currTime[6],
    day: currTime[0],
  });

  // ...despite updateClock being called every second:
  const interval = window.setInterval(updateClock, 1000);

  return () => window.clearInterval(interval);
}, []);

To:

useEffect(() => {
  function tick() {
    const currTime = updateClock();

    // Now you update the state every second as well, which triggers a re-render:
    setLaDate({
      yr: currTime[3],
      mo: currTime[1],
      dt: currTime[2],
      hrs: currTime[4],
      min: currTime[5],
      sec: currTime[6],
      day: currTime[0],
    });
  } 

  tick();

  const interval = window.setInterval(tick, 1000);

  return () => window.clearInterval(interval);
}, []);

Additionally, I would probably create an useInterval hook to be able to use setInterval declaratively, as explained here: https://stackoverflow.com/a/59274004/3723993