Javascript ReactJS timer函数检查门户上的用户时间开销

从问题中你知道我是个新手。 我想记录用户在一些组件上花费的时间，并将它们记录到数据库中，然后在门户上以“时间进度”的形式从数据库中获取，如下图所示。 一个问题是每秒都会调用useEffect，在useEffect中，我也会调用firebase db来获取数据。所以useEffect也会每秒运行一次db调用，这是一个问题

注意：下图中的时间不是以时钟/倒计时等方式运行的，它将显示用户登陆此组件时从db花费的静态时间。

我尝试了一些解决方案：

在这些解决方案中，定时器工作，但我的屏幕不断更新； 这是我的密码：

constuserdashboard=（道具）=>{
const[userinfo，setuserinfo]=useState（[]）；
const[product，setProduct]=useState（[]）；
const[time，settime]=useState（[]）
useffect（（）=>{
让isCancelled=false；
让时间=零；
db.ref（“userInfo/”+props？.userId）
.一次（“价值”）
。然后（（快照）=>{
如果（snapshot.val（）！=null）{
console.log（“userInfo”，snapshot.val（））
setuserinfo（snapshot.val（））
}
});
const advanceTime=（）=>{
设置超时（（）=>{
//设置（矩（）.format（））
log（“advanceTime”，moment（）.second（））
！isCancelled&&settime（矩（）.second（））；
}, 1000);
}
高级时间（）；
return（）=>{
isCancelled=true；
}
}, [])
const AddUserTime=（计时器）=>{
//这里插入DB
}
返回(
);
}