依賴項/dependency array
預設中，effects 會在每次元件渲染之後才會執行（但這不是我們每次想要的），因此，我們可以透過寫入條件在依賴項參數中來預防這個情況。
若沒有dependency array React不知道何時應該要執行effect
而如果我們有寫入條件在依賴項中，只要這些條件改變，effect就會執行一次
每一個在useEffect中使用的state 以及 變數 和 prop 都必須要寫入在依賴項中，因為當這些數值改變，effect才會執行他的任務，也能保持元件資料與內部系統(UI)的一致/同步性。
最好的方式就是把useEffect也想成是事件監聽器event listener ，他會監聽該依賴項中寫入的參數是否有改變，只要有改變，就會觸發執行該useEffect
到底useEffect是在什麼階段發生的？
useEffect中的程式碼常常會需要跑比較長的時間的任務(例如fetch data)，所以不會在瀏覽器渲染時或是渲染之前，來執行useEffect的程式碼，這樣會造成畫面是舊的ui未更新是舊版本並且造成阻塞block
第二個原因是因為useEffect如果有設定state那麼會需要額外的渲染來更新畫面->
哪一個useEffect會先執行？
我在增加依賴項的條件來比對誰會先執行：
把搜尋bar中的query state和useEffect 所fetching 的data保持資料一致性
先看這段程式碼：
因為依賴項裡面沒有寫上使用的變數，才會一直發生錯誤搜索不到資料
在useEffect 的依賴項中加入query做監聽資料是否改變
並且在執行fetch data的程式碼之前加入一個判斷：
//在執行這個fetch data 以前做一個判斷
//增加一個條件
if (query.length < 3) {
setMovies([]);
setError("");
return;
}
這樣在搜尋框中輸入的字串要三個字以上才會啟動fetching data的請求
本篇筆記，出自Udemy-The Ultimate React Course 2023: React, Redux & More 筆記
