React.useState 一行代码两个坑

[thjttk]

eg1

function getExpensiveData() { }

function App() {
  const [data, setData] = useState(getExpensiveData())
  return <div>{data}</div>
}

我们知道 useState 支持传 function，用于初始值获取比较耗的场景。这里属于 typo 了，传了 function 的调用，而不是 function 本身，结果每次 App render 时，getExpensiveData 也会被调用一次。相当于 fn1() { fn2() }，fn1 每次调用都会调用 fn2。

eg2

function App() {
  const [Component, setComponent] = useState()
  
  useEffect(() => {
    import('some-pkg').then(pkg => setComponent(pkg.default))
  }, [])

  return Component ? <Component /> : null
}

这个例子的现象是 pkg.default 是个 function Component，但执行到 return 这一行变成了 React Element 😂
问题是在 useState 里存放了 function 类型的数据。
我们知道 setComponent 的参数除了支持传值，还支持传 function，setComponent(prevState => return newState)，当在 state 存的是 function 的时候，React 无法区分你存的是 function 还是用的是 setState 的 function 参数模式，因此 React 会帮你调用一下这个函数。例子 2 的话 function Component 调用完就变成了 React Element。

结论：

1. 注意类型，fn 和 fn() 是两回事
2. useState 不适合存放函数类型的数据，可以改成一个对象