Files

T

Antigravity Agent 504fd5fb42 [G1-Sync] Manual knowledge update

2026-05-10 22:08:15 +09:00

7.3 KiB

Raw Blame History

id, title, category, status, canonical_id, aliases, duplicate_of, source_trust_level, confidence_score, verification_status, tags, raw_sources, last_reinforced, github_commit, tech_stack

title

useEffect 클린업(Cleanup)

매 한 줄

"매 useEffect 의 return function — 매 next effect 또는 unmount 직전 실행". 매 subscription, timer, listener, abortable fetch, websocket 의 leak 방지. 매 React 18+ StrictMode 의 double-invoke 가 cleanup 정확성 검증. 매 idempotent + 매 symmetric 한 setup/teardown 매 핵심.

매 핵심

매 실행 시점

Mount: 매 effect run, cleanup 미실행.
Re-run (deps 변경): 매 이전 cleanup → new effect.
Unmount: 매 마지막 cleanup 실행.
StrictMode (dev): 매 mount → cleanup → mount 매 simulate — 매 cleanup 의 정확성 강제.

매 cleanup 필요 case

Subscription: store, observable, websocket → unsubscribe.
Timer: setTimeout, setInterval → clear.
Event listener: addEventListener → removeEventListener.
Abortable fetch: AbortController → abort.
DOM mutation: portal, manual DOM insert → remove.
External lib: chart, map instance → destroy.

매 응용

Stale closure 방지: 매 cleanup 으로 이전 effect 의 reference 정리.
Race condition 방지: 매 fetch 의 ignore flag pattern.
Animation cleanup: requestAnimationFrame cancel.
Subscription chain: 매 outer effect 의 cleanup 안에서 inner subscription 도.
Test reliability: 매 cleanup 가 test 의 isolation 보장.

💻 패턴

Event listener

useEffect(() => {
  const handler = (e: KeyboardEvent) => {
    if (e.key === 'Escape') closeModal();
  };
  document.addEventListener('keydown', handler);
  return () => document.removeEventListener('keydown', handler);
}, []);

Timer

useEffect(() => {
  const id = setTimeout(() => setShown(false), 3000);
  return () => clearTimeout(id);
}, [shown]);

// Interval
useEffect(() => {
  const id = setInterval(() => tick(), 1000);
  return () => clearInterval(id);
}, []);

Abortable fetch (race-safe)

useEffect(() => {
  const controller = new AbortController();

  fetch(`/api/user/${id}`, { signal: controller.signal })
    .then(r => r.json())
    .then(setUser)
    .catch(e => {
      if (e.name !== 'AbortError') console.error(e);
    });

  return () => controller.abort();
}, [id]);
// 매 id 변경 시 이전 fetch abort — race condition 방지.

WebSocket

useEffect(() => {
  const ws = new WebSocket(url);
  ws.onmessage = (e) => setMessages(m => [...m, e.data]);
  ws.onerror = (e) => console.error(e);
  return () => {
    ws.onmessage = null;
    ws.onerror = null;
    ws.close();
  };
}, [url]);

Subscription pattern

useEffect(() => {
  const unsub = store.subscribe(setState);
  return unsub; // 매 직접 return — concise.
}, [store]);

Ignore flag — fetch (legacy without AbortController)

useEffect(() => {
  let ignore = false;
  fetch(url).then(r => r.json()).then(data => {
    if (!ignore) setData(data);
  });
  return () => { ignore = true; };
}, [url]);
// 매 AbortController 가 더 권장 (network cancel 까지).

requestAnimationFrame

useEffect(() => {
  let raf: number;
  const tick = () => {
    setProgress(p => p + 1);
    raf = requestAnimationFrame(tick);
  };
  raf = requestAnimationFrame(tick);
  return () => cancelAnimationFrame(raf);
}, []);

IntersectionObserver

useEffect(() => {
  if (!ref.current) return;
  const obs = new IntersectionObserver(([e]) => {
    if (e.isIntersecting) loadMore();
  });
  obs.observe(ref.current);
  return () => obs.disconnect();
}, [loadMore]);

Third-party chart instance

useEffect(() => {
  if (!containerRef.current) return;
  const chart = echarts.init(containerRef.current);
  chart.setOption(options);
  const onResize = () => chart.resize();
  window.addEventListener('resize', onResize);
  return () => {
    window.removeEventListener('resize', onResize);
    chart.dispose(); // 매 chart 의 own resources 정리
  };
}, [options]);

Portal DOM

useEffect(() => {
  const node = document.createElement('div');
  document.body.appendChild(node);
  setPortalNode(node);
  return () => {
    document.body.removeChild(node);
  };
}, []);

StrictMode 의 double-invoke 대응

// 매 StrictMode 가 dev 의 effect 를 mount → cleanup → mount 매 한 번 더.
// 매 cleanup 가 idempotent 하면 문제 없음.

useEffect(() => {
  let mounted = true;
  const id = setInterval(() => {
    if (mounted) tick();
  }, 1000);
  return () => {
    mounted = false;
    clearInterval(id);
  };
}, []);
// 매 위 mounted flag 매 redundant — clearInterval 만으로 충분.
// 매 그러나 async work 의 cancel 매 어려운 case 에서 유용.

Async cleanup pattern

useEffect(() => {
  let cancelled = false;
  (async () => {
    const data = await loadData();
    if (!cancelled) setData(data);
  })();
  return () => { cancelled = true; };
}, [id]);
// 매 cleanup function 매 async X — return 의 Promise 매 React 가 무시.

매 결정 기준

상황	Approach
Fetch	AbortController + abort.
Subscription	unsubscribe 직접 return.
Timer	clearTimeout/Interval.
Listener	addEventListener / removeEventListener pair.
매 cleanup 불필요	매 console.log, 매 pure side-effect 없는 derivation.

기본값: 매 모든 setup 의 paired teardown — 매 symmetric. 매 deps 가 자주 바뀌면 cleanup 의 cost 도 고려.

🔗 Graph

부모: useEffect · React Hooks
변형: useLayoutEffect · useInsertionEffect · useSyncExternalStore
응용: AbortController · WebSocket · IntersectionObserver
Adjacent: StrictMode · React Lifecycle · Race Condition

🤖 LLM 활용

언제: 매 모든 useEffect 안의 subscription, timer, listener, abortable async work 의 정리. 언제 X: 매 effect 가 pure derivation (state from props) — 매 useMemo 가 더 적합. 매 effect 자체 가 불필요한 case.

❌ 안티패턴

Cleanup 망각: 매 listener leak — 매 unmount 후 setState 호출 → console warning.
Async cleanup return: 매 return async () => {...} — 매 React 가 Promise 무시. 매 sync function.
Stale ref 캡처: 매 cleanup 의 closure 가 이전 dep value 사용 — 매 명시적으로 ref 또는 latest pattern.
deps 빠짐: 매 cleanup 가 outdated value 정리 — 매 ESLint react-hooks/exhaustive-deps 권장.
StrictMode 의 cleanup 회피 수단: 매 if (didMount.current) return; didMount.current = true — 매 anti-pattern. 매 cleanup 정확성 으로 해결.

🧪 검증 / 중복

Verified (React docs useEffect, React 18 StrictMode docs, Dan Abramov 의 useEffect 글).
신뢰도 A.

🕓 Changelog

날짜	변경
2026-05-08	Phase 1
2026-05-10	Manual cleanup — useEffect cleanup patterns, AbortController, StrictMode 대응 추가

7.3 KiB Raw Blame History