useEffect 为什么不能支持 async function?

  useEffect(async () => {
   await loadContent();
  }, []);

这种写法，应该是非常常见的需求。但是 React 本身并不支持这么做，理由是 effect function 应该返回一个销毁函数，如果用上了 async，返回值则变成了 Promise，会导致 react 在调用销毁函数的时候报错 (function.apply is undefined)。

因此，React 推荐的两种写法：

  useEffect(() => {
    // Create an scoped async function in the hook
    async function anyNameFunction() {
      await loadContent();
    }
    // Execute the created function directly
    anyNameFunction();
  }, []);

和：

  useEffect(() => {
    // Using an IIFE
    (async function anyNameFunction() {
      await loadContent();
    })();
  }, []);

我觉得都非常地不优雅，极度增加心智负担。

1. 如无必要，勿增实体。第一种方式除了定义了一个无意义的函数（还得想办法给它取名）以外，IDE 还会报 warning （ Promise 未处理）。
2. 至于方式二，更加无力吐槽。ES6 时代都 5 年了，还搞 IIFE，纯粹就是恶心人。

React 判断 useEffect 的传参到底是纯函数还是 Promise 非常简单，它为什么不做呢？这到底是设计缺陷，还是 React 偷懒，还是我傻逼？