I have given a setInterval function inside a useEffect as it has to dispatch an action for every 28 min, and this setInterval will start only when the user is logged in (isLogged variable provides us whether the user is logged in or not), it is working as expected, but if I open a new tab, it starts a new 28 min interval in that new tab which I don't expect.

My Requirement -

• Every 28 min there should be a dispatch event.
• If the user logs in to one tab and works for 20 min and opens a new tab, in the next 8 min dispatch event should occur in both the tabs at the same time.

Code

const isLogged = useSelector((state) => state.userReducer.loggedIn); // provide boolean value
const intervalId = useRef(null);

useEffect(() => {
intervalId.current = setInterval(() => {
   // To check in between if user is logged out and to stop setInterval
   if(isLogged === false){
      clearInterval(intervalId.current);
      return;
}
    dispatch(refreshUserToken());
}, 1000 * 60 * 28);

    return () => {
   clearInterval(intervalId.current)
}
},[isLogged])

I don't have any idea on how to do this concept, could someone please help me to solve this problem? Thanks in Advance !!