useEffectのcleanup
code:ts
useEffect(() => {
// setup code
return () => {
// cleanup code
};
setup codeに、
connectするためのコードを書く
cleanup codeに
disconnectするためのコードを書く
setup codeが行ったことの、停止・元に戻す処理を書く
cleanup codeが実行されるタイミング
再描画される時
古いpropsとstateで、clenup codeが呼ばれる
その後、新しいproptとstateで、setup codeが呼ばれる
Componentがunmountされる時
ユースケース集
アニメーションのトリガもcleanupで初期値に戻す ref code:ts
useEffect(() => {
const node = ref.current;
node.style.opacity = 1; // Trigger the animation
return () => {
node.style.opacity = 0; // Reset to the initial value
};
}, []);
fetch
cleanupでfetchを中止するか、その結果を無視する
code:ts
useEffect(() => {
function handleScroll(e) {
console.log(window.scrollX, window.scrollY);
}
window.addEventListener('scroll', handleScroll);
return () => window.removeEventListener('scroll', handleScroll);
}, []);
removeする
この辺、どういう根拠なのかあまりちゃんと理解していないmrsekut.icon
関連して、一度しかeffectを走らせないためsubscribe後のcleanupの関数が不要に感じられたとしても、基本的に必ずcleanupは書く必要があります。ref たまにこういう事を言っている人を見かける
たぶん過言
mrsekut.iconが前提を読み落としてるだけで別に誰も「常に」とは言ってないかmrsekut.icon
reactはui libraryなので、useEffect内でやる処理はUIのためであるべき、という主張
cleanUp関数は必須！
なのでfetchなど、コアロジックに関するものは別の場所でやるべき
「ui libraryなので」というのはちょっと引っかかるけど全体的にはわかる
custom hook使ったら、hooks内はReactの話だけど結局fetchとかするし
ただ、この表現は問題の切り分けとしての説明としてわかりやすい
docsでもcleanupが不要な例が書かれている
この例では、クリーンアップ関数は必要ありません。
なぜなら、MapWidget クラスは自身に渡された DOM ノードのみを管理しているためです。
React の Map コンポーネントがツリーから削除された後、DOM ノードと MapWidget クラスインスタンスは、ブラウザの JavaScript エンジンによって自動的にガベージコレクションされます。ref 3. 必要に応じてクリーンアップを追加する。 ref 一部のエフェクトは、行っていたことを停止、元に戻す、またはクリーンアップする方法を指定する必要があります。例えば、「接続」には「切断」が必要で、「登録」には「解除」が必要で、「取得」には「キャンセル」または「無視」が必要です。クリーンアップ関数を返すことで、これを行う方法を学びます。
「必要に応じて」