react + firebase + snapshot

TOC

1. snapshot을 반환하지 않을 경우 생기는 문제

2. 해결책

1. snapshot을 반환하지 않을 경우 생기는 문제

firebase에서 snapshot은 database에 대한 변화를 observing하고 있다.

metadata, serverTimeStamp options등을 제공하기도 한다. 링크

아무튼 디버깅을 하던 와중에 마주친 버그를 해결함과 동시에 다시 잊지 않기 위해 포스팅을 이어나갑니다.

This is a no-op, but it indicates a memory leak in your ...

제가 마주친 버그는 위의 사진과 같습니다.

1번 component와 2번 component가 있습니다.

이 둘은 router로 나뉘어져 있고 같은 데이터를 firebased로부터 받아와 사용하고 리스트업 합니다.

1번은 변경과 수정 삭제를 할 수 있고 2번은 자신이 업로드한 데이터들을 모아 볼 수 있는 component입니다.

1번은 firebase의 snapshot기능을 이용해 realtime data를 fetcing해 사용중입니다.

문제는 여기서 발생합니다. snapshot의 기본적인 작동은 js의 eventlistener와 비슷합니다. 즉 계속 db를 보고 있기 때문에 component가 unmount되었을 때 이를 해제해주어야 한다는 것입니다.

아니면 memory leak이 발생하기 때문이죠,

다행히도 인터넷을 좀 뒤지다보면 stackoverflow에서 답을 찾아낼 수 있습니다.
물론 공식 Reference에도 소개하고 있긴 하지만 이해하기 난해합니다.
firebase_Reference_unsubscribe

2. 해결책

참고로 저는 hooks를 사용중입니다.

해결은 일반 eventlistener를 cleanup하는 것과 마찬가지로 return해주면 된다. 입니다.

  useEffect(() => {
    const unsubscribe = db
      .collection('yourCollectionName')
      .orderBy('해도 그만 안해도 그만')
      .onSnapshot((snapShot) => {
        ...your Data...
        }));
        
      });
    return () => {
      unsubscribe();
    };
  }, []);

생각보다 간단합니다. snapshot을 객체에 담아 return할 때 반환해주는 hooks와 마찬가지 방법을 사용하므로 적용하기가 간편합니다.

감사합니다.