新增勾點

您可以使用效果勾點隨時留意應用程式的狀態，並執行程式碼以回應更新。我們會使用 useEffect 來註冊想要執行的函式，以回應變更。

案例

我們的應用程式可讓使用者按一下個別項目，並標示為備妥。如果某些項目尚未準備好，則需要要顯示訊息請繼續切菜。當所有項目都完成時，我們想要顯示準備工作完成！

我們會藉由新增新的狀態物件來設定此行為。我們將從效果勾點更新物件。

重要

在範例中，我們會修改 useEffect 內部的狀態。依預設，每當修改「任何」具狀態的物件時，就會執行 useEffect。此行為可以建立無限迴圈。在此迴圈中，我們會修改狀態並執行勾點，以修改狀態，進而執行勾點，周而復始。

為了避免無限迴圈，可以使用 useEffect 中的相依性參數來查看一個物件。可以在建立程式碼時這麼做。

開啟 App.jsx 檔案。
若要新增新的 state 屬性，請將下列程式碼插入至讀取的行下方：TODO: Add new state property。
```
// TODO: Add new state property
const [ prepared, setPrepared ] = useState(false);
```

若要新增效果勾點接聽程式，請將下列程式碼插入至讀取的行下方：TODO: Add the effect hook。

// TODO: Add the effect hook
useEffect(() => {
    setPrepared(recipe.ingredients.every(i => i.prepared));
}, [recipe]);

程式碼會使用 setPrepared 更新 prepared。也會使用每個方法，根據符合我們所指定準則的每個項目，傳回布林值。在我們的案例中，會檢查是否每個項目都已準備好。若沒有，方法會傳回錯誤。

useEffect 中的第二個參數會設為 [recipe]。這項設定提供相依性，以確保我們的程式碼只有在 recipe 物件變更時「才會」執行。

如果準備工作完成，現在將訊息顯示給使用者。若要這麼做，在讀取的行之下，新增下列程式碼：TODO: Add the prep work display。

{/* TODO: Add the prep work display */}
{ prepared ? <h2>Prep work done!</h2> : <h2>Just keep chopping.</h2>}

現在看看 prepared 物件。若為 true，則會顯示準備工作完成！否則，我們會顯示請繼續切菜。