# React.js Hook 入門 - 3. useEffect
###### tags: `React` `Hook` `TypeScript`

## 簡介
> The Effect Hook lets you perform side effects in function components

(官方把 data fetching、setting up a subscription、手動改變 React components 中的 DOM 都稱作為 side effects。
透過使用這個 Hook，你告訴 React 你的 component 需要在 render 後做一些事情。React 將記住你傳遞的 function（我們將其稱為「effect」），並在執行 DOM 更新之後呼叫它。)

## useEffect 的用法

import React, { useEffect } from 'react'

function Counter() {
  useEffect(() => {
    console.log('This is useEffect Hook!')
  })
}

useEffect 裡面可以寫一個 function，在每次畫面渲染後執行。上面的範例中就是當每次畫面渲染後會印出 "This is useEffect Hook!"。
另外 useEffect 還可以傳入第二個參數，透過不同的搭配，可以分別處理 React 中 componentDidMount、componentDidUpdate、componentWillUnmount 這三個生命週期。接下來會分別介紹如何透過 useEffect 實際應用這三個生命週期。

### componentDidMount
componentDidMount 是指當 component 中畫面第一次渲染完後觸發的生命週期函數。一般的用法都是在 component 渲染完後會執行一些初始化的 function。

import React, { useEffect } from 'react'

function Counter() {
  useEffect(() => {
    console.log('init')
  }, [])
}

跟前一個範例不同的部分是，我傳入了第二個參數的 array 是空陣列。 useEffect 會根據 array 裡面的變數有無改變來判斷是否要執行第一個參數的 function。當 array 為空陣列時，因為沒有判斷的依據，第一個參數的 function 只會在第一次畫面渲染完成時執行，也就跟 componentDidMount 是一樣的意思。

### componentDidUpdate
componentDidUpdate 是指當 component 中有 state 改變時要觸發的生命週期函數。適合處理當某個 state 改變時要需要連帶執行的部分

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

function Counter() {
  const [count, setCount] = useState<number>(0)

  useEffect(() => {
    console.log('count was changed!')
  }, [count])
}

在這個範例中，useEffect 第二個參數的 array 我們給了 count 這個 state，這表示當 count 的 state 有改變時，不僅僅是會重新渲染，同時也會觸發 useEffect 再次執行。

### componentWillUnmount
我們在撰寫 component 時，有時候會因為需要而綁定 EventListener，這通常會發生在 componentDidMount 的階段。同時，為了避免重覆綁定 EventListener 或著是造成 memory leak，我們習慣於 componentWillUnmount 的階段將它移除。

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

function Counter() {
  const [count, setCount] = useState<number>(0)

  useEffect(() => {
    console.log('add event listener!')
    
    return () => {
      console.log('remove event listener!')
    }
  }, [])
}

根據上面的範例，第七行會在 componentDidMount 的階段執行，而第 9 行的 return function 則代表著當 component 被移除前會執行，也就是 componentWillUnmount 這個階段。

### 小結
useEffect 寫法很彈性，若不是很清楚在 useEffect 的第一個參數 function 裡面使用 return 、跟第二個參數 array 的使用時機，會造成非預期性的錯誤。畢竟不同的生命週期是為了要處理不同的情境，錯誤的在不同的週期中執行程式本來就會導致非預期的結果，這部分的觀念要仔細釐清。

##### Reference
[Using the Effect Hook](https://reactjs.org/docs/hooks-effect.html)
[React Lifecycle](https://medium.com/coding-hot-pot/react-lifecycle-%E7%94%9F%E5%91%BD%E9%80%B1%E6%9C%9F-a48683ae3922)