TypeError: func.apply is not a function

Question

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.

Answer 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();
}, []);

.
.
.

Answer 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!

Answer 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();
)