[React Hook 筆記] 從最基本的useState, useEffect 開始

(新增 typing 於 2023/11/7)

React Hook 系列文

1. 從最基本的 Hook 開始 useState, useEffect
2. Memorized Hook- useMemo, useCallback
3. useRef
4. useContext
5. useReducer
6. useLayoutEffect
7. Custom Hooks

本來不想寫這篇的，因為網路上實在太多關於 useState 跟 useEffect 文章，但還是想要把一些重點寫出來

🔖 文章索引
1. 用 React Hooks 的規則
2. useState
3. useEffect
4. useState/useEffect in typeScript

Why use hooks?

自己寫 React 也兩年了，針對 Hook 跟舊的 Class 寫法跟做比較。

• Keep state logic close to where it is used: 不需要像 Class 再分 View 跟 Lifecycle 的檔案
• Often requires less code and less prop passing: 可以用更少的程式碼撰寫
• Can be more granular: 只需要更新 specific dependencies 變動就好
• Improves reliability and allows for logical grouping of functionality
• 藉由 custom hook 更容易 reuse

想轉 Hooks 的成本也蠻低的，不需要整個專案都 migrate 到 Hooks，他可以跟 Class 並存，所以若手上有 React 案子可以先從小的 components 先試試看 Hooks。

用 React Hooks 的規則

使用 Hooks 前有一些要遵守的規則

• 只能在 React Function 中呼叫 Hook。 class component 是不能用的

// Class-based Component
class App extends React.component {
  render () { return </> }
}
// Function Component
function App () {
}

• 只在最上層呼叫 。不要在迴圈、條件式或是巢狀的 function 內呼叫…