【React】hookを使うときのルール

React

こちらの書籍より学ばせていただいたことをまとめています。

書籍の説明

書籍名: Reactハンズオンラーニング 第2版 ―Webアプリケーション開発のベストプラクティス
著者: Alex Banks 著
出版社: オライリージャパン 発行
発売日: 2021/8/6

Reactのhookを使う際の3つのルールをまとめました。

ルール1:分割する

ひとつのhookに多くの役割を持たせない。

これはなぜかというと、

コンポーネントが描画されると、Reactはhookの戻り値および依存配列を内部的な配列に格納します。

それによりReactはどの値が変化したか検知ができるような構造になっています。

そのため、役割ごとにhookを分割することで、処理の実行順を指定することができるというわけです。

ただ見やすいからという理由ではないんですね!

ルール2:hookは描画関数のトップレベルから呼び出す

hookをif文やfor文などの中から呼び出すことはできない。

なぜできないかというと、そのような使い方では、条件によってコンポーネントが呼び出すhookの数が変わってしまうためReactが値を管理できなくなってしまうから。

ルール3:非同期呼び出しはできない

hookを非同期呼び出しすることはできない。

しかし例外として、useEffectで副作用の中にasync呼び出しを記述することは可能

useEffect(() => {
  const fn = async () => {
    await SomePromise();
  };
  fn();
});

以上、お読みいただきありがとうございました。

コメント

タイトルとURLをコピーしました