Pubnub message and presence handler are invoked multiple times - reactjs

Question

I`m using Next.js for SSR in my app, also using Pubnub for real-time chat. So I have created my pubnub instance of chat like this in pages/index.js
const handleMessage = event => {
const { message, channel } = event;
addMessage(channel, message)
};
const handlePresence = event => {
const { state, channel, action } = event;
if (action === 'state-change') {
addPresence({
presence: { lastReadMessageTimestamp: state.lastReadMessageTimestamp },
id: channel,
})
}
};
useEffect(() => {
pubnub.addListener({
message: handleMessage,
presence: handlePresence,
});
pubnub.subscribe({
channelGroups: [channelGroup],
withPresence: true,
});
}, []);
return (
<PubNubProvider client={pubnub}>
<Fragment>
<section>
<MetaTags title={MAIN_SEO.title} description={MAIN_SEO.description} />
<Header />
<main>
{children}
</main>
</section>
</Fragment>
</PubNubProvider>
So I have 2 pages, where I should use pubnub, pages/chat.js and pages/messages.js. So while I start from messages page for example all is good, when I go from messages page to chat page, my handler for messages and presence invokes multiple times on next page(and I see for example 3 same messages in a thread), when for real I get only 1 message or only 1 presence. After reloading the page result is at should be(so I see only 1 message which came to me).

Answer 1

Fixed that issues, just added removeEventListener:
const handleMessage = event => {
const { message, channel } = event;
addMessage(channel, message)
};
const handlePresence = event => {
const { state, channel, action } = event;
if (action === 'state-change') {
addPresence({
presence: { lastReadMessageTimestamp: state.lastReadMessageTimestamp },
id: channel,
})
}
};
const pubnubListener = {
message: handleMessage,
presence: handlePresence,
}
const leaveApplication = () => {
pubnub.removeListener(pubnubListener);
pubnub.unsubscribeAll()
}
useEffect(() => {
pubnub.addListener(pubnubListener);
pubnub.subscribe({
channelGroups: [channelGroup],
withPresence: true,
});
return leaveApplication
}, []);