React-[useEffect篇]- useEffect中的第二個參數dependency array以及搜索功能

依賴項/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 筆記