React Hook - useEffect

useEffect

useEffect 讓你可以使用 function component 中的 side effect，side effect 包含資料 fetch 或手動改變 React component 中的 DOM。 因此當每次更新時，在 useEffect 中沒有設定相依參數，將會持續被執行。

:::tip Effect 重點

任何會產生 side Effect 的行為都應該 Effect Hook 裡執行。 他和 componentDidMount，componentDidUpdate，與 componentWillUnmount 有著同樣的宗旨，但整合進一個單一的 API。

:::

useEffect 有兩個參數:

1. 第一個參數是 Effect function
2. 第二個則是 depandancy array，可以根據不同 depandancy 決定何時要執行 Effect function

在常見的用法中，通常會代入相依的參數，來最佳化 useEffect 使用。 這邊會用陣列的方式作為可選的第二個參數傳遞給 useEffect，例如：

React.useEffect(() => {
  console.log(`資料一：點擊 ${countOne} 次`);
}, [countOne]); // 初始後，僅更新 countOne 會觸發

:::tip 若只要在元件載入執行一次 useEffect，可以帶入空陣列

React.useEffect(() => {
  console.log(`執行一次`);
}, []);

:::

圖片為 useEffect 各種狀況的參數設置：


下方補充幾個常用的方式：

Once

僅在畫面掛載完成時，執行一次，後續不管監聽的變數有什麼變化，都不會繼續監聽。

after every render

記得是 after rendering 才會執行，若你想要 before rendering 執行基本上是辦不到的 延伸閱讀: React Hook to Run Code After Render

參考：使用 Effect Hook