什麼是Custom Hooks？

Custom Hooks 的核心概念是可重用性，在 React 中，我們可以將可重用的邏輯封裝成 Custom Hooks，這樣一來，就可以在多個元件之間重用這些邏輯片段。

Custom Hooks

首先讓我們定義一個函式，並確保函式名稱以 use 開頭，接著，我們可以在函式內部使用 React 的內建 Hooks，並定義要封裝的邏輯。

通常會在最後返回一個陣列或是物件，其中包含我們希望元件能夠訪問的狀態或函式。

// Custom Hooks 名為 useMovies
function useMovies(query) {
  const [movies, setMovies] = useState([]);
  const [isLoading, setIsLoading] = useState(false);

  useEffect(() => {
    async function fetchMovies() {
      setIsLoading(true);
      const json = await fetch(`http://www.omdbapi.com/s=${query}`);
      const data = await json.json();
      setMovies(data);
      setIsLoading(false);
    }
    fetchMovies();
  }, [query]);

  // 將希望重用的狀態或函式返回
  return {
    movies,
    isLoading
  };
}

接著我們就可以使用 useMovies 這個 Custom Hooks。

function App() {
  const [query, setQuery] = useState("");
  const { movies, isLoading } = useMovies(query);
}

什麼時候需要 Custom Hooks？

如果我們想要重用 UI 元件，我們知道可以使用 React 元件，但如果我們想要重用 React 中的邏輯，首先需要問自己一個問題：想要重用的邏輯是否包含任何 React Hooks？如果不包含，我們只需使用一個常規的函式。

如果邏輯包含任何 React Hooks，則不能將該邏輯單獨提取到常規函式中，而是需要創建一個 Custom Hooks。

常規函式（沒有包含任何 React Hooks）

function sum(a, b) {
  return a + b;
}

Custom Hooks（包含 React Hooks）

function useCount(value) {
  const [count, setCount] = useState(value);

  function handleDecrement() {
    setCount((count) => count - 1);
  }

  function handleIncrement() {
    setCount((count) => count + 1);
  }

  return {
    count,
    handleDecrement,
    handleIncrement
  };
}

結語

Custom Hooks 可以提高程式碼的可重用性和可維護性。通過將常見的邏輯片段封裝到 Custom Hooks 中，我們可以在整個專案中重用這些邏輯。

這邊要特別注意，Custom Hooks 的名稱必須以 use 開頭，以便 React 區分一般函式跟 Custom Hooks。