【React】カスタムフックってuse~で始めないとどうなるの？

おさらい

カスタムフックとは、React 16.8 で追加された新機能。コンポーネントからロジックを抽出して再利用可能な関数を作れることが特徴。
https://ja.reactjs.org/docs/hooks-custom.html

書き方

カウンターのカスタムフックの場合は、以下のように記述する。

import { useState } from "react";
export const useCounter = () => {
    const [count, setCount] = useState(0);
    const increment = () => {
        setCount((prevCount) => prevCount + 1);
    };
    return { current: count, increment: increment };
};

結論

おさらいはここまでで、カスタムフックってuse~で始めないとどうなるの？の問いに対しての結論。
結論としては、 利用可能だが、lint errorになる。
以下は、カウンターのカスタムフックをtestと命名した例。

公式に載ってる

結論を裏付ける情報は公式に載っている。

カスタムフックは ”use” という名前で始めるべき？ ぜひそうしてください。この規約はとても重要です。この規約がなければ、ある関数が内部でフックを呼んでいるかどうかを知る方法がなくなり、フックのルールの違反を自動でチェックすることができなくなります。
https://ja.reactjs.org/docs/hooks-custom.html

なので、この結果は公式通り。

おまけ

useから始めれば何でも良いのか

use~で始めないとlint errorになるのはわかったが、逆にuseから始めれば何でも良いのかつまり、lint errorにならないのか。

具体的には、以下を用いて検証した。

• useCounter
  • 一般的に指定する命名
• useC
  • とても短い命名
• useCounterrrrrrrrrrrrrrrr...(103文字)
  • とても長い命名
• usecounter
  • useの後に続く文字の頭が小文字の命名
• useカウンター
  • ひらがなの命名

以下の結果になった。

• useCounter ✅
• useC ✅
• useCounterrrrrrrrrrrrrrrr...(103文字) ✅
• usecounter ❌
• useカウンター ❌

最終的な結論

useから始めるだけではなく、その後の文字はアルファベット且つ大文字にしなければならない。またその文字数は問わない。