React.js

【React】もう迷わない!カスタムフックと自作javascript関数の違いと使い分けについて

カスタムフックと自作javascript関数の違い

項目 カスタムフック 自作js関数
トップレベル以外での使用 不可能 可能
hooksの使用 可能 不可能
命名規則 基本「useXXXX」 基本自由
返り値 なんでも可能 JSXは不可能

カスタムフックと自作javascript関数の使い分け

基本的には「ロジックの使用場所」と「ロジック内でのhooks利用」を基準に考えればOK。

ロジックの使用場所

Reactの関数外やトップレベル外ではカスタムフックが使えないので自作js関数を使う。

ロジック内でのhooks利用

自作js関数内ではフックの使用が不可能なので、フックを使用したい場合はカスタムフックを使用する。

ABOUT ME
ytakeuchi
都内在住のフロントエンドエンジニア。2016年からフリーランスとして活動中。座右の銘は「昨日よりも楽に」。好きな言葉は「効率化」。こんな性格なのでプライベートではGoogle Apps Scriptばかり触っています。