에러노트 1)

warning: firebase snapshot can't perform a react state update on an unmounted component.

상황:

글을 작성하는 Post 컴포넌트에서 새로운 글을 작성하고 업로드 했을 때, Home 컴포넌트에서 발생한 에러로, Home 컴포넌트는 마운트 되어 있지 않은 상태였다.

에러가 발생한 곳의 코드

//Home
const handlerSnapShot = () => {
    dbService.collection('ssok').onSnapshot((snapshot) => {
      const ssokArr = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setSsoks(ssokArr);
    });
  };
useEffect(() => {
  handlerSnapShot();
}, [ssoks]);

firebase 의 공식문서를 찾아보니 더이상 데이터 수신에 관심이 없다면 이벤트 콜백이 호출되지 않도록 해야 한다고 적혀있었다.
관련내용

//For example:
var unsubscribe = db.collection("cities")
    .onSnapshot(function (){
      // Respond to data
      // ...
    });

// Later ...

// Stop listening to changes
unsubscribe();

앞의 내용과 비슷한 맥락으로 useEffect 의 관련내용 중 메모리 누수 관련 워닝메세지도 종종 보였는데,

Warning: Can't perform a React state update on an unmounted component. This is a no-op, but it indicates a memory leak in your application. To fix, cancel all subscriptions and asynchronous tasks in a useEffect cleanup function.

Home에서는 계속해서 onSnapshot 으로 데이터 수신을 지켜보고 있고, Post에서 새로운 글을 작성하면 onSnapshot 콜백함수가 작동하면서 발생한 에러들인 것 같다.

해결

  useEffect(() => {
    const unsubscribe = dbService.collection('ssok').onSnapshot((snapshot) => {
      const ssokArr = snapshot.docs.map((doc) => ({
        id: doc.id,
        ...doc.data(),
      }));
      setSsoks(ssokArr);
    });

    return () => unsubscribe();
  }