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

다음 두가지 이유를 생각하면 못쓰는게 당연하다.
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);
}, []);

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

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

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

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

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

    fetchData();
}, []);