Memory leak warning in react component using hooks

Question

I have an issue of memory leak and I get following error in my console.

"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 use Effect cleanup function."

Here is my code:

React.useEffect(() => {
        if (data) {
            // I am calling my fetch method
            fetch(logData)
                .then((response) => response.json())
                .then((data) => {
                    //logic
                    //setState called at end of logic
                    setData(data);
                });
        }
    }, [value);

Karambit · Accepted Answer · 2021-10-01 14:05:26Z

1

Maybe your component is getting unmounted due to some interaction while it is fetching the data ? like by clicking the close button (if your component has one)

to avoid running into this error you can check if your component is mounted like this

const isMounted = useRef(true);
useEffect(() => () => { isMounted.current = false }, [])

and then only setState if the component is still mounted

useEffect(() => {
    fetch(res)
        .then(res => res.json())
        .then((data) => {
            if (isMounted) {
                setState(data)
            }
        })
}, [dep])

edited Oct 1, 2021 at 14:05

answered Oct 1, 2021 at 13:57

Karambit

3544 silver badges13 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Harry Over a year ago

No, i do not have any button in my component. The code works fine but i get warning.

Karambit Over a year ago

@Developer then maybe it could be due to not cancelling the fetch request when the useEffect dependencies change

Karambit Over a year ago

@Developer maybe try cancelling the fetch request in the clean up function using AbortController()

Harry Over a year ago

Thanks for the help ! I will try above mentioned solution. Since the error do not occur often, I need to wait a bit and check.

Collectives™ on Stack Overflow

Memory leak warning in react component using hooks

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related