[Problem/Question]
When I open the sendbird component, this error occurs
Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.
at ChannelListProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-DFGDUASH.js?v=ee64f805:795:5)
at div
at http://127.0.0.1:5173/node_modules/.vite/deps/chunk-PG3X6BPR.js?v=ee64f805:4536:46
at Box3 (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-PG3X6BPR.js?v=ee64f805:6941:19)
at VoicePlayerProvider (http://127.0.0.1:5173/node_modules/.vite/deps/chunk-PIRVV4D2.js?v=ee64f805:3066:5)
here is my component in sendbird
import React, { useState } from 'react';
import '@sendbird/uikit-react/dist/index.css';
import { Mui } from '@onedesign/ui';
import { useSendbirdService } from 'services/SendbirdService';
import { GroupChannel } from '@sendbird/chat/groupChannel';
import SendbirdProvider from '@sendbird/uikit-react/SendbirdProvider';
import { useLoginService } from 'services/LoginService';
import { ChannelListProvider } from '@sendbird/uikit-react/ChannelList/context';
import ChannelListUI from './ChannelListUI';
const { Box } = Mui;
const SendbirDialog = () => {
const [currentChannelSelected, setCurrentChannelSelected] =
useState<GroupChannel>();
const { loginUser } = useLoginService();
const { sendbirdAccessToken, myColorSet } = useSendbirdService();
if (!loginUser?.staffNumber || !sendbirdAccessToken) return null;
return (
<Box
sx={{
pl: '32px',
pr: '32px',
pb: '120px',
pt: '32px',
}}
>
<SendbirdProvider
appId={import.meta.env.VITE_SENDBIRD_APP_ID}
userId={loginUser?.staffNumber}
colorSet={myColorSet}
accessToken={sendbirdAccessToken}
>
<Box
sx={{
display: 'flex',
height: '100%',
}}
>
<ChannelListProvider
queries={{
channelListQuery: {
includeEmpty: true,
},
}}
disableAutoSelect={true}
isTypingIndicatorEnabled={true}
>
<ChannelListUI
setCurrentChannelSelected={setCurrentChannelSelected}
currentChannelSelected={currentChannelSelected}
/>
</ChannelListProvider>
</Box>
</SendbirdProvider>
</Box>
);
};
export default SendbirDialog;
here is the parent component to control open or close the sendbird component
const [openSendbird, setOpenSendbird] = useState(false);
....
const handleOpenSendbirdDialog = () => {
setOpenSendbird(prev => !prev);
};
...
{openSendbird && (
<Box
sx={{
position: 'absolute',
top: '30%',
left: '-255%',
}}
>
<SendbirDialog />
</Box>
)}
[UIKit Version]
“@sendbird/uikit-react”: “^3.6.7”,
[Frequency]
everytime
[Current impact]
This error occurs every time the component is opened