使用 Hook 官方設定需要遵守的兩個規則，並提供了一個 linter plugin 來自動化地實行這些規則。
以下實際使用 create-react-app 創建專案，並測試是否會有規則的提醒。

Hook 的兩個規則

只在最上層呼叫 Hook

不要在迴圈、條件式或是巢狀的 function 內呼叫 Hook。

只在 React Function 中呼叫 Hook

別在一般的 JavaScript function 中呼叫 Hook。 a.k.a

• 在 React function component 中呼叫 Hook。
• 在自定義的 Hook 中呼叫 Hook。

使用 create-react-app 創建專案

npx create-react-app rules-of-hooks //創建一個 rules-of-hook 的專案 
cd rules-of-hooks/ //進入專案
npm start //啟動 Live Server

lint 的錯誤提示，示例

我們可以在單一的 component 中使用多個 State 或 Effect Hook，而 Hook 的執行順序會依照呼叫的順序執行，如違反官方訂定的規則，則會造成執行順序的錯誤。使用 create-react-app 預設會加入 eslint-plugin-react-hooks 來確保規則被遵循。

以下示例排列

• 在條件式中呼叫 Hook
• 在迴圈呼叫 Hook
• 在巢狀的 function 內呼叫 Hook

以上今天。

參考資料：
https://zh-hant.reactjs.org/docs/hooks-rules.html
https://stackoverflow.com/questions/59633005/how-is-eslint-integrated-into-create-react-app