React.js No-op in component?

Question

I believe that the no-op is coming from my useEffect so, I attempted to implement a clean up. However, I'm still having issues with the no-op. This is the error:

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. in ExportFormats (created by Parent) in div (created by ForwardRef(Grid)) in ForwardRef(Grid) (created by WithStyles(ForwardRef(Grid))) in WithStyles(ForwardRef(Grid)) (created by Parent)

Here is my useEffect implementation:

React.useEffect(() => {
    let isSubbed = true;
    const fetchFormats = async (subbedStatus) => {
        getEGMFormats(enums.EGM_EXPORT_FORMATS)
            .then((data) => {
                subbedStatus && setResponse(data.data);
            })
            .catch((err) => {
                subbedStatus && setErrorStatusCode(err.response.status);
            })
            .finally(() => {
                subbedStatus && setIsSubmitting(false);
            });
    };
    fetchFormats(isSubbed);
    return () => {
        cancelAxios();
        isSubbed = false;
    };
}, [setErrorStatusCode]);

The cancelAxios function call is being imported, but it functions like so:

export const cancelAxios = () => source.cancel();

Anything I'm doing wrong here or could it be elsewhere in my component? This is the only useEffect in the component?

Dmitriy Mozgovoy Dmitriy Mozgovoy · Accepted Answer · 2021-04-15T23:12:18

Hm... You should use the flag variable from the closure, not the function argument...

React.useEffect(() => {
    let isSubbed = true;
    const fetchFormats = async () => {
        getEGMFormats(enums.EGM_EXPORT_FORMATS)
            .then((data) => {
                isSubbed&& setResponse(data.data);
            })
            .catch((err) => {
                isSubbed&& setErrorStatusCode(err.response.status);
            })
            .finally(() => {
                isSubbed&& setIsSubmitting(false);
            });
    };
    fetchFormats();
    return () => {
        cancelAxios(); // not sure what is this...
        isSubbed = false;
    };
}, [setErrorStatusCode]);

React.js No-op in component?

1 Answers