useEffect 可視為 componentDidMountcomponentDidUpdate 和 componentWillUnmount 的類似組合
useEffect()有兩個參數,第一個是函式,第二個參數是陣列,稱做dependencies

useEffect 這個函式會在渲染後被呼叫,而且要注意使用,否則很容易就進入無窮迴圈,在前幾篇有寫了一個時間顯示的功能,而這功能會每秒渲染一次畫面,所以如果我只有使用第一個參數就會一直再執行這個useEffect函式裡的內容

第11行新增console.log
注意這裡的console.log,執行後再用瀏覽器查看console
最後一行有個setInterval()會讓畫面一直重新渲染

開啟瀏覽器按下F12查看的console

這裡可以發現父組件<App />的log先被執行,之後是子組件<Counter />的log被執行,然後是子組件的useEffect被執行,但因為畫面一直被渲染所以console.log(===Counter===)這一行會一直被執行,如果useEffect內有API請求,而API請求完又去setSometing,那就很有可能會是上面這樣的情況。

要阻止上述情況就要使用第二個參數,讓useEffect只會執行一次

參考資料:

useEffect 的基本使用hook – useEffect