如何為 React 設定自訂 ESLint 規則 ?
若想為 React 專案自定 ESLint 規則，必須先 yarn eject 將 package.json 展開，然後再 src 目錄新增 .eslintrc.json 檔案自訂 ESLint 規則。
タグ : React
Class Component vs. Function Component
React Hooks 完全改變 React 原本風格，本文簡單總結 Class Component 與 Function Component 的差異。
根據 State 改變才執行 Effect Hook
useEffect() 的第二個 Argument 可傳入 Array，指定當特定 State 改變時，才執行 Effect Function。
使用 Effect Hook 清理 Side Effect
有些需要 Subscribe 的 Side Effect，如 addEventListener()，最後需要做 Unsubscribe 處理，否則會造成 Memory Leak，Effect Hook 也支援這類操作。
使用 Effect Hook 處理 Side Effect
在觀念上我們會希望在 DOM Render 完之後才處理 Side Effect，在 Class Component 我們須在 componentDidMount() 與 componentDidUpdate() lifecycle 分別處理；但在 Function Component 只需使用 Effect Hook 統一處理即可。
如何使用 useState() Toggle State ?
JSX 若要根據 State 做不同的顯示，當然可以將 JavaScript 直接寫在 JSX 內，但比較好的方式是抽成 Method 或 Function，如此可避免 JSX 內 HTML 與 JavaScript 混在一起的 Spaghetti Code。
如何使用 useState() 取得正確 State ?
React 的 setState() 或 useState() 的 Setter，其實都不是立即更新 State，因此直接從 State 取值，並不是最好的做法。
使用 State Hook 處理 State
以前只能在 Class Component 處理 State，現在也能在 Function Component 以 State Hook 處理 State。
React Hooks 初體驗
React 16.8 的 Hooks 橫空出世後，其 Function Component 也能有 State 讓大家驚豔不已，React 從此可以不用寫 Class Component，朝 Class-free 又邁進一大步。