React Hooks エラー解決方法

Question

uncaught Invariant Violation: Rendered more hooks than during the previous render.
上記のエラーが出てたので調べたら条件分岐のとこでuseReduserを使っているのが原因でした。
useTrの処理の中でuseReduserを使っています。

  if (category()) {

  );の条件分岐をなくしてuseTr()の中で三項演算子を使い条件分岐をしたのですが

  return useTr(
    category() ? Params(category().useId): null,
    { Token: null },
    [category().useId],
  );
return initialState;

　と書いてもuseTrの処理が絶対呼ばれてしいます。どういうふうに書いたらcategory()がfalseの時にinisialStateを返してtruの時はuseTrを呼ぶことができますか？

    const category = (): Users | null => {
    const ttg = category.find((i) => i.categoryId === category.id);
    return (ttg != null) ? ttg : null;
  };

   const Params = (userId: number) => Object.assign({}, params, { userId });

   if (category()) {
      return useTr(
        Params(category().useId),
        { Token: null },
        [category().useId],
      );
    }
    return initialState;

Comments

[maisumakun]

useTrはどのようなHookなのでしょうか。

[ktaaa]

どのような？？
useTrのコードを載せないと解決できないでしょうか？？
業務用なのであんまり見せたくないのですが

Answer 1

useTrの処理が絶対呼ばれてしいます

• 呼ばれても問題ないようなHooksを作る
• コンポーネントごと「Hooksを入れるコンポーネント」「入れないコンポーネント」で条件分岐させる

の2つに1つです。「Hooksで書く」ということは、「入れたコンポーネントでは絶対に実行される」ことと同義です。

Comments

[ktaaa]

「Hooksを入れるコンポーネント」で条件分岐させるとはどういうことなのでしょうか？

[maisumakun]

<ComponentWithHook>と<ComponentWithoutHook>を用意して、条件に応じてどちらをrenderさせるか選ぶ、ということです。

（もっとも、Hookの側で呼び出されても問題ないようにするほうが適切かと思います）

[ktaaa]

上記のだとこのコンポーネントで条件分岐するのではなく、trueだったらこのコンポーネントを呼び
falseだったら別のコンポーネントを呼ぶということでしょうか？

[maisumakun]

そうですね、Hookをかける部分をサブコンポーネントに切り出すようなイメージです。

[ktaaa]

それでも結局
if (category()) {
return useTr(
Params(category().useId),
{ Token: null },
[category().useId],
);
}

みたいに条件分岐するのでuseTrがifの中に入ってしまう気がするのですが

[maisumakun]

return category() ? <ComponentWithHook>: <ComponentWithoutHook>;のような感じです（useTrはComponentWithHookの中でだけ使います）。

[ktaaa]

上記のようにするとコンポーネントの中にuseTrがあるものとないもののコンポーネントがあるだけで他の処理が全部同じになってしまうのですが、それはもう設計が悪いということですよね？

[maisumakun]

> 上記のようにするとコンポーネントの中にuseTrがあるものとないもののコンポーネントがあるだけで他の処理が全部同じになってしまうのですが

では、useTrと関係ない部分をさらにサブコンポーネントに切り出しましょう。両者で使い回せます。

[maisumakun]

（余計なところでuseTrを呼び出しても、「多少処理が走るだけで、特に副作用がない」ようでしたら、余計なHooksによる処理負荷は無視してかけっぱなしにするという選択肢も、もちろんありです）

[ktaaa]

なるほどわかりました！！！！

return category() ? <ComponentWithHook>: <ComponentWithoutHook>;のような感じです（useTrはComponentWithHookの中でだけ使います）。とあるのですが、このように条件分岐すると
return inisialStateはどのように書いたらいいのでしょうか？

[maisumakun]

すみません、これ自体がHooksの中だったのですね。

（不要な場面でuseTrを呼びたくない理由はどのようなものでしょうか）

[ktaaa]

（不要な場面でuseTrを呼びたくない理由はどのようなものでしょうか）とはどういうことでしょうか？
if (category()) {ではなければuseTrを返さずにsnishiakStateを返したいです

[maisumakun]

> if (category()) {ではなければuseTrを返さずにsnishiakStateを返したいです

それだけでいいのなら、useTr()を常に呼んで結果を変数に受けておいて、返り値を返すところで選べばいいです。