フック付きのReact機能コンポーネントに複数回レンダリングします

Question

実際に私はこの問題の正しい点を得ていません。だから助けを求めています。私はこの状態全機能コンポーネントを持っています。私がここで気づいたことは、私がUseEffectフックを使用してデータを取得するとき、それから応答を正しく入手します。

問題は、return文のconsole.log（ "OK"）を実行すると、コンソール内の出力を複数回提供します。画像が追加されました。

これが私の州とユースエフェクトフックです

そしてここで私の返品機能はあります

これが私がページを閲覧するたびに入手するコンソールの出力です。

Console.log（ "OK"）が複数回実行されているのはなぜですか？

Answer 1

useStateコンポーネントを再レンダリングするので、React Docを理解するように読む必要があります。

Answer 2

multiple回、5回実行していません。

1. useEffect（最初のレンダリング）
2. setMovies
3. setHeroImage
4. setCusrrentPage
5. setTotalPages

useEffect[]のDEPSを持ち、これは最初のレンダリングのみでのみ発生します。それからあなたは4回状態を変えているので、再レンダリングが起こります。これは、DOMが5回変更されるという意味ではありません。

Answer 3

Reactは非常に単純化されており、基本的にはすべてを常に再レンダリングします。コンポーネントの状態が変更された場合、再レンダリングが起動されます。あなたは州を4回更新し、その理由です。