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

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

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();
});

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