useEffect 의 첫번째 인자로 async 함수를 넘기면 안돼는 이유

React 사용시 useEffect 훅에 async 함수를 넘겨서 다음과 같은 에러를 겪은적이 한두번씩 있을것 이라고 생각합니다.

useEffect 의 콜백 함수 인자는, 콜백함수 자기 자신과 return 되는 클로저 함수를 통해 동작 하는 함수입니다. 이 클로저 함수는 clean-up 기능을 담당합니다.

하지만 async 함수는 Promise 객체를 리턴 하는 함수입니다. 따라서 내부에 clean-up 함수가 포함되어 있더라도, useEffect 가 전달받은것은 그저 Promise 객체이기 때문에, useEffect 훅에서 cleanUp 함수를 전달받을수가 없게됩니다.

function useEffect (cleanUp, deps) {
	...
    
    if (typeof cleanUp === 'function' && ***) {
    	cleanUp();
    }
}

정확히 위와 같이 구현된것은 아니겠지만, 개념적으로 접근해보자면, 위와 같은 코드로 동작할것입니다.

따라서, callback() 함수자체는 실행되어 내부에서 무엇인가 side effect 를 일으켯지만, clean-up 함수는 promise 를 전달받아 실행되지 못하고 이는 메모리 누수를 초래하게 될수 있습니다.

정리 하자면, 콘솔에서 알려주는 내용처럼 effect function 은 아무것도 반환하지 않거나 clean-up 을 위한 함수만 반환해야하는데 promise 객체가 반환되어 clean-up 을 실행할수 없기 때문에 에러를 발생시키는 것 입니다.