昨天提到，useCallback不會重新渲染的特性是他的一大特色，
但結果昨天試用了一下，好像其實也跟一般的funcion沒什麼差別。

那到底重點是什麼呢？
以下是一個會陷入無限環圈的案例，一樣可以一眼掠過。

const ChildComponent = ({ count, add }) => {
      useEffect(() => {
        add()
      }, [ add ]);

      return (
        <div onClick={add}>
          {count}按我
        </div>
      )
}

const App = () => {
  const [count, setCount] = useState(0);
  
   const add = () => {
      console.log('test')
      setCount((pre) => pre + 1)
  }

  return (
    <div>
      <ChildComponent count={count} add={add} />
    </div>
  )
}

const root = ReactDOM.createRoot(document.querySelector('#root'));
root.render(<App />);

首先，我們先建立一個子組件，在這個component裡面，我們綁了一個onClick事件叫做add，是一個計數器，會讓count+1。
並且用了useEffect來執行這個動作。

const ChildComponent = ({ count, add }) => {
      useEffect(() => {
        add()
      }, [ add ]);

      return (
        <div onClick={add}>
          {count}按我
        </div>
      )
}

接著在父層先設好count，然後建立function讓count+1，為了讓一切更清楚，也console.log('test')來看一下呼叫的情形。
最後在父層呼叫剛剛具有點擊事件的子層並把變數跟函式都傳遞過去。

const App = () => {
  const [count, setCount] = useState(0);
  
   const add = () => {
      console.log('test')
      setCount((pre) => pre + 1)
  }

  return (
    <div>
      <ChildComponent count={count} add={add} />
    </div>
  )
}

然後

哈哈哈哈停不下來了哈哈哈哈哈哈哈。
沒錯，因為我們不斷地呼叫函數-改變count-觸發re-render-渲染-呼叫函數.........。
（誰來支援一下上次那張梗圖）

這時候，我們就需要把一般函式變成useCallback，因為他不會觸發re-render，
所以可以終止這個無限的迴圈。

  const getData = useCallback(() => {
      console.log('test')
       setCount((pre) => pre + 1)
  }, [])

所以，當我們需要有父組建、子組建，並且需要避免不斷的重複render的話，
useCallback就是一個很好的東西。

那麼，我們明天見吧！
（要來去看演唱會惹）
（誰在乎？）

參考資料
https://israynotarray.com/react/20220928/3362055744/
https://ithelp.ithome.com.tw/m/articles/10270317