第二個認識的Hook是useEffect，他最主要的功能就是處理值改變後要做的事，中文又稱為副作用。

他的使用方式會是這樣的寫法

useEffect(() => {
  console.log('This is side effect')
  return () => {
    console.log('This is clean up')
  }
}, [])

第一個參數裡面是一個函式以及一個return函式，實際執行程式，得出的console??

可以發現clean up函式會在side effect執行一次(mounted)後被執行，useEffect可以讓我們簡單的在執行一次函式後馬上清除函式，避免memory leak。

// MOUNTED掛載完成
// This is my side effect

// RE-RENDER再次渲染
// This is my clean up
// This is my side effect

第二個參數是一個陣列，來控制useEffect是否執行。

1. 沒有放入任何陣列時，只會執行一次
2. 空值得情況下，每次在重新渲染畫面時就會執行
3. 若陣列內有值，當值改變時就會觸發useEffect

useEffect(() => {
  // 僅在初次畫面渲染之後執行一次
})

useEffect(() => {
  // 每次畫面渲染就會執行一次
},[])

useEffect(() => {
  // 初次畫面渲染之後執行一次，同時當陣列內的 count 發生改變時也會執行
}, [count])

可以延續Day06的範例，我們在多加一個點及次數的useState，當count數字改變時，觸發useEffect裡面的文字。

每當我點按鈕的時候除了數字會增減10外，也可以看到點擊的次數。

function App() {
  const [number, setNum] = React.useState(0);
  const [count, setCount] = React.useState(0);
  useEffect(()=>{
    document.getElementById('title').innerHTML = `You clicked ${count} times`;
  },[count])
  return (
    <>
      <div id="title"></div>
      <p>The number is {number}</p>
      <button
        onClick={() => {
          setNum(number + 10);setCount(count+1)
        }}
      >
        add
      </button>
      <button
        onClick={() => {
          setNum(number - 10);setCount(count+1)
        }}
      >
        minus
      </button>
    </>
  );
}

可以參考這個連結