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

Sendbird Chat UIKit React
,
1

[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

3

Hello @lisalisa12332180

Welcome to the Sendbird community!

There is no memory leakage occurring actually.

It is a simple warning message, and this warning appears if you leave the screen before loading the video thumbnail.

We have conducted optimisations for fetching video thumbnails, and they will be released together in the next version.

Let me know if this helps in clarifying a few things here.

4

Did you find a solution for this?

5

Hi @alex.forne

There is actually no memory leakage occurring. It is a simple warning message, and this warning appears if you leave the screen before loading the video thumbnail.

This should be fixed in v3.1.0

6

It seems that after adding the prop accessToken={accessToken} , the child component below goes through a cycle of mount → unmount → mount. What could be the issue here?

7

@Chinmaya_Gupta
Memory leaks are mainly caused by unmounted components that continue to setState, possibly due to accessToken. Could you please help me take a look?