昨天歷經千辛萬苦，終於知道useEffect可以拿來處理程式的sideEffect。
那麼具體來說，他該怎麼使用呢？

和useState一樣，useEffect也有兩個參數。
useEffect(<function>, <dependency>)

其中前面的function一定要寫(不然用他幹嘛？)，後面的dependency根據情境可以不寫，也會因為有沒有值而有不同的效果。

那就快速來看一下怎麼用吧！

import React, { useState, useEffect } from 'react';

function App() {
  const [count, setCount] = useState(0);
  useEffect(() => {
    setTimeout(() => {
      setCount((count) => count + 1);
    }, 1000);
  });

  return <h1>I've rendered {count} times!</h1>;

}

export default App;

在這裡，我們使用function component而不是class component，並且直接在裡面呼叫了useEffect，文件是這樣說的：

在 component 中放置 useEffect 讓我們可以直接從 effect 中存取 count state 變數。我們不需要特殊的 API 來讀取它 — 它已經在 function 範圍內了。 Hook 擁抱 JavaScript closure。

也就是說，我們可以跳過煩人的this問題，直接快樂地引用state裏面的變數。

至於他又偷偷塞了一些js的專有名詞，諸如閉包closure甚麼的，就先暫時放過他。

而在這個例子裏面，我只有使用了第一個參數，就是function，這導致了這個hook沒有dependency，也就是說他會無止盡的被觸發，因為他觸發的條件就是render之後，並且沒有停止的理由。

是的，useEffect會在第一次render和每一次更新後被觸發，文件是這樣說的：

你可能會發現把 effect 想成發生在「render 之後」更為容易，而不是考慮「mount」和「更新」。

如果我們想要控制useEffect何時被觸發的話怎麼辦呢？就需要他的第二個參數dependency了。

那就是我們明天的事情啦！

參考資料：
https://www.w3schools.com/react/react_useeffect.asp
https://tecky.io/en/blog/%E5%88%B0%E5%BA%95react-hooks%E6%9C%89%E4%BD%95%E7%89%B9%E5%88%A5-%E4%BA%8C-%E6%B7%BA%E8%AB%87useeffect%E5%8F%8Ausereducer/
https://pjchender.dev/javascript/js-closure/