Hook 拯救世人，在了解 useState 之後，來了 useEffect

• 可用在持續驗證，搭配 setTimeout 以及 cleanup function
• 抓資料
• 當想觸發其他行為，side effect 的效果

useEffect(() => { function return cleanUpFunction }, [ dependencies ])

• function: 放入要執行的 function
• cleanUpFunction (optional): 放入要 cleanup 的 function (我自己取名 cleanUpFunction XD)
• dependencies (optional): 放入要追蹤的資料

在 React 生命週期中 (ES6 class style)

useEffect 可視為 componentDidMount + componentDidUpdate + componentUnmount的組合

---

HOW

每次 Render 畫面完後，會執行 useEffect 裡面存的 function

每 一 次 !!

而每當要重新執行同一個 function 時，會 run clean up 的 function

---

Dependencies

除了每次渲染畫面執行一次 useEffect

也可以搭配 useState 監聽特定資料，變動時，再次執行 useEffect 中的 function

from 官方範例

useEffect(() => {
  document.title = `You clicked ${count} times`
}, [count]) // 僅在count資料變動時才重新執行 effect

Dependencies 要注意：

• 只能存放 元件內會變動 的資料 (setState 的、從父元件 props 來的)
• 元件外的資料不能存放，對 React 來說那些東西都不會變動 (API、元件外宣告的變數)

---

CleanUp

在裡面的 function 回傳return 一個 function 即視為 cleanUp 使用

• 要 re-run effect 時，會執行 cleanUp function
• 當元件從 DOM 上被移除時，也會執行 cleanUp function

from 官方範例

useEffect(() => {
  ChatAPI.subscribeToFriendStatus(props.friend.id, handleStatusChange)

  return () => {
    ChatAPI.unsubscribeFromFriendStatus(props.friend.id, handleStatusChange)
  }
}, [props.friend.id])