[Solved] React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing

Hello Guys, How are you all? Hope You all Are Fine. Today I am facing React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing in reactjs. So Here I am Explain to you all the possible solutions here.

Without wasting your time, Let’s start This Article to Solve This Error.

How React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error Occurs ?

I am running a simple async function for API calls But I am facing the following error in my console.

useEffect: useEffect function must return a cleanup function or nothing. Promises and userEffect(async()->... but you can call an async function inside an effect.

Here is my simple async function.

useEffect(async () => {
    try {
        const response = await fetch(`myAPICallHere`);
        const json = await response.json();
        setPosts(json.data.children.map(it => it.data));
    } catch (e) {
        console.error(e);
    }
}, []);

How To Solve React Hook Warnings for async function in useEffect: useEffect function must return a cleanup function or nothing Error ?

Solution 1: use a self-invoking async function

The problem is your code returns a promise and useEffect doesn’t expect the callback function to return Promise, rather it expects that nothing is returned or a function is returned. As a workaround for the warning, you can use a self-invoking async function. This code will solve your Issue.

useEffect(() => {
    (async function() {
        try {
            const response = await fetch(
                `yourApiCall`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    })();
}, []);

Solution 2: define a function and then call it

To make it cleaner you could define a function and then call it. the second solution will make it easier to read and will help you write code to cancel previous requests if a new one is fired or save the latest request response in state

useEffect(() => {
    async function fetchData() {
        try {
            const response = await fetch(
                `yourApiCall`
            );
            const json = await response.json();
            setPosts(json.data.children.map(it => it.data));
        } catch (e) {
            console.error(e);
        }
    };
    fetchData();
}, []);

Solution 3: Use fuction in this way

Instead of:

React.useEffect(() => {
    async function fetchData() {
    }
    fetchData();
}, []);

or

React.useEffect(() => {
    (async function fetchData() {
    })()
}, []);

you could write:

React.useEffect(() => {
    void async function fetchData() {
    }();
}, []);

Summery

It’s all About this issue. Hope all solution helped you a lot. Comment below Your thoughts and your queries. Also, Comment below which solution worked for you?

Also Read

• SyntaxError: invalid syntax to repo init in the AOSP code.