其實react官方的hook還有滿多的。
比如：

• useImperativeHandle
• useLayoutEffect
• useDebugValue
• useDeferredValue
• useTransition
• useId

不過這些比較沒有這麼常出現，如果之後有機會再好好的研究一下（沒錯，我也還不會）。

那麼，就直接進入到hook的最終篇：自定義hook。

我自己會覺得，hook其實有點類似一種功能性的component，把一個會重複利用到的東西，整包抽出來，要用的時候再呼叫。
所以整個自定義的hook，裡面可以包含useState、useEffect或者其他你想使用的hook，但凡會重複利用到的邏輯，都可以包進來。

關於hook怎麼用，react是這麼說的：

換句話說，它就像一個普通的 function，它的命名開頭應該總是為 use。
是的，重點就是以use開頭！這！就是重點

那麼就先來看一下code吧！

首先，我們會有一個自定義的hook，他需要是use開頭。
接下來，就像是怎麼寫compoment一樣寫就好了。
（好好笑，因為真的不用解釋，一路走來我們都看得懂這些東西了吧？）

import { useState, useEffect } from "react";

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

接著，呼叫這個你自定義的hook。
該傳什麼參數就傳什麼參數，就跟我們用其他的hook一樣。

import ReactDOM from "react-dom/client";
import useFetch from "./useFetch";

const Home = () => {
  const [data] = useFetch("https://jsonplaceholder.typicode.com/todos");

  return (
    <>
      {data &&
        data.map((item) => {
          return <p key={item.id}>{item.title}</p>;
        })}
    </>
  );
};

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(<Home />);

那麼，我們好像就，這樣走完了hook的旅程了？