function RefreshComponent () {
const[isAutheticated, setisAutheticated] = useState(false);
const time = new Date(localStorage.getItem("timestamp"));
const Navigate = useNavigate();
const refresh = async (token) => {
//working code...
}
};
useEffect(() => {
if (time >= time.getMinutes + 60) { //adding 60 minutes to timestamp
setisAutheticated(true);
refresh();
}
}, [time]);
return isAutheticated === true ? <SomeView /> : <Navigate to='/' />
}
export default RefreshComponent;
Currently this code is showing following error:
The 'time' object construction makes the dependencies of useEffect Hook (at line 37) change on every render. Move it inside the useEffect callback. Alternatively, wrap the initialization of 'time' in its own useMemo() Hook
If I move the const time = new Date(localStorage.getItem("timestamp")); line inside useEffect, it may solve the issue but is that the correct way?
Also not just this error, I want to know how to write the whole useEffect code in correct way.