This is my first question on stackoverflow. I am currently learning react and I tried to make a live clock which updates every second. I managed to accomplish the html updating through a useState() hook and a useEffect() hook. Now, I tried printing the current time into the Console when it updates but the console only shows the time when the site was refreshed the last time.
Result: HTML keeps updating correctly but the console stays on the same time.
Could someone explain to me what I am doing wrong or what is the cause to this bug?
Clock.js:
import { render } from "@testing-library/react";
import React, { useState, useEffect } from 'react';
function Clock() {
const [dateState, setDateState] = useState(new Date());
function updateFunc(){
setDateState(new Date());
console.log(dateState.toLocaleString('eu-DE', {
second: 'numeric',
minute: 'numeric',
hour: 'numeric',
}));
}
useEffect(() => {
setInterval(() => updateFunc(), 1000);
}, []);
return (
<div className="App">
<p>
{' '}
{dateState.toLocaleDateString('eu-DE', {
day: 'numeric',
month: 'short',
year: 'numeric',
})}
</p>
<p>
{dateState.toLocaleString('eu-DE', {
hour: 'numeric',
minute: 'numeric',
second: 'numeric',
hour12: false,
})}
</p>
</div>
);
}
export default Clock;
If I'm not mistaking, since the useEffect has no dependencies, the callback never changes. The callback has its own scope and the variables (dateState) that's why it never changes.
If you pass an empty array ([]), the props and state inside the effect will always have their initial values
The solution is to add updateFunc to the useEffect dependencies list. Then you will need to wrap updateFunc with useCallback with dateState as a dependency.
Note: When the component subscribes to an endless handler (e.g. setInterval or socket) it's better to unsubscribe using the cleanup function.
function Clock() {
const [dateState, setDateState] = useState(new Date());
const updateFunc = useCallback(() => {
setDateState(new Date());
console.log(
dateState.toLocaleString("eu-DE", {
second: "numeric",
minute: "numeric",
hour: "numeric"
})
);
}, [dateState]);
useEffect(() => {
const interval = setInterval(() => updateFunc(), 1000);
return () => clearInterval(interval);
}, [updateFunc]);
return (
<div className="App">
<p>
{" "}
{dateState.toLocaleDateString("eu-DE", {
day: "numeric",
month: "short",
year: "numeric"
})}
</p>
<p>
{dateState.toLocaleString("eu-DE", {
hour: "numeric",
minute: "numeric",
second: "numeric",
hour12: false
})}
</p>
</div>
);
}