Warning: Can't perform a React state update on an unmounted component.

[vdo9]

I am getting this error:

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 LoadingTimeout...

I have tried using useMemo and useEffect, also this error persist only for rendering PDFs. I think it is because <DocViewer /> is unmounting and mounting..

[Prakash730]

@cyntler - I am also facing this issue while using <DocViewer> inside my react functional component. Can you please help. Need to use this wonderful library in my application

[cyntler]

@vdo9 @Prakash730 Thanks for your requests but I really need to know more Informations to help. Can you provide me your code here? I have to see how you are using the library in your projects.

[vnt-83]

@cyntler I have same error after open and render:

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 LoadingTimeout (webpack://front-admin-ui/./node_modules/@cyntler/react-doc-viewer/dist/esm/components/LoadingTimout.js?:11:23)
    at Contents

My code:

import PropTypes from "prop-types";
import {withStyles} from "@mui/styles";
import {Dialog, Slide} from "@mui/material";
import {forwardRef} from "react";
import DocViewer, {DocViewerRenderers} from "@cyntler/react-doc-viewer";

const Transition = forwardRef(function Transition(props, ref) {
    return <Slide direction="up" ref={ref} {...props} />;
});

const dialogDocViewerStyle = ({});

function DialogDocViewer(props) {

    const {classes} = props;
    return (
        <Dialog
            fullScreen
            open={props.open}
            onClose={props.onClose}
            TransitionComponent={Transition}
        >
            <div>

                <DocViewer
                    documents={[{uri: props.file, fileName: props.fileName}]}
                    pluginRenderers={DocViewerRenderers}
                />

            </div>

        </Dialog>
    );
}

DialogDocViewer.propTypes = {
    classes: PropTypes.object.isRequired,
    file: PropTypes.string.isRequired,
    fileName: PropTypes.string.isRequired,
    open: PropTypes.bool.isRequired,
    onClose: PropTypes.func.isRequired,
}

export default withStyles(dialogDocViewerStyle)(DialogDocViewer);

In parent component:

...

    const [openViewer, setOpenViewer] = useState(false);
    const [fileView, setFileView] = useState(undefined);
    const [fileViewName, setFileViewName] = useState(undefined);

    const onViewFile = (sourceName, fileData) => {
        setFileView(fileData);
        setFileViewName(sourceName);
        setOpenViewer(true);
    }

    const onViewClose = () => {
        setOpenViewer(false);
        setFileViewName(undefined);
        setFileView(undefined);
    }

...

    return (
        <>
            {
                openViewer
                &&
                <DialogDocViewer
                    open={openViewer}
                    file={fileView}
                    fileName={fileViewName}
                    onClose={onViewClose}
                />
            }

            <Paper>

...

            </Paper>
        </>
    );

...