TIL 33 REACT-Hookを使用するルール

Hookを使うときは2つの事項を守らなければなりません.

Hookは最上階からしか呼び出せません。

重複文、条件文、またはネストされた関数内でHookを呼び出すことはできません.また、early returnを実行する前にreact関数の最上位レベルでhookを呼び出す必要があります.
このルールに従って、常に同じ順序でHookが呼び出されていることを確認します.
繰り返し文、条件文、またはネスト関数でHookを呼び出すと、エラーが発生します.


early returnを実行してHookを呼び出すと、次のエラーが発生します.


早退するより間違いない.

エラーの原因は、Hookが呼び出し順序に依存しているためです.条件文または半文の条件に従って実行すると、実行できない場合があります.これでは呼び順が保障されず、順番が遅れてエラーが発生する可能性があります.
したがって、Hookは常に構成部品の最上位レベルで呼び出され、効果を条件付きで実行するには、Hookの内部に条件文を追加する必要があります.

  useEffect(function persistForm() {
    if (!name) {
      localStorage.setItem('formData', name);
    }
  });

react関数内でのみHookを呼び出すことができます。

Hookは一般的なJavaScript関数から呼び出すことができません.Hookは次のように呼び出されるべきです.
react関数構成部品からhookを呼び出す必要があります.
Custom HookはHookを呼ぶ必要があります.