什麼是 Cleanup Function？

在 React 中，useEffect 允許我們執行副作用操作，同時還提供了一種清理這些副作用的機制。

1. Cleanup Function 是一個在 useEffect 內部返回的函式，並且是可選的。

function App() {
  useEffect(() => {
    ...

	// Cleanup Function（可選）
    return () => {};
  });
}

2. Cleanup Function 會在兩個不同的場合執行
   a. 再次執行 effect 之前：當 effect 中的依賴發生變化，React 將先執行 Cleanup Function，然後再運行新的 effect。
   b. 元件卸載之後：當包含該 effect 的元件被卸載時，Cleanup Function 也會被執行。
3. 每當元件重新渲染或卸載後副作用不斷發生時就有必要使用 Cleanup Function。
4. 每個 effect 應該只做一件事，為每個副作用使用一個 useEffect，這使得 effect 更容易清理。

透過 Cleanup Function 清理副作用

讓我們看一個範例，展示了如何使用 Cleanup Function 來清理副作用：

function App() {
  useEffect(() => {
	// 副作用：設定網頁標題
	document.title = `Movie | ${title}`;

	// Cleanup Function：在這裡重置標題
    return () => {
      document.title = `usePopcorn`;
    };
  });
}

在這個範例中，我們在 useEffect 中設定了網頁標題，同時在 Cleanup Function 內將標題重置為 usePopcorn，這確保了在元件重新渲染或卸載後，標題會被正確地還原。

結語

Cleanup Function 是 useEffect 中的一個重要概念，它使我們能夠有效地管理副作用，透過 Cleanup Function，我們可以確保元件在卸載或重新渲染時清除副作用。