Passing an async Function Directly to useEffect

Marking the effect callback as async makes it return a Promise instead of a cleanup function or undefined, and React only recognizes a returned function as a valid cleanup - it silently ignores the Promise

AbortController cannot be instantiated inside an async function, so the controller variable is undefined by the time cleanup would run

useEffect cleanup functions only work when the dependency array is omitted entirely, not when it is an empty array

The cleanup return statement is placed after the await, and React strips any code that appears after an await inside an effect