React Hooks で if 文の中でフックを使わないようにする方法

Question

React Hooks のルールでは、以下のように定められています。

• フックをループや条件分岐、あるいはネストされた関数内で呼び出してはいけません。

しかし、ある state の状態を見て他の state を変更したいときもあると思います。

例）

const App = (): JSX.Element => {
  const [drawerOpen, setDrawerOpen] = useState(false);
  const [login, setLogin] = useState(false);

  const handleOnClick = (): void => {
    if (drawerOpen) {
      setLogin(true); // if 文の中なのでダメ？
    } else {
      setLogin(false); // if 文の中なのでダメ？
    }
  };

  return (
    <button onClick={(): void => handleOnClick()}>Click!</button>
  )
};

上の例というと、ドロワーが閉じられているかどうかでユーザのログイン状態を変化させるようなときです。
このような場合にはどのようにフックを書けば良いのでしょうか？

よろしくお願いいたします。

Answer 1

このような場合にはどのようにフックを書けば良いのでしょうか？

そのまま書いて構いません。分岐やループに入れてはいけないのはuseで始まるフック設定用の関数です。setStateは問題ありません。

Comments

[KentaKonno]

ご回答いただきありがとうございました。
根本が分かっていなかったようです・・・
勉強になりました。

Answer 2

setLogin(drawerOpen); でどうでしょうか？

Comments

[KentaKonno]

ありがとうございます。
この例ではおっしゃる通りですね。
例として適切ではなかったかもしれません。