Re: 新手让网页 act 起来: Day25 - useMemo 和 useCallback

前言

在前面几天介绍了使用了 useCallback 或 useMemo 来做效能优化，不知道会不会有人跟我一样，在刚了解完这两个 hooks，就想说之後我在 function component 中定义的 callback 都要用 useCallback 包起来让它只会生成一个实体，或是用 useMemo 来记住某些值。今天就让我们来聊聊，为什麽没事不要用 useCallback 或 useMemo 吧！

范例

function App() {
  const [click, setClick] = React.useState(0)
  const clickHandler = () => { setClick(prev => prev + 1) }

  return (
    <div>
      <button onClick={clickHandler }>{click}</button>
    </div>
  )
}

ReactDOM.render(<App />, document.getElementById('root'))

上面有个简易计数器，clickHandler 做的事情很单纯就是将 click 的值加上一。这个时候当我们使用 useCallback 包起来，可能会想说之後每一次 count 改变我们的 clickHandler 的都会是跟第一次宣告的一样。不会再增加了。看起来好像效能比较好～～

const clickHandler = React.useCallback(() => {
  setClick(prev => prev + 1)
}, [])

但事实上并非如此，我们来把传进去的 callback 拆到外面去看看

const clickHandler = () => { setClick(prev => prev + 1) }

const memorizeClickHandler = React.useCallback(clickHandler)

仔细观察会发现，其实当我们每一次 re-render 都会产生一个新的 clickHandler 然後丢到 useCallback 作为参数，并且呼叫 useCallback ，这个时候会根据 dependency array ，去比对要会传新的 clickHandler 还是旧的。以上面的范例来说，跟没有使用 useCallback 的情况比起来，程序码的复杂度提高了，要处理的东西更多了，反而更不好。

那 useMemo 呢？ useMemo 也是同样的概念，例如：

function double(number){
  return 2 * number
}

function App() {
  const [number, setNumber] = useState(1)
  const value = useMemo(() => double(number), [number])
  // ...
}

double 这个函式不是一跟特别昂贵的计算，但使用 useMemo 特别将它记录起来，就会有种小题大作的感觉。事实上也是，因为就像上面提到的，当我们使用 useCallback 或是 useMemo 程序码的复杂度会提高，要处理的东西更多。

所以，当我们在使用他们做效能优化的时候，要想到他们事实上是有代价的，而要处理的效能问题是否与值得付出这个代价。

以上就是今天的分享，如果有任何问题都欢迎在下方留言！

该文章同步发布於：我的部落格

参考文章
https://kentcdodds.com/blog/usememo-and-usecallback