How to create a running clock using date-fns-CodePudding

I am using date-fns for showing date and time. I can able to dispay date and time using

format(new Date(), "dd-MM-yyyy HH:mm:ss") - 13-06-1994 21:34:50

I want seconds to be running always. I tried so many methods but no able to render as expected.

Tried Code:

useEffect(() => {
const displayClock = setTimeout(
  new Date().toLocaleTimeString("en-US", {
    hour12: false,
  }),
  1000
);
setRunningClock(displayClock);
});

I see output as number type with numbers 1018, 1022

Expected Output: 13-06-1994 21:34:50 seconds to be changed for every second. Expecting as string format

CodePudding user response：

First - it should be setInterval, not setTimeout.

Next - displayClock you currently have holds the ID that setTimeout returned. Those functions return the cancellation ids, so you got them, not the value of the function you expect. The callbacks passed to the setTImeout or setInterval do not return anything in that way.

Next - callback function passed to setTimeout (or setInterval in needed case) is invalid. What you passed evaluates immediately. You need to pass an actual callback function. () => {...}

Also, add a [] as a second parameter to useEffect. Without it, the hook will be executed on each render. And each render may not happen each 1 second as you expecting it.

And dont forget to call clearInterval as a cleanup function of the useEffect hook.

const { useEffect, useState } = React;

// Moved function out just to set initial text value in state.
function getDisplayTime() {
  return new Date().toLocaleTimeString("en-US", {
    hour12: false
  });
}

function App() {
  const [clockText, setClockText] = useState(getDisplayTime());

  useEffect(() => {
    const intervalId = setInterval(() => {
      setClockText(getDisplayTime());
    }, 1000);
    // If useEffect hook return a function - it will be called
    // when something in depsArray changed or when unmounting
    return () => clearInterval(intervalId);
  }, []);

  return <div className="App">{clockText}</div>;
}

ReactDOM.createRoot(
    document.getElementById("root")
).render(
    <App />
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/18.1.0/umd/react.development.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/18.1.0/umd/react-dom.development.js"></script>

<div id="root"></div>