'TypeError: func.apply is not a function

I'm trying to use useEffect function like that:

    const [data, setData] = useState({ courses: [] });
    
    useEffect(async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories/"
        );
    
        await setData(result.data);
    }, []);
    
    console.log(data);

return (
    <div>
        <div>{data.info1}</div>
        <div>{data.info2}</div>
        <div>{data.info3}</div>
        <div>{data.info4}</div>
    </div>
);

But when I try to use data variable it sometimes throws this error:

TypeError: func.apply is not a function
HTMLUnknownElement.callCallback
C:/asdasd/node_modules/react-dom/cjs/react-dom.development.js:188
  185 |     window.event = windowEvent;
  186 |   }
  187 | 
> 188 |   func.apply(context, funcArgs);
      | ^  189 |   didError = false;
  190 | } // Create a global error event handler. We use this to capture the value
  191 | // that was thrown. It's possible that this error handler will fire more

I don't know, where do I miss.

Solution 1:^[1]

You can only pass a normal function as argument to useEffect, and not an async function. In order to use async await in useEffect, you can write your function as an IIFE (Immediately Invoked Function Expression - you write the function and call it immediately).

const [data, setData] = useState({ courses: [] });
    
useEffect(() => {
    (async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories/"
        );
        setData(result.data);
    })();
}, []);
    
console.log(data);

return (
    <div>
        <div>{data.info1}</div>
        <div>{data.info2}</div>
        <div>{data.info3}</div>
        <div>{data.info4}</div>
    </div>
);

Or you can just create a normal named async function and then call it as below,

const [data, setData] = useState({ courses: [] });
    
useEffect(() => {
    const getResult = async () => {
        const result = await axios.get(
            "http://example.com/api/v1/categories/"
        );
        setData(result.data);
    };

    getResult();
}, []);

.
.
.

Solution 2:^[2]

This indicates that you're returning a value from useEffect that isn't a function. Looking at the code that you shared you're using async functions with useEffect a lot, which isn't supported and will trigger this error.

Can you provide more code ,so can I understand what you are trying to do!

Solution 3:^[3]

Please do not use async await, {} and [] in useEffect. solve for me

useEffect(() => {
    props.actions.something();
}, [])

if you have use

useEffect(async () => 
  await props.actions.something();
)

Solution 4:^[4]

you may write an async function separately and then call it from inside

Solution 5:^[5]

Remove return keyword which is written in useEffect resolve my issue

Solution 6:^[6]

I had the same issue while generating the random number with Math interface and by mistake I had put () parentheses after Math interface like

const randomNum = Math().random()

So, after removing () parentheses it worked

const randomNum = Math.random()

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Nihal Chandwani
Solution 3	Rahul Shakya
Solution 4	Partha Mukherjee
Solution 5	Rajendra singh rana
Solution 6	Gurjinder Singh

'TypeError: func.apply is not a function

Solution 1:[1]

Solution 2:[2]

Solution 3:[3]

Solution 4:[4]

Solution 5:[5]

Solution 6:[6]