useEffectフック内で状態を設定できますか

Question 1

他の状態に依存している状態があるとしましょう（たとえば、Aが変更されたときにBを変更したい）。

Aを監視し、useEffectフック内にBを設定するフックを作成することは適切ですか？

ボタンをクリックすると、最初のエフェクトが起動してbが変化し、次のレンダリングの前に2番目のエフェクトが起動するように、エフェクトはカスケードされますか？このようなコードを構造化することのパフォーマンス上の欠点はありますか？

let MyComponent = props => {
  let [a, setA] = useState(1)
  let [b, setB] = useState(2)
  useEffect(
    () => {
      if (/*some stuff is true*/) {
        setB(3)
      }
    },
    [a],
  )
  useEffect(
    () => {
      // do some stuff
    },
    [b],
  )

  return (
    <button
      onClick={() => {
        setA(5)
      }}
    >
      click me
    </button>
  )
}

Question 2

あるエフェクト内でSetStateを設定した場合でも、エフェクトは常にレンダリングフェーズの完了後に実行され、別のエフェクトは更新された状態を読み取り、レンダリングフェーズの後でのみアクションを実行します。

bそれ以外の理由で変更される可能性がない限り、両方のアクションを同じ効果で実行する方がおそらく良いと言っていchanging aますが、その場合も同じロジックを実行する必要があります

Question 3

一般的に言って、setStateinsideuseEffectを使用すると、発生させたくない可能性が最も高い無限ループが作成されます。そのルールにはいくつかの例外がありますが、これについては後で説明します。

useEffectは各レンダリングの後に呼び出され、そのsetState内部で使用されると、コンポーネントが再レンダリングされ、呼び出しuseEffectなどが行われます。

useStateinsideを使用してもuseEffect無限ループが発生しない一般的なケースの1つは、useEffectlikeの2番目の引数として空の配列を渡す場合です。useEffect(() => {....}, [])これは、最初のマウント/レンダリングの後でのみ、エフェクト関数を1回呼び出す必要があることを意味します。これは、コンポーネントでデータフェッチを実行していて、リクエストデータをコンポーネントの状態で保存する場合に広く使用されます。

Question 4

将来の目的のために、これも役立つかもしれません：

useEffectループを作成しないように、すでに説明したように注意を払う必要があるだけで、setStateを使用しても問題ありません。

しかし、発生する可能性のある問題はそれだけではありません。下記参照：

親からComp受信するコンポーネントがありprops、props変更に応じてCompの状態を設定するとします。何らかの理由で、異なる小道具ごとに変更する必要がありますuseEffect：

こんなことしないで

useEffect(() => {
  setState({ ...state, a: props.a });
}, [props.a]);

useEffect(() => {
  setState({ ...state, b: props.b });
}, [props.b]);

この例でわかるように、の状態が変わることはありません：https： //codesandbox.io/s/confident-lederberg-dtx7w

これがため、この例では、それはだ起こる理由の両方useEffectsが同じで実行サイクルを反応させ、あなたが両方を変更したときprop.aとprop.bの値ので、{...state}あなたがないときsetStateの両方でまったく同じですuseEffect彼らは同じ状況にあるため。2番目を実行するsetStateと、最初のが置き換えられsetStateます。

これを代わりに行う

この問題の解決策は、基本的に次のsetStateように呼び出すことです。

useEffect(() => {
  setState(state => ({ ...state, a: props.a }));
}, [props.a]);

useEffect(() => {
  setState(state => ({ ...state, b: props.b }));
}, [props.b]);

ここで解決策を確認してください：https：//codesandbox.io/s/mutable-surf-nynlx

これで、を続行すると、常に最新の正しい状態の値を受け取りますsetState。

これが誰かに役立つことを願っています！

Question 5

useEffect特定の小道具や状態に引っ掛かることができます。したがって、無限ループフックを回避するために必要なことは、いくつかの変数または状態をバインドして実行することです。

例えば：

useEffect(myeffectCallback, [])

上記の効果は、コンポーネントがレンダリングされた後にのみ発生します。これはcomponentDidMountライフサイクルに似ています

const [something, setSomething] = withState(0)
const [myState, setMyState] = withState(0)
useEffect(() => {
  setSomething(0)
}, myState)

上記の効果は、私の状態が変更された場合にのみcomponentDidUpdate発生します。これは、すべての変化する状態が発生するわけではないことを除いて、同様です。

このリンクから詳細を読むことができます

Question 6

▶1。useEffectフック内で状態を設定できますか？

原則として、状態は必要な場所に自由に設定できます。内部useEffectやレンダリング中も含まれます。フックをdeps適切に設定したり、条件付きで状態を設定したりして、無限ループを回避するようにしてください。

▶2。他の状態に依存している状態があるとしましょう。Aを監視し、useEffectフック内にBを設定するフックを作成することは適切ですか？

あなたはちょうど古典的なユースケースを説明しましたuseReducer：

useReducer通常、複数のサブ値を含む複雑な状態ロジックがある場合、または次の状態が前の状態に依存してuseStateいる場合よりも望ましいです。（Reactドキュメント）

状態変数の設定が別の状態変数の現在の値に依存している場合は、両方をに置き換えてみてください。[...]自分で書いていることに気付いたら、代わりにレデューサーの使用を検討する良い機会です。（ダン・アブラモフ、過剰反応ブログ）useReducer setSomething(something => ...)

コードスニペットを表示

let MyComponent = () => {
  let [state, dispatch] = useReducer(reducer, { a: 1, b: 2 });

  useEffect(() => {
    console.log("Some effect with B");
  }, [state.b]);

  return (
    <div>
      <p>A: {state.a}, B: {state.b}</p>
      <button onClick={() => dispatch({ type: "SET_A", payload: 5 })}>
        Set A to 5 and Check B
      </button>
      <button onClick={() => dispatch({ type: "INCREMENT_B" })}>
        Increment B
      </button>
    </div>
  );
};

// B depends on A. If B >= A, then reset B to 1.
function reducer(state, { type, payload }) {
  const someCondition = state.b >= state.a;

  if (type === "SET_A")
    return someCondition ? { a: payload, b: 1 } : { ...state, a: payload };
  else if (type === "INCREMENT_B") return { ...state, b: state.b + 1 };
  return state;
}

ReactDOM.render(<MyComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect } = React</script>

スニペットを展開

▶3。ボタンをクリックすると、最初のエフェクトが起動してbが変化し、次のレンダリングの前に2番目のエフェクトが起動するように、エフェクトがカスケードされますか？

useEffectレンダリングがコミットされ、DOMの変更が適用された後に常に実行されます。最初のエフェクトは発火し、変化bし、再レンダリングを引き起こします。このレンダリングが完了すると、b変更により2番目のエフェクトが実行されます。

コードスニペットを表示

let MyComponent = props => {
  console.log("render");
  let [a, setA] = useState(1);
  let [b, setB] = useState(2);

  let isFirstRender = useRef(true);

  useEffect(() => {
    console.log("useEffect a, value:", a);
    if (isFirstRender.current) isFirstRender.current = false;
    else setB(3);
    return () => {
      console.log("unmount useEffect a, value:", a);
    };
  }, [a]);
  useEffect(() => {
    console.log("useEffect b, value:", b);
    return () => {
      console.log("unmount useEffect b, value:", b);
    };
  }, [b]);

  return (
    <div>
      <p>a: {a}, b: {b}</p>
      <button
        onClick={() => {
          console.log("Clicked!");
          setA(5);
        }}
      >
        click me
      </button>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

スニペットを展開

▶4。このようなコードを構造化することによるパフォーマンスの欠点はありますか？

はい。の状態変化をb別のuseEffectforでラップすることによりa、ブラウザには追加のレイアウト/ペイントフェーズがあります-これらの効果は潜在的にユーザーに表示されます。useReducer試してみたい方法がない場合はb、a直接一緒に状態を変更できます。

コードスニペットを表示

let MyComponent = () => {
  console.log("render");
  let [a, setA] = useState(1);
  let [b, setB] = useState(2);

  useEffect(() => {
    console.log("useEffect b, value:", b);
    return () => {
      console.log("unmount useEffect b, value:", b);
    };
  }, [b]);

  const handleClick = () => {
    console.log("Clicked!");
    setA(5);
    b >= 5 ? setB(1) : setB(b + 1);
  };

  return (
    <div>
      <p>
        a: {a}, b: {b}
      </p>
      <button onClick={handleClick}>click me</button>
    </div>
  );
};

ReactDOM.render(<MyComponent />, document.getElementById("root"));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.0/umd/react.production.min.js" integrity="sha256-32Gmw5rBDXyMjg/73FgpukoTZdMrxuYW7tj8adbN8z4=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.0/umd/react-dom.production.min.js" integrity="sha256-bjQ42ac3EN0GqK40pC9gGi/YixvKyZ24qMP/9HiGW7w=" crossorigin="anonymous"></script>
<div id="root"></div>
<script>var { useReducer, useEffect, useState, useRef } = React</script>

スニペットを展開