什麼是 React Hook

Hook的用法是從React v16.8版本引入的一個功能，它允許讓我們在function cpmponent中使用狀態管理和生命週期的方法，在React中通常是use開頭都稱作Hook(例如：useState,useEffect,useReducer）React有提供自己的Hook，我們也可以自行創建Hook。

為什麼要使用Hook? 它解決了什麼問題？

1.狀態重複使用性

使用 class component 時要重複使用狀態的邏輯會變得很複雜，一般做法會是用 higher-order components 或 render props 的方式進行，這樣的做法往往會需要重構元件，也有可能造成 Wrapper Hell，讓之後為維護上變得困難。

React Hook 出現則是來改善這個狀況，它允許元件之間重複使用相同邏輯，代表我們不用再對元件進行複雜的重構，即可使用重複使用相同邏輯的狀態

如果將邏輯封裝在自定義 Hook 中也代表著當需要修改這段邏輯時，只需在一個地方進行修改，而不需要在多個元件中逐一修改

2.簡化元件的結構

在Hook出現之前，使用 class component 很常會讓邏輯變得複雜難以管理，如果在同一個元件內有多種邏輯，例如事件、資料獲取，它們可能會同時存在同一個生命週期裡（componentDidMount），將會變得難以理解。
Hook出現後，它提供了解決方案是將邏輯依照功能進行程式碼組織，而不是以生命週期，在Hook的使用下，我們可以將(事件、資料獲取)用兩個useEffect進行管理，透過模塊化的方式來簡化元件的結構。

3.自定義Hook，社群的力量

除了React本身提供的Hook方法，我們也可以自行定義符合需求的Hook
Hook 的廣泛應用和社群的力量，有了許多第三方庫和資源可供選擇，從基本的狀態管理和表單處理到更專業的功能，如圖形處理或動畫等，由於社群的活躍，這些 Hook 通常會被持續更新和改進，代表我們可以利用最理想的方式和功能。
例如：React-Hook-Form

Hook 使用規範

• 不能使用在巢狀 map、if...else、for...loop等
• 只能在function component 的最頂層使用
• 只能在React中使用Hook，一般的JavaScript function不行

常用的 Hook

useState

用來保存元件的狀態和改變狀態
語法

const [state, setState] = useState(initialState);

state：是當前的狀態值
setState: 呼叫setState來改變狀態
initialState: 初始狀態

元件每次渲染時，useState 都會返回一個包含兩個元素的陣列，第一個元素是當前狀態的值，第二個元素是一個用來更新該狀態的函數。

useEffect

它可以讓我們在元件中操作副作用，例如(拿api資料、手動修改DOM以及清除副作用)
基本用法

useEffect(() => {
  // 這裡的程式碼會在元件渲染後執行
  return () => {
    // 這裡的程式碼會在元件卸載或下一次 useEffect 前執行
  };
}, [dependencies]);

• 第一個參數是一個函數，其中的程式碼會在元件渲染後執行
• return的函數是可以自訂的，用在進行清除的操作，例如取消訂閱或清除計時器
• 第二個參數是一個陣列，用來放依賴項目，當依賴值發生變化時，才會再次執行這個useEffect

useMemo

用在重新渲染之間，緩存計算結果的方法
當我們有一些計算並且不希望它在每次渲染時都執行時，可以使用 useMemo 來記住該計算的結果，直到其依賴的某些值發生變化為止。

基本用法

const memoizedValue = useMemo(() => computeExpensiveValue(a, b), [a, b]);

• 第一個參數是一個產生值的函數
• 第二個參數是一個依賴陣列，只有當其中的值變化時，才會重新計算 memoized 值

參考文章
React Hooks 是什麼？能吃嗎？
React Hooks 是什麼?
useMemo