反応器を使用すると、状態変数の値は変化しませんが、再表示されます.(他の状態変数の変化など)このような不要なレンダリングを阻止し、パフォーマンスを最適化するHookがあります-!それが「useEffect」
以上、レンダリングとは何かに注目することも重要ですが、レンダリングの回数をできるだけ減らすことも開発者の重要な仕事になります.ではuseEffectについて知りましょう-!

💡 useEffect

Side Effect

SideEffectは私たちが知っているように、「副作用」の意味を含んでいます.「プログラミングのside Effectは少し違います.」「よくない」という意味というより、現象そのものを言うときにsideEffectという言葉を使います!
コンピュータ科学の中で 関数が結果値以外で他の状態を変化させる場合を「副作用」と呼ぶ.
だから正確に言えば、どんな状況ですか.🤔
入力または出力が影響を受けない場合
Input、outputに加えて、操作の他の値も含まれます.
👉 レンダリングではなく、外部の世界に影響を与える動作.
👉 より簡単に言えば、レンダリング以外のすべての動作
例を挙げる

const addNum = 10
const sumNum = num => {
return num + addNum } 

上のsumnum関数は副作用がありますか?return num + addNum という部分自体が副作用と言える.addnumという名前の外部値を得ることで操作されるからです!
もう一つの例!

const variable = 10

const sumVar = (num) => {
	variable = 20; // 외부의 값을 조작  - side effect 

	return num + 1 }

variable = 20;は外部の値を操作しているので、副作用とみなすことができる.
より具体的には、大きく3つの例に分けることができます.

Side Effectタイプ

ААААААААААА
✔直接アクセスdom(ex.Event listener-外部DOM)
ААААААААААААААА

Side Effectの欠点😤?

✔¥レンダリングをブロック-コード順序の実行時に副作用後のレンダリングがある場合は、まず副作用を実行します.
✔¥landeringごとに運転します.
これらのSide Effectの欠点を補うために、「UserEffect」を使用します.

💡 useEffect💡

useEffect(()=>{}, [])
userEffect(副作用を行う関数、依存配列)
userEffectは、パラメータとしてコールバック関数と依存配列を受け入れます.
このuseEffectは、既存の副作用とは異なり、[レンダリング後](Render After)コールバック関数を実行します.👉 遅延は必要ありません.副作用の欠点を補う.
userEffectのパラメータ値をよく確認します.
useEffect(Arg1, Arg2)
Arg 1コールバック関数:副作用を実行する関数
Arg 2 reliancy array:arrayの値が変更された場合にのみ効果が実行されます.
👉 つまり、2番目のパラメータのステータス値は、1番目のパラメータの関数が実行されるかどうかを決定します.だから2番目の因子は「依存性」配列と呼ばれています!
たとえば

useEffect(()=>{ console.log(“quiz”)}, [count,input])

上のコンソール.countまたはinputステータス変数のいずれかの値が変化すると、log(「quiz」)が再実行されます.
userEffectの2番目のパラメータに何も置かない場合は、レンダリングのたびに実行されます.
ex)

useEffect(()=>{ console.log(“quiz”)})

2番目のパラメータには何も追加されていないため、副作用の既定値でレンダリングするたびに実行されます.
また、ページロード時に一度だけ関数を実行することもできます.
ex)

useEffect(()=>{ console.log(“quiz”), []})

上記の依存配列は空の配列[]の形式でステータス値を含まないため、ページを最初にロードするときに関数は1回のみ実行されます.

🧹 Clean Up

Clean up:効果をクリアします(購読など、常にクリアしてください)
effectを掃除するのはどういう意味ですか?
たとえばsetInterval

function interval(){
Const id = setInterval(()=> console.log(“1 second”), 1000);

	return () => {
	clearInterval(id)}}

useEffect(interval)

上記のintervalと呼ばれる関数は、intervalを停止する関数を返すことで効果をクリアします.
関数の終了時に新しい関数を返すことで、既存の副作用を停止し、他の素子に移行するときにinterval関数を自動的に実行しないようにします.
ポイントを覚えて-!⭐️👉 useEffectに入ったコールバック関数が返す関数はコールバック関数が消えたときに返す!

🍯 の最後の部分

現在作成中のウェブサイト(Wistartgram)でfetchを使用している場合、それ以外にもuseEffectに書き込むことができるエリアを探す必要があります.スクリーンだけでなく、コードも非常にきれいで、性能も最適化されています(!!)私はウェブサイトを実現できる開発者になりたいです---!