Lintエラー React Hook "useState" is called in function "" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".の対処

Reactでコードを書いていたらタイトルのようなエラーが出て、対処に苦戦したのでメモ。

React Hook "useState" is called in function "signup" that is neither a React function component nor a custom React Hook function. React component names must start with an uppercase letter. React Hook names must start with the word "use".

DeeLで翻訳をかけてみると下記のような結果が返ってきました。

React Hook "useState" は関数 "signup" の中で呼び出されていますが、これは React 関数コンポーネントでもなければ、React Hook のカスタム関数でもありません。Reactコンポーネント名は大文字で始める必要があります。React Hookの名前は、"use "という単語で始まる必要があります。

どうやらReactではコンポーネントの命名で大文字を使用しないといけないルールが存在するようです。

export default function signup() {}

従来は上記のように記述していました。

下記のように修正した結果lintエラーが修正されました。

export default function Signup() {}

コンポーネント名の最初の文字を大文字にすることでエラーを解決することができます