In the strict mode of react it is running this function “fetchLiveChatMsg(liveChatId);” twice in setInterval, but when the unmounting happen it still keeps running this function even the interval is clear but in the non-strict mode of react everything is working fine
NOTE: I’ve already tried the useRef in intervalId, pageToken, it is still working the same
import { useEffect, useRef } from "react";
import LiveChatMsg from "./LiveChatMsg";
import { useDispatch, useSelector } from "react-redux";
import { addLiveMsg } from "../utils/LiveChatSlice";
const LiveChat = ({videoId}) => {
const dispatch = useDispatch();
let intervalId;
let pageToken;
const liveMessages = useSelector((store) => store.liveChat.messages);
const fetchLiveChatMsg = async (liveChatId) => {
const response = await fetch(`https://www.googleapis.com/youtube/v3/liveChat/messages?pageToken=${pageToken ? pageToken : ""}&liveChatId=${liveChatId}&part=snippet,authorDetails&key=${import.meta.env.VITE_GOOGLE_API_KEY}&maxResults=1`);
const data = (await response.json());
pageToken = data.nextPageToken;
console.log(pageToken);
console.log(data);
dispatch(addLiveMsg(data?.items[0]));
}
const fetchLiveId = async () => {
const response = await fetch(`https://www.googleapis.com/youtube/v3/videos?part=liveStreamingDetails&id=${videoId}&key=${import.meta.env.VITE_GOOGLE_API_KEY}`);
const liveChatId = (await response.json())?.items[0]?.liveStreamingDetails?.activeLiveChatId;
if(liveChatId) {
console.log(liveChatId);
intervalId = setInterval(() => {
fetchLiveChatMsg(liveChatId);
}, 3000);
}
}
useEffect(() => {
fetchLiveId();
return () => {
console.log(intervalId);
clearInterval(intervalId);
}
}, []);
return (
liveMessages && <div className="w-2/5 flex border-[1.5px] rounded-xl p-[8px] h-[450px] flex-col-reverse gap-[10px] overflow-y-scroll bg-gray-50">
{
liveMessages.map((el, idx) => <LiveChatMsg key={idx} profile={el?.authorDetails?.profileImageUrl} author={el?.authorDetails?.displayName} msg={el?.snippet?.displayMessage} />)
}
</div>
);
};
export default LiveChat;
I want while unmounting the “fetchLiveChatMsg(liveChatId);” function doesn’t run because the timer id of the setinterval is cleared