[React] useEffect()의 Callback으로 async 함수를 쓰지 않는 이유

오류

useEffect callback 함수에서 async await을 사용하는 경우 destory is not a function이라는 에러를 만나게 된다.

async await은 promise 객체를 반환하게 되는데 useEffect는 promise 값을 받게되어 에러가 발생한 것이다.

 

다음 두가지 이유를 생각하면 못쓰는게 당연하다.
1. async 함수는 promise객체를 리턴한다.
2. useEffect 훅에 전달되는 callback 함수의 리턴값은 clean-up function이여야 한다.

 

실제로 useEffect함수에 async를 콜백으로 줄때 다음과 같은 경고문을 볼 수 있다.

// Warning: Effect callbacks are synchronous 
// to prevent race conditions
useEffect(async () => {
  const products = await fetch(`${API_URL}/products.json`);
  setProducts(products);
}, []);

 

해결

해결방법은 간단하다. callback 함수에 바로 async를 주는 것이 아닌 callback 함수로 함수 내부에 async, await을 선언한 함수를 반환해주는 것이다.

 

따라서 async/await을 useEffect 훅안에 사용하고자 한다면 아래와 같이

1. Self-invoking Anonymous Function을 사용하거나

useEffect(() => {
    (async function() {
      const products = await fetch(`${API_URL}/products.json`);
      setProducts(products);
    })();
}, []);

1. Nested Named Function을 사용하도록 하자.

useEffect(() => {
    const fetchData = async () => {
      const products = await fetch(`${API_URL}/products.json`);
      setProducts(products);
    });

    fetchData();
}, []);

https://velog.io/@jejun5/%EC%99%9C-useEffect%EC%9D%98-Callback%EC%9C%BC%EB%A1%9C-async-%ED%95%A8%EC%88%98%EB%A5%BC-%EB%AA%BB%EC%93%B0%EB%8A%94%EA%B1%B8%EA%B9%8C

# 왜 useEffect()의 Callback으로 async 함수를 못쓰는걸까?

https://velog.io/@zerozoo-front/useEffect-%EB%82%B4%EB%B6%80%EC%97%90%EC%84%9C-async-await-%EC%9D%84-%EC%82%AC%EC%9A%A9%ED%95%98%EC%9E%90

useEffect 내부에서 async, await 을 사용하자