CODEWITHSUNDEEP
javascriptreactjs
yung peso
yung peso

Reputation: 1766

Cleaning up axios useEffect function

I keep getting this error for my useEffect.

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

How can I stop getting this warning for my function below?

export default function GetDemo()
{

    const ListLoading = LoadingComponent(Demo);
    const [appState, setAppState] = useState({
        loading: true,
        posts: null,
    });


    useEffect(() =>
    {
        axiosInstance.get('demo/all/').then((res) =>
        {
            const allPosts = res.data;
            setAppState({ loading: false, posts: allPosts });
            
        });
    }, []);

    return (
            <ListLoading isLoading={appState.loading} buckets={appState.posts} />
    );
};

I'm not sure what to add in the useEffect dependency array, I've tried using setAppState and the state itself but still getting this warning.

Upvotes: 0

Views: 640

Answers (1)

CertainPerformance
CertainPerformance

Reputation: 370679

Check if the component is still mounted before calling setAppState:

useEffect(() => {
    let mounted = true;
    axiosInstance.get('demo/all/').then((res) => {
        const allPosts = res.data;
        if (mounted) {
            setAppState({ loading: false, posts: allPosts });
        }

    });
    return () => {
        mounted = false;
    };
}, []);

Upvotes: 1

Related Questions