useEffect - 副作用處理

useEffect：資料獲取、訂閱或手動方式修改 React Component DOM 都可以稱為副作用 (side effect)。useEffect正是用來處理這些副作用的。同時 useEffect也是 componentDidMount，componentDidUpdate和componentWillUnmount這幾個生命週期方法的統一。

基本使用

基本結構用法：useEffect(callback, array)
callback：回調函式，用於處理副作用邏輯。
array (可選)：一個陣列，用於控制與執行。

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

const Example = (props) => {
  const [count, setCount] = useState(0);
  useEffect(() => {
    // 更新頁面標題
    document.title = `You clicked ${count} times`
  })
  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>
        Click me
      </button>
    </div>
  )
}

callback 副作用邏輯

useEffect(callback, array)
callback (回調函式)是useEffect的第一個參數，我們所有的副作用邏輯都應該在這裡處理。另外，我們可以在 callback 中返回一個函式，用於清理工作。