🐷

Reactのstate関数名の接頭語を考える

2024/01/07に公開

はじめに

ReactでState関数を定義する際に「handle~」などの接頭語を関数名に付与しますが、接頭語にどのような意味を持たせて関数名を定義すべきかよく分かっていなかったのでまとめました。

私と同じようにstate関数に付与する名前について悩んでいる人の助けになれば幸いです。

ReactのuseStateフックから返される関数に設定される接頭語です。「set+state名」という形で定義されることが一般的です。

const [count, setCount] = useState(0);

// countの値を更新する
setCount(count + 1);

何らかのイベントを「処理する」ための関数を示します。例えば、handleChangeやhandleClickなどは、それぞれ変更イベントやクリックイベントを処理する関数を指すことが多いです。これらの関数は、イベントが発生したときに何をするべきかを定義します。

function handleChange(event) {
  setCount(event.target.value);
}

handleと似ていますが、二つの状態を「切り替える」ことを示します。例えば、toggleVisibilityは、可視性を切り替える関数を指すことが多いです。これらの関数は、現在の状態を反転させることで新しい状態を生成します。

const [isVisible, toggleVisibility] = useReducer(visible => !visible, false);

// isVisibleの値を反転する
toggleVisibility();

処理内容を類推するために、関数の接頭語はとても重要だと思っています。関数名には適切な接頭語をつけたいですね。また見つけたら更新していきます。